DimensioneX/Day-Night Cycles: Difference between revisions

From DimensioneX
Jump to navigation Jump to search
 
(13 intermediate revisions by the same user not shown)
Line 9: Line 9:
This article explains how to do it.
This article explains how to do it.


= Come funziona =
= How it works =


Molto semplicemente, DimensioneX supporta l'uso di immagini trasparenti. Se in una immagine in cui compare un pezzo di cielo noi rendiamo il cielo trasparente, sarà sufficiente dire a DimensioneX di che colore è il cielo.
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.


Il game engine produce quindi un rettangolo del colore del cielo che posizione dietro alla immagine, e se questa è appunto trasparente il gioco è fatto.
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.


= Preparare l'immagine =
= Prepare the picture =


Supponiamo che l'immagine da trattare sia questa
Let's suppose that the picture to be treated is this one:


[[Image:Uw2_castleside.jpg]]
[[Image:Uw2_castleside.jpg]]


effettivamente notate il pezzo di cielo. Quello ora dobbiamo renderlo trasparente.
please note the piece of blue sky. That piece needs now to be made trransparent.


La procedura qui descritta è valida per Paint Shop Pro 7, ma su altri programmi si fa in modo simile.
The procedure we describe here is valid for Paint Shop Pro 7, but on other programs it will be quite similar.


== 1 ==  
== 1 ==  


Apri l'immagine con Paint Shop Pro, seleziono lo strumento bacchetta magica
Open the picture with Paint Shop Pro, select the Magic Wand tool


[[Image:Tut_cicli1.jpg]]
[[Image:Tut_cicli1.jpg]]
Line 33: Line 33:
== 2 ==  
== 2 ==  


Adesso devi trovare la finestrella "'''Tool options'''" che regola il funzionamento dello strumento. Può darsi che non sia attiva e in tal caso falla apparire cliccando il bottoncino apposito come in figura.
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:


[[Image:Tut_cicli2.jpg]]  
[[Image:Tut_cicli2.jpg]]  


Lasciare il valore '''Feather''' a zero.
Now just leave '''Feather''' to zero.


Devi impostare la '''Tolerance'''. Questo numero stabilisce di quante gradazioni il colore azzurro del cielo può variare. Qui il valore giusto di '''Tolerance''' può essere diverso da immagine a immagine. Il consiglio è di inziare da 30 e poi variare in più o in meno fino a che la selezione è corretta.
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 ==
== 3 ==


Ora devi selezionare il cielo.
Now you have to select the sky.




Per fare la selezione punta la bacchetta nell'azzurro del cielo e clicca. Se l'area selezionata è più grande del necessario, cala il valore. Se seleziona solo parte del cielo, aumenta il valore.
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.


Eventualmente puoi aggiungere a una selezione un'altra selezione tenendo premuto il tasto MAIUSCOLE mentre selezioni con la bachetta magica. La selezione si può invece ridurre tenendo premuto il tasto CTRL mentre si seleziona.
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 figura ecco una selezione corretta:
In the screenshot, we have managed to select the sky area correctly:


[[Image:Tut_cicli3.jpg]]
[[Image:Tut_cicli3.jpg]]
Line 56: Line 56:
== 4 ==
== 4 ==


Adesso verifica di avere impostato lo sfondo a "nessuno sfondo". Questo si fa cliccando nel riquadro del colore di sfondo (vedi figura sotto) mirando bene nella freccina e poi selezionando l'icona "nessuno sfondo" (vedi sempre in figura)
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)


[[Image:Tut_cicli4.jpg]]  
[[Image:Tut_cicli4.jpg]]  


Ecco , questo significa che lo sfondo verrà trasparente.
Here, this will mean that the image is about to become transparent


[[Image:Tut_cicli5.jpg]]  
[[Image:Tut_cicli5.jpg]]


== 5 ==
== 5 ==


Prima di cancellare il cielo rendendolo così trasparente (ci siamo quasi) devi fare questa operazione.
Before erasing the selected sky area so and make it transparent you also have to click on this menu command:


da menu scegli '''Layers->Promote to Layer'''.  
menu choose '''Layers->Promote to Layer'''.


== 6 ==
== 6 ==


Ora premi il tasto CANC sulla tastiera. Se hai fatto tutto correttamente il cielo sparirà lasciando al suo posto un'area a quadretti che significa che in quel punto l'immagine è trasparente.
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.


[[Image:Tut_cicli6.jpg]]  
[[Image:Tut_cicli6.jpg]]


== 7 ==
== 7 ==


Ora esportiamo l'immagine.  
Now let's export the picture.  


Puoi esportare nei due formati che supportano la trasparenza ovvero GIF o PNG. Consiglio PNG che produce immagini meno pesanti.
You can export in any of the two formats supporting transparency: GIF or PNG. We recommend PNG because it will produce lighter, faster images.


Per esportare usa il menu: '''File->Export->PNG Optimizer...'''
To export use the menu: '''File->Export->PNG Optimizer...'''


Clicca sulle prime 3 linguette della finestra copiando le impostazioni che vedi qui sotto, una volta impostati correttamente tutti i parametri il programma li ricorderà e diventa immediato per tutte le immagini successive, poi dovrai semplicemente cliccare OK.
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.


[[Image:Tut_cicli7.jpg]]  
[[Image:Tut_cicli7.jpg]]  
Line 90: Line 90:
[[Image:Tut_cicli9.jpg]]  
[[Image:Tut_cicli9.jpg]]  


Infine clicca OK e salva l'immagine nella cartella delle immagini del tuo gioco.
Now click OK to save the image in your game's images folder.


== 8 ==
= Modify your game =


