HTML and CSS Reference
In-Depth Information
Listing 16-4:
The animation bootstrap html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
<title>Animation</title>
<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>
<style>
* { padding:0px; margin:0px; }
</style>
</head>
<body>
</body>
</html>
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()
.include('Input,Sprites,Scenes,Anim')
.setup('quintus', { maximize: true })
.controls()
Q.Player = Q.Sprite.extend({
init:function(props) {
this._super(_(props).extend({
sheet: 'man',
sprite: 'player',
rate: 1/15,
speed: 700
}));
