Let's simplify things a little. Let's create a stage (where our game will run), add three butterflies at different co-ordinates, after 1 second we move the position of the second butterfly.
First we need to define all our variables / resources to use in the game in process_globals...
Code:
'Static code module
Sub Process_Globals
Private game As BANanoCreateJS
Private BANano As BANano 'ignore
Private bf1 As BANanoObject
Private bf2 As BANanoObject
Private bf3 As BANanoObject
End Sub
We then call init to create our canvas and the stage so that we can start adding our game resources as soon as the game is started and ready.
Code:
Sub Init
game.Initialize(Me, "body", "canvas", 1000, 800, "", CreateMap("border": "black solid 1px"))
'add resources to the manifest for the game
game.AddManifest("butterfly", "./assets/butterfly.png")
'start the game at 60 frames per second
game.Start(60)
End Sub
We have a butterfly picture that we will use on the stage, so lets add it to the 'manifest' so that its ready whenever we need it. We then start the game at 60 frames per second. This will fire the game_ready event.
On game_ready (the stage is set), lets add the characters, i.e. butterflies.
Code:
Sub game_ready
'the game is ready, lets create the objects to play with
Log("game_ready")
'get resource from manifest
Dim img As BANanoObject = game.getManifest("butterfly")
'add 3 images to the canvas
bf1 = game.NewBmp(img)
bf2 = game.NewBmp(img)
bf3 = game.NewBmp(img)
'set the locations
game.SetX(bf2, 200)
game.SetX(bf3, 400)
'add the images to the stage
game.AddChildren(Array(bf1,bf2,bf3))
'update the game to ensure our objects are showing
game.Update
'after 1 second, move the butterfly
BANano.Window.SetTimeout(BANano.CallBack(Me, "movebutterfly", Null), 1000)
End Sub
We get the butterfly image from the 'manifest' / 'memory' and use that to create 3 butterflies for the stage using createjs methods. We also set the X positions of the butterflies, being 200, and 400 for the 2nd and 3rd butterfly.
We then use the AddChild method to add each of the elements to the stage and then 'refresh' the stage by calling game.update.
This will just create images on the canvas without any type of action. So we want the second butterfly to move after 1 second, so we fire the SetTimeOut method to call the 'movebutterfly' method.
Code:
Sub moveButterFly
'get the last position of butterfly Y pos
Dim bf2Y As Long = game.GetY(bf2)
'increment it by 200
bf2Y = bf2Y + 200
'set the new position
game.SetY(bf2,bf2Y)
'update the game
game.update
End Sub
The movebutterfly method reads the last position of butterfly 2 and moves it down the stage. Each time we have a change to the object we need to update the stage after setting all properties.
Lol. For a while there I started to think about the Romeo and Juliet play I watched. This is starting to make sense when I look at it from an acting perspective. There is a stage, there are actors, they follow a script, move, cry, collide etc.
We will add more functionality to this as we go along. Enjoy!
