vrijdag 28 september 2012

Quick and dirty menu image

This week I created some menu background images for the sniper game we're currently developing.
Because of a closing deadline I only had about four to five hours for each image.

In this blog I'll explain how I've created the image for the main menu. Because of the limited time I decided to only use the low poly 3D in-game assets.
I made a copy of Eugene's city game environment, added a camera and played around with it until I was happy with the camera view.

I decided to render the image's lighting in separate files, so I could easily adjust the lighting and shadows in Photoshop. This can save of a lot render settings tweaking time while making the Photoshop file much more flexible.

First I rendered a diffuse map set to full emissive, resulting in an image without shadows. Looks ugly doesn't it?

Next I placed a direct light and only rendered this light's dropshadows:

I used a default skylight for this render:

Finally I rendered an occlusion map which only creates dark inner corners:

All images are imported in Photoshop and placed all layers on top of eachother, using different blending styles. This creates the image below:

I found a suitable sky- and city skyline using my google skills, did some color correction on it and pasted it in a layer behind the city renders:

In the next step I added some fire, smoke, dirt and jets to the scene:

In the final step I did some color correction, added lighting effects and a faint blur around the canvas edge. The final result can be seen below:

That's it! The image is done in just a few hours.


woensdag 19 september 2012



Today I want to talk about something that always draws everybody's attention over here at Xorm when it is being developed.. Explosions!
Most of our games feature them and somehow we always seem to find a reason to put them in a game. I guess we are all addicted to them.. :) Anyway I want to show you how we create them.

Pieter is our chief explosion expert when it comes to explosion effects in our games. He gave me a lot of tips on how to create good looking explosions with a real bang effect.
We create explosions using several particle systems layered on top of each other. They can be seperated as follows:

  • Flash
  • Sparks
  • Fireburst
  • Smoke

The 'Flash' is the least visible part during the explosion sequence, it only appears at the first frame. Despite showing the 'Flash' only at frame 1 of the sequence, it is very important. It gives the effect a real 'BANG!' Effect. Without this the explosion effect can become more of a fireball, without any impact or energy.
The 'Sparks' are there to visualize the energy of the 'Flash'. They also give the explosion direction aswell as revealing the origin. On top of those things it makes the explosion appear crisp and sharp, which really helps to sell the effect.

The 'Fireburst' is the most visible part of the explosion. it is visible after the 'Flash' and represents the flames and fire of the bang. Without the 'Fireburst' it just isn't possible to create a good looking explosion effect.

The 'Smoke' is there to complete the fire effect from the 'Fireburst'. Not only is it true that fire generates smoke in real life, the smoke particles also counter act the additveness of the 'Fireburst' particles. Without the 'Smoke' particles the 'Fireburst' could end up looking too bright and white without any shape defenition of the fire it represents.

This was my first attempt on creating an exploding car:

First Explosion

As you can see it doesn't appear to have that much energy. It also looks more like camp fire laying on its side..
Pieter suggested me to start over with the above information in mind and try again.

This was the end result:

Improved Explosion

That's it for this month! :)


vrijdag 14 september 2012

Enemy incoming!

Hi everyone!

Vacation time is over and everyone is back to work! So we will be posting some awesome news for everyone! For example the sniper project where my brother and I are working on.

During my break my brother made some changes to the menu and all screens so when I got back I made those screens work in game. Not much fun in that..
But what I also had to do is make some management system that will contain the most important stuff for the game! Our WaveManager!
This game will be full with guns, explosions and lots of enemies, basic Xform game but with something extra of course but that's something you will see when the game is finished..
Those enemies won't be coming in 1 line, but from many directions and in intervals so we need a Wave manager for that!

But to manage all of our waves we need a solid manager that needs to know what to spawn, where and when. This was my task! Always love things like this! Especially when they finally work! After some tweaking hell haha!

So let's say our game got 4 spawners, with each 1 single path and 1 goal. So we got 4 paths leading to our base we need to defend. We can start with 4 spawnpoints:

 Spawn Points  
      A = [EnemySpawner1_Dummy, 0]   
      B = [EnemySpawner2_Dummy, 1]   
      C = [EnemySpawner3_Dummy, 2]   
      D = [EnemySpawner4_Dummy, 3]   

Now I know that I have 4 options to spawn enemies from and they got a unique path to walk on.
So when I want an enemy from Spawn point A I know it will be coming from EnemySpawner1_dummy and will walk path 0.
One of my waves look like this...

 [#Wave: [BossGunner_D, 1, EightGunner_A, 2 , SixGunner_B, 1,TwoGunner_C1, 1,TwoGunner_C1, 1,TwoGunner_C1]]  

In this wave there will be multiple enemies from multiple directions. A boss will be incoming from Spawn point D, next group of enemies incoming in 1 second after spawning, eight gunners incoming from spawn point A, new group incoming in 2 seconds, etc...

Greetings, Michael


dinsdag 4 september 2012

A hell called Flash: Part 2!


Last couple of weeks I have been working on the menus and interface screens!
Just as in free kick, this menu needed to be done in flash as well! But this time it was way easier then before. It was all familiar.This time the hard part was designing the screens, there is one in particularly what needed allot of attention.

It’s a very busy screen with allot things to see and to do. There was no possibility to divide this in multiple screen. I’m talking about a shop! Yeah a shop!
Where u can buy guns!! Not cars! But guns! Hell yeah! Haha

Here you can pick your gun, buy one, upgrade it etc etc! Has been allot of fun designing it. During that phase you check allot of references, designing a mock-up, checking it again and redesign stuff. Until you get the perfect screen. It’s important to make an easy setup in Photoshop! So if you have to change, for example; the gun preview section, you want it to be under one layer (or smart object, what we use allot here at Xform).

It’s now in full development and during the project the screen will probably undergo some small changes still! But for now it’s almost done!
Now I’m working it out in flash and my brother will make it all work when it’s done!!
Now back to work and figure out some cool gun names!