Now that youve seen how to add the background. Its mostly a matter of repetition to include the others (with a bit more math thrown in.) Head back to default.js and include the following in prepareGame():
A few notes on this:
The catapults appear at "ground level" which we need to scale along with the overall size of the images
Drawing player 2s catapult is tricky because we need it to face the other direction. Using regX to set a transform point and setting a negative scale gets the job done.
We create and add the ammo (boulder) image, but hide it until its fired later.
Adding Some Text
To wrap things up for this post, lets use EaselJSs Text class to add a game title along with indicators for each players remaining catapults. First, well need a few variables near the top of default.js:
Then, add the following to prepareGame();
To the Stage, Text instances are children just like the Bitmaps we added earlier.
What does the game look like now?
Things are looking pretty good, but unfortunately thats about it nothings moving. In the next post, well dive in to the games mechanics, fleshing out the game loop by adding motion, collision detection, scorekeeping, and the endgame.