Ora devi modificare il gioco. Ovviamente si cerca di cambiare solo il formato, quindi solo l'estensione dell'immagine, in modo che fare le modifiche sia rapido.
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.


Ad esempio da così...
For example we edit from this...


  ROOM rockpath
  ROOM rockpath
  NAME il sentiero
  NAME the path
  IMAGE S uw2/'''rockpath.jpg'''
  IMAGE S uw2/'''rockpath.jpg'''


a così:
to this:


  ROOM rockpath
  ROOM rockpath
  NAME il sentiero
  NAME the path
  IMAGE S uw2/'''rockpath.png'''
  IMAGE S uw2/'''rockpath.png'''


== 9 ==
== Set the sky color ==


Ora dobbiamo semplicemente fare in modo che ad ogni istante DimensioneX "sappia" di che colore deve dipingere il cielo.
Now we just have to make that at every moment DimensioneX knows what colour to paint the sky.


Il colore è un codice che va impostato nella variabile globale chiamata
The color is a code that you set in the global variable called


  '''bgcolor'''
  '''bgcolor'''


o anche
or also


  '''$WORLD.bgcolor'''
  '''$WORLD.bgcolor'''


(le due scritture sono equivalenti.
(the above notations are equivalent)


Il codice del colore è un codice HTML. Chi ha un pò di esperienza nel campo sa già di cosa sto parlando, se non sai di che si tratta vai a vedere su Google cercando "codici colori HTML" come parole chiave. Qui basti dire che può essere una cosa semplice del tipo:
 
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"
  bgcolor = "blue"


Oppure un codice esadecimale tipo:
Or an hexadecimal code, such as:


  bgcolor = "#9DB9E9"
  bgcolor = "#9DB9E9"


Nota che questi codici te li dà il buon vecchio Paint Shop Pro, basta cliccare sulla palette del colore per ottenere questa finestrella. Noti il valore "HTML Code" in fondo con il # davanti?
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?


[[Image:Tut_cicli10.jpg]]  
[[Image:Tut_cicli10.jpg]]


== 10 ==
== 10 ==


Per concludere, ecco una utile routine che nel gioco Underworld viene chiamata ad ogni evento '''onTick''' e ovviamente anche all'avvio del gioco (evento '''onStart'''). Questa cambia il colore del cielo a seconda dell'ora.  
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.  


L'idea che sta alla base della funzione '''getTimeOfDay''' è che un'ora nel mondo reale corriponda un giorno nel gioco, quindi viene fatto un calcolo in proporzione ai minuti nella funzione stessa. Ovviamente puoi usare ore e minuti reali e fare a meno della '''getTimeOfDay''' oppure anche modificarla in modo che le giornate "virtuali" nel tuo gioco abbiano una durata diversa.
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.


  Function getTimeOfDay()
  Sub printTimeOfDay
  Dim realsecs = 60*getTime("mm")+getTime("ss")
  Dim tod = getTimeOfDay()
  Dim uwsecs = 24*realsecs
  Dim todicon = "sun.gif"
  Dim uwhrs = Int(uwsecs/3600)
  Dim hr = Int(Left(tod,2))
uwsecs = uwsecs - uwhrs*3600
  If hr < 6 Or hr > 20
Dim uwmins = Int(uwsecs/60)
  todicon = "moon.gif"
  If uwhrs < 10
  uwhrs = "" + "0" + uwhrs
  End_If
  End_If
  If uwmins < 10
  Dim ico = "<IMG SRC=" + Chr(34) + NewImage(todicon,32,32).url + Chr(34) + " WIDTH=16 HEIGHT=16 ALIGN=ABSMIDDLE>"  
uwmins = "" + "0" + uwmins
  Print ico + " in the kingdom it's now <B>" + tod + "</B>"
End_If
  End_Sub
  'uwsecs = uwsecs - uwmins*60
Return "" + uwhrs + ":" + uwmins
  End_Function
   
   
  Sub nightDayCycle
  Sub nightDayCycle
Line 161: Line 157:
  If nowday <> itsday ' sunset/dawn
  If nowday <> itsday ' sunset/dawn
  If nowday
  If nowday
  Speak SYS,$WORLD,"E' un nuovo giorno nel regno...","Il sole si è alzato!","Vampiri in ritirata!"
  Speak SYS,$WORLD,"It's a new day in the kingdom...","The sun rose in the sky!","Vampires must retire!"
  $WORLD.bgcolor = "#9DB9E9"
  $WORLD.bgcolor = "#9DB9E9"
  Else
  Else
  Speak SYS,$WORLD,"Un giorno finisce...inizia la notte!","Il sole è tramontato!","Attenzione ai vampiri!"
  Speak SYS,$WORLD,"Another day ends...the night begins!","The sun has set!","Pay attention to vampires!"
  $WORLD.bgcolor = "#000055"
  $WORLD.bgcolor = "#000055"
  End_If
  End_If
Line 173: Line 169:




Il tutorial è finito.
This tutorial is over.


Se hai dubbi, posta sul FORUM!
If in doubt, post on the FORUM!






Torna a [[Image:italy.gif]] [[DimensioneX/it|DimensioneX WIKI Italy]]
* back to [[Main Page|DimensioneX WIKI main]]

Latest revision as of 08:09, 25 June 2006

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:

Uw2 castleside.jpg

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

Tut cicli1.jpg

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:

Tut cicli2.jpg

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:

Tut cicli3.jpg

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)

Tut cicli4.jpg

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

Tut cicli5.jpg

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.

Tut cicli6.jpg

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.

Tut cicli7.jpg Tut cicli8.jpg Tut cicli9.jpg

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?

Tut cicli10.jpg

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!