DimensioneX/Day-Night Cycles

This article is being translated into english

If you can't wait or visit this page later, just use Google translation!

About this article

In every game developed with DimensioneX we can implement day/night cycles.

This article explains how to do it.

How it works

So simply, DimensioneX supports the use of transparent images. If in any picture in which you have a piece of sky you make the sky to be transparent, you just need to tell DimensioneX the colour that the sky needs to be.

The game engine will produce a coloured rectangle using the specified color, and it will put this box below the scene picture. If the latter is transparent, that's it.

Prepare the picture

Let's suppose that the picture to be treated is this one:

please note the piece of blue sky. That piece needs now to be made trransparent.

The procedure we describe here is valid for Paint Shop Pro 7, but on other programs it will be quite similar.

1

Open the picture with Paint Shop Pro, select the Magic Wand tool

2

Now you have to look for the "Tool options" window, which influences how the tool works. It is possible that this window is not active and in that case you just make it active by clicking the button as in the following screenshot:

Now just leave Feather to zero.

You have to set the Tolerance parameter to a proper value. This number expresses how many colour levels the sky blue can vary before the selection stops. Here the best value for Tolerance can be different from picture to picture. I recommend to start from 30 and then increase or decrease until the selection is correct.

3

Now you have to select the sky.

To make the selection, point the want pointer in the blue sky and click. If the selected area is too bug, decrease the Tolerance value. If the selection is only partial, then increase the value.

You can add a selection to the existing selection by keeping the SHIFT key pressed on your keyboard when clicking with the wand. A selection can be subtracted from the existing by keeping the CTRL key pressed while clicking.

In the screenshot, we have managed to select the sky area correctly:

4

Now verify you have correctly set the background to "no background". This is done by clicking in the palette square for background color (see screenshot below). Aim carefully in the arrow and then select the "Null" icon (see screenshot)

Here, this will mean that the image is about to become transparent

5

Before erasing the selected sky area so and make it transparent you also have to click on this menu command:

menu choose Layers->Promote to Layer.

6

Now press the DEL key on your keyboard. If you did it correctly the sky will be erased and will leave a squared pattern area to indicate that this part is transparent.

7

Now let's export the picture.

You can export in any of the two formats supporting transparency: GIF or PNG. We recommend PNG because it will produce lighter, faster images.

To export use the menu: File->Export->PNG Optimizer...

Click on the first 3 tabs on the export dialog window and copy the settings you see below. Once done, the program will remember the settings and for all further images you will simply have to click OK.

Now click OK to save the image in your game's images folder.

Modify your game

Now you have to modify your game. Clearly when saving the modified images we just change format and extension, so that the editing on the game source is minimal.

For example we edit from this...

ROOM rockpath
	NAME	the path
	IMAGE	S	uw2/rockpath.jpg

to this:

ROOM rockpath
	NAME	the path
	IMAGE	S	uw2/rockpath.png

Set the sky color

Now we just have to make that at every moment DimensioneX knows what colour to paint the sky.

The color is a code that you set in the global variable called

bgcolor

or also

$WORLD.bgcolor

(the above notations are equivalent)

The color code is an HTML code. If you are a web developer you already know what we mean, if not you just search by using Google and the keywords "HTML color codes". Here we just tell you that it is as simple as this:

bgcolor = "blue"

Or an hexadecimal code, such as:

bgcolor = "#9DB9E9"

Please note that these hex codes are provided by Paint Shop Pro, just click on the color palette to get this window. Do you see the "HTML Code" with the # sign?

10

As a conclusion, here is a useful routine that in the Underworld Online game is called at each onTick event and also at the game start (onStart event. This one will change the color of the sky depending on the time of day in the game.

The basic idea about the getTimeOfDay function is that one hour in the real world corresponds to a whole day in the game, so the calculation is made by using some simple proportion. Obviously you can use real hours and minutes and get rid of the getTimeOfDay or even modify it so that the virtual days in your game have a different (real) length.

Sub printTimeOfDay
	Dim tod = getTimeOfDay()
	Dim todicon = "sun.gif"
	Dim hr = Int(Left(tod,2))
	If hr < 6 Or hr > 20
		todicon = "moon.gif"
	End_If
	Dim ico = "<IMG SRC=" + Chr(34) + NewImage(todicon,32,32).url + Chr(34) + " WIDTH=16 HEIGHT=16 ALIGN=ABSMIDDLE>" 
	Print ico + " in the kingdom it's now " + tod + ""
End_Sub

Sub nightDayCycle
	Dim hr = Int(Left(getTimeOfDay(),2))
	Dim nowday = (hr >= 6 And hr <= 21)
	If nowday <> itsday ' sunset/dawn
		If nowday
			Speak SYS,$WORLD,"It's a new day in the kingdom...","The sun rose in the sky!","Vampires must retire!"
			$WORLD.bgcolor = "#9DB9E9"
		Else
			Speak SYS,$WORLD,"Another day ends...the night begins!","The sun has set!","Pay attention to vampires!"
			$WORLD.bgcolor = "#000055"
		End_If
		PlaySound $WORLD,"churchbell.wav"
		itsday = nowday
	End_If
End_Sub

This tutorial is over.

If in doubt, post on the FORUM!

• back to DimensioneX WIKI main