Game Development Reference
In-Depth Information
<script src="js/classes/sprites/Enemy.js"></script>
<script src="js/classes/sprites/EnemyHealthBar.js"></script>
<script src="js/classes/sprites/MagicShop.js"></script>
<!--APPLICATION-->
<script src="js/device.js"></script>
<script src="js/Villager.js"></script>
</head>
<body onload="init();">
<div id="gameWrapper">
<canvas id="canvas" width="640" height="1136"></canvas>
</div>
</body>
<script>
var stage;
var canvas;
var spritesheet;
var fontsheet;
var screen_width;
var screen_height;
function init() {
window.game = window.game || {};
data.PlayerData.getData();
game.main = new game.Villager();
}
</script>
</html>
As you can see, there are quite a few JavaScript files in this application, and the
init
function is utilizing a few
objects that are declared in these scripts. I will be covering each of these files in depth, but first, take a look at the
sprite sheet images to get an idea of the sprites that will be used in the game.
Reviewing the Sprite Sheet Images
The sprite sheet files for this chapter are available with the topic's source code download. Most animations will be
done via TweenJS, with the exception of the block dissolve effect on enemies, which was done in Adobe After Effects
and exported as
png
files for Texture Packer. Another sprite sheet will also be used for the bitmap font that is used
heavily in the game. Figure
14-2
and Figure
14-3
shows the sprite sheets that will be used for The Villager RPG.
