test game

[nussmichel]

hi guy´s, hi malkom

i´m a absolut beginner and try to create a test game.
it´s like a already available door game and i like to figure out how to code it and how i have to use the canvas and sprites a.s.o.

my test game is finish, but primitive in way of coding of course:



you see a canvas and 3 red buttons.

now by clicking the 1st button, the button leads to card 2:



you see an other canvas with the same image backround and the 1st button now has a green backround (right button pushed).
now by clicking the 3rd button, the button leads to card 3. by clicking the 2nd button, you will be lead back to the home card again (wrong button pushed, all buttons are red again)

by clicking the buttons in the right directions, you will reach finally card 4:



now the canvas has an other backround image with an open door and a "back" button appears which leads you to the home card again. all buttons on card 4 have a green backround image to show the buttons were clicked in the right directions.
actually i´d like to insert a door opening animation, but i have no idea how to create and insert one.



you see, the logic is simple but the way of "coding" is primitive.
maybe you could make an example of using the HAC elements like canvas, animations, sprites a.s.o. for this game?

[nussmichel]

no ideas? or maybe off topic?

[Malkom]

no ideas? or maybe off topic?

i'm just adding a reply as you typed

[Malkom]

Hi nussmuchel

Your game idea and graphics really brightens up the forums - nice to see some pictures.

Yes you can do these with canvases and the sprite engine.


*** Colored Buttons ***
For the colored buttons your canvas idea is probably the best approach.

To set the color of a canvas use the CanvasClear command where the red,green blue values are between 0 and 255:-

syntax:- CanvasClear(canvasnumber,red,green,blue)

Code: [Select]

@ set canvas 2 to red
CanvasClear(2,255,0,0)

Next the canvas needs to respond when touched so add the code below to its event script. To edit its event script just select the canvas and then the Script button on the Properties toolbar:-

Code: [Select]

@ assumes canvas 3
Local evnum

Put CanvasEventFN(3) into evnum

If evnum=1 Then
    @ do something as canvas touched example:-
    GotoCard 2
EndIf----------------



**** Door Animation ****
For your door animation you could either use a canvas or the sprite engine with both methods using the image banks.
The image banks are preloaded with images before the door animation runs. Of course for canvas animation, you could just load the images from disk(sdcard) but it might not give smooth animnation although it would save memory as image banks hold their images in memory which is why they are faster.
Note, usually its best to have the image banks preloaded as the game is starting up but before the Home card loads.


(1) Canvas Door Animation
For a canvas door animation just preload the images, then on the card holding the the animation, add a timer to cycle through the images.

To preload the images make a global procedure called LoadImages and call it from the Startup section of MainCode. LoadImages has the code below.

Code: [Select]

@ ---- Load Image Banks ----
Global maxImages
Local fname

Put 5 into maxImages

ImageBankReserve(5)

Put 'Local:door1.png' into fname
ImageBankLoad(1,fname,1)

Put 'Local:door2.png' into fname
ImageBankLoad(2,fname,1)

Put 'Local:door3.png' into fname
ImageBankLoad(3,fname,1)

Put 'Local:door4.png' into fname
ImageBankLoad(4,fname,1)

Put 'Local:door5.png' into fname
ImageBankLoad(5,fname,1)
For the card with the animation, add a timer with the following code.

Code: [Select]

@ ---- Timer code ----
Global maxImages,imageCount

if (imageCount=maxImages) then
     TimerOff(1)
endif

@ copy to canavas 2 and scale to fit
ImageBankToCanvas(imageCount,2,1)

Increment imageCount

Code: [Select]

@ ---- Timer set up ----
Global imageCount

Put 1 into imageCount

@ temier 1, mode = repeat, period = 100mS
TimerSet(1,2,100)





(2) Sprite engine animation

There is a demo project called FireSprite that basically just simulates a fire

It loads it images as below:-

Code: [Select]

Global xCoord,yCoord

Local result,n,x,y,w,h,mess,fname,priority
Local imagebase,fishimage,direct,res

ImageBankReserve(5)

@Put ImageBankSetSizeFN(1,300,340) into res
Put 'Local:back.png' into fname
ImageBankLoad(1,fname,0)
AnimationBackDrop(1)

@Put ImageBankSetSizeFN(2,50,50) into res
Put 'Local:fire_p1.png' into fname
ImageBankLoad(2,fname,0)

@Put ImageBankSetSizeFN(3,50,50) into res
Put 'Local:fire_p2.png' into fname
ImageBankLoad(3,fname,0)

@Put ImageBankSetSizeFN(4,50,50) into res
Put 'Local:fire_p3.png' into fname
ImageBankLoad(4,fname,1)

