Game Development Reference
In-Depth Information
nextX = circle.radius;
direction *= -1;
}
circle.nextX = nextX;
}
function renderCircle() {
circle.x = circle.nextX;
}
function tick(e) {
updateCircle();
renderCircle();
stage.update();
}
Here you have a ball that bounces back and forth between the walls of the stage. In the update function, you first
check what the location of the ball will be if you were to change its x position by factoring in the current speed and
direction. You set this value to a temporary variable. If this value is beyond the bounds of either side of the stage, you
set that value so that it would set the ball directly against the wall in its path; in other words, it won't let it extend past
your boundaries. You then assign your ball a variable that stores what its new location should be the next time it's
rendered. The render function is then called, where you then assign the new x position to the ball.
Drawing UI Elements
Another great way you can use the power of the drawing API is for drawing UI elements in your games and applications.
This can be useful when creating screens, modals, buttons, and a lot more.
A common use for drawing graphics on the fly is for building a preloader bar. You'll need to show some sort of
indication that your game is loading as it takes more and more time for your assets to load. PreloadJS provides events
that you can use to indicate progress in your load process so drawing a preloader to accompany that process is ideal.
Let's wrap up this chapter by building a quick prototype of how this might be accomplished. You'll be building
a self-contained, encapsulated preloader object in Chapter 8, but before you learn some of those advanced coding
techniques, you can manually call an update function on the preloader. This will allow you to see how this UI
component is drawn and how it works.
Preloader Prototype
Preloader Prototype will be built to demonstrate how you can use code-written graphics to create UI elements, and
how you can use animation for updating them. This preloader will consist of an outline graphic with a fill, which will
animate to simulate a load progress.
Draw a preloader bar with an outline and fill shape to represent load progress.
Manually update the bar with a statically incremented value.
Remove preloader when load has reached 100%.
Start by creating an HTML file that includes the necessary CreateJS libraries, and a canvas element. You'll be
writing your JavaScript right in the document so you don't need to include any custom scripts. Listing 2-6 shows the
HTML file so far.
 
Search WWH ::




Custom Search