HTML and CSS Reference
In-Depth Information
Listing 16-4: The animation bootstrap html
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
<script src='js/jquery.min.js'></script>
<script src='js/underscore.js'></script>
<script src='js/quintus.js'></script>
<script src='js/quintus_input.js'></script>
<script src='js/quintus_sprites.js'></script>
<script src='js/quintus_scenes.js'></script>
<script src='js/quintus_anim.js'></script>
<script src='animation.js'></script>
* { padding:0px; margin:0px; }
This is just the basic Quintus bootstrap code with the new quintus_anim.js module added in. To start
keeping the jQuery and underscore dependencies along with the slowly building Quintus code separated from
per-example code, the engine code has been relegated to a separate js/ directory.
Next, create the animation.js file mentioned earlier and put the code from Listing 16-5 into it. This code
defines a slimmed-down version of the user-controlled player character from the beginning of the chapter that
walks around and can trigger a fire animation. To run the code, you need the images from the chapter code and
the sprites.json files in the images/ and data/ subfolders respectively. You also need to launch the
example from localhost because of the AJAX-loaded sprites.json file.
Listing 16-5: A basic walking demo
$(function() {
var Q = window.Q = Quintus()
.setup('quintus', { maximize: true })
Q.Player = Q.Sprite.extend({
init:function(props) {
sheet: 'man',
sprite: 'player',
rate: 1/15,
speed: 700
Search WWH ::

Custom Search