@Put ImageBankSetSizeFN(5,50,50) into res
Put 'Local:fire_p4.png' into fname
ImageBankLoad(5,fname,1)


Put ImageBankWidthFN(2) into w
Put ImageBankHeightFN(2) into h
Put SpriteCreateFN(1,xCoord,yCoord,w,h,1,1,1) into result   


The animation is set up as:-

Code: [Select]

AnimationClear
AnimationSetCoords(10,20)
AnimationSetSize(300,340)

AnimationShow
AnimationEnable
AnimationSetPeriod(25)

The card script has this code:-

Code: [Select]

Call AnimSetup

Call LoadImages


To start the animation, this code goes in a button:-

Code: [Select]

Global imageNum

Put 2 into imageNum

AnimationRun


To stop animation, this code goes in a button:-

Code: [Select]

AnimationStop

Its probably much better to play around with the FireSprite project(its installed with HAC)
http://www.hypernextandroid.com/hnfiles/rescreator.html

I haven't run all this code, except for that in the FireSprite proect, but hope it helps

Malkom

[nussmichel]

wow thank you, this is exact what i´m looking for 

now i´ll testing around and show you my results.

regs
nussmichel

[nussmichel]

mhhh.... it seems i do something wrong

here my steps.

i´ve created the animation images:







doors1 - 5.png

i´ve saved these images into my "local" folder (preventively also into windows->image liary) :



then i´ve created a LoadImages procedure and paste your code:



i called the LoadImage procedure with "Call LoadImages" in Sartup.

next i´ve added a timer element to the final card and paste your time code as well:




now, at reaching the final card by pressing the buttons in the right direction, there is no animation to see, what did i wrong?

[Malkom]

Thats looking really good and the code looks fine.

Only thing that I cannot see mentioned is the code to start the timer - is it in a button or in the card?

the code to start the timer running is:-

Code: [Select]

@ ---- Timer set up ----
Global imageCount

Put 1 into imageCount

@ timer 1, mode = repeat, period = 2000mS
TimerSet(1,2,200)
Notice i've changed the timer period to 2 seconds.

[nussmichel]

it´s in the card:

down in the corner of the windows, then i´ve clicked the timer and clicked on skript and there i´ve paste your code

[Malkom]

I'm sorry for my poor explanation.

The timer needs two bits of code:-

1) code inside  the timer on the card - this runs when the timer fires - it is the code you originally had inside the timer - it draws the image to the canvas

2) code to start the timer - because by default the timer is off.
    This code is called from a button or from the card script

Note, if you call this from the card sscript - so that the animation starts as soon as the card is fully loaded - then with short periods the initial part of the door opening might be missed.

In this case the two scripts become:-

Code: [Select]

@ ---- Timer code ----
Global maxImages,imageCount

if (imageCount=0) then
     @ timer 1, mode = repeat, period = 100mS
    TimerSet(1,2,100)
else
   if (imageCount=maxImages) then
        TimerOff(1)
   endif
 
   @ copy to canavas 2 and scale to fit
   ImageBankToCanvas(imageCount,2,1)
endif

Increment imageCount

Code: [Select]

@ ---- Timer set up - goes inside the card or a button etc ----
Global imageCount

Put 0 into imageCount

@ timer 1, mode = repeat, period = 3000mS
TimerSet(1,2,3000)

[nussmichel]

I'm sorry for my poor explanation.

no problem, i´m glad you helping me 


ok, i´ve past your code but nothing happends either
notice the canvas on card 4 is canvas 1, but i´ve tried both, 1 and 2 nothing happends anyway

[nussmichel]

sorry, now i know what you mean with button.
you´ve been thinking i like to use a canvas as a button to start the animation don´t you?

no, i´d like to start the animation automaticly when card 4 is reached, this is why you type "canvas 2" right?

[Malkom]

It looks as if you have merged both sets of code into the timer when only the first piece of code should be in the timer

The following piece of code goes inside the script of card 4 - to place it there - select the card and the Script button from the properties toolbar - or if you are in the editor it is the top enty on the left hand side - Card 4 Level 4

Code: [Select]

@ ---- Timer set up - goes inside the card or a button etc ----
Global imageCount

Put 0 into imageCount

@ timer 1, mode = repeat, period = 3000mS
TimerSet(1,2,3000)

So, when card 4 loads, it sets the timer to start after 3 seconds.
Once the timer has fired it then sets its firing period to 100mS

[Malkom]

If you only have one canvas on card 4 - the door canavas - then there is no need for canavas 2

All controls in HAC built apps are local to the card - hence its possible to have a many canavas 1's - each on separate cards

[nussmichel]

@ ---- Timer set up - goes inside the card or a button etc ----

of course 

it works

[Malkom]

Thats great, and soon you'll be improving my poor code