I've spent the past week optimizing and bug fixing what we have so far. To keep the speed of the game up to 60 frames per second requires a lot of reworking, a repertoire of tricks, and a lot of hard work. In fact, probably 60% of the work I do is optimizing.

I did have time to put together a demonstration of parallax scrolling. This is a technique used to create the illusion of a 3D environment using 2D images. You've already seen this technique used extensively in cartoons. Artists will create a far away image, then place other images on top of them. When the camera is moving, the layers which are furthest away move at a slower rate than the layers which are in the front. This tricks your eye into thinking that the images moving slower are more distant then your vantage point.

This technique is used in 2D games as well. As an engine test, and for your benefit, I have created 3 layered graphics which we will observe in the engine. Please keep in mind that these graphics were created by me, and are thus programmer art.

This first image will be the layer furthest away from the camera and will travel the slowest when the game is scolling:

This next layer will travel a bit faster: This blue layer will be faster still:
Our original ground layer (the dark green one) will travel at the speed of the camera. Game play will take place on this layer so we use this one as the basis for all layer movement.

With these elements in place we get the sense of distance. (or at least with Jen's artwork we will):



See you next week!

For several years I've been fascinated by court artists and their work. It's a difficult job that requires a tremendous amount of skill and proficiency, and I enjoy studying the intricacies of this area of art.
Today I tried my hand at a likeness, using a screen shot from a TV show as my reference:

For the past few days I've been working out how I would like to incorporate some special trees into our game. Most of the trees we will be using in our game will be static images which are just drawn to the screen. For a couple of scenes in our game, we will require trees with separate leaves.
Jen has made a fabulous tree graphic:

The last time I had placed leaves on a tree was for a projection displayed for a local choir's concert. Being on a very tight schedule, I did not have the time to properly conceive of a way to place leaves onto the tree, so what I did was manually pick points on the tree then tell the engine to scatter some leaves around the points. This produced an acceptable look for a projection, but for a game I need more precision.
For this game, I am using a much improved system. Using the tree graphic as a guide, I paint in the branches which will have leaves attached to them in red.
This new graphic is saved out as a separate image.
Our engine takes the image with the guide lines and places leaves wherever it detects red pixels. There is a little bit of magic that happens to position and rotate the leaves, and to colour them in a random fashion.
The images for the leaves look like this:
To sum up, here's a list for what happens when our engine displays the tree:
1-load the tree graphic
2-load the guide with the red lines
3-load the graphics for the leaves
4-scan the guide and place leaves where there are red lines

Here is the result :



Hmmm, what to do next? Let's see what Jen thinks....

The birds at my mom's bird feeder are too pretty not to paint:

A little midday sketch – one of the birds that have been happily flocking to my mom's new (and very popular) bird feeder:

Hello! Today I'm going to show you something Jennifer has a passion for - foliage. We have our lovely sky, and now we are going to put some land into the scene.
This piece of land is temporary, and looks only passable. It was created by me, and thus is what is described in the business as 'programmer art':

Jennifer has made a few grass and foliage textures to add to the scene: You will notice that two are in colour while the other two are gray scale. The reason for this is because our game engine will render the gray images into whatever colour we like. This way we can have foliage with a variety of colours. Our game engine mathematically places the foliage onto the piece of land in a pseudo random pattern to create this look: I've written code to animate the foliage in a pretty realistic fashion, even having it react to wind:



Let's do some trees next week - as soon as I figure out how I'm going to do them!

-Demetrios

Today I was painting the first of several grass elements that will be placed in our game world and then animated (one of my favourite parts!). Each grass element is drawn on a transparent background so that individual blades will be defined against whichever background happens to be on the screen at the time. Here, I've illustrated some of the painting styles I've used in making the grass elements:

In preparation for making my buoys sketch into a painting, I spent some time doing a colour study based on my photograph. I may have to tweak a few colours before I start painting. A couple of little thumbnail tryouts may be in order!

Hello again! Today we are finishing up the sky we are working on for our upcoming 2D game. I've shown you how Jennifer's digital Painter graphics have been assembled into my game engine to create a sky:

The last element we are going to add to the sky is a glow effect for the planet and the moon. Adding a glow will nicely soften the edges of the moon, and will create a fantastic look for night time scenes.
To add a glow I am going to use an older technique, one that is very much an old film optical effect, recreated on the computer.

Here is the scene without a glow effect: Firstly, I take a rendering of all items in the scene which will glow, with all non glowing items rendered in black: Next, I take that image and blur it so that glowing pixels spread out to create the fuzzy look of our glow: I then take these two new elements and blend them on top of our original image, to create the glow: During daytime scenes the glow acts to soften the graphics, during the night scenes the effect is really dramatic. Let me show you the moon, with a tree graphic in front of it, without and with the glow effect: With the daytime scene complete, I wrote some simple code to create a randomly generated starfield background for nightime: We felt that our night sky was a little too plain for a fantasy world, so Jen created a nebula: Adding the nebula to our nightime sky: The final image is a combination of all these elements; the planet and moon, the clouds, the nebula, the starfield, and the sky colouring.

Here is a video of the final result:

Next week I hope to guest blog again, see you soon!

-Demetrios

With the supermoon and Perseids meteor shower occurring this week, it seemed fitting to spend some time painting the cosmos: