This repository has been archived by the owner on Feb 3, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
animationintroscene3.html
95 lines (74 loc) · 3.07 KB
/
animationintroscene3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!--Example code for a sprite animation-->
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!-- Import easel js -->
<script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
</head>
<body onload="init();">
<!-- canvas element: necessary for easel js -->
<canvas id="demoCanvas" width="1355" height="633"></canvas>
<!--javascript -->
<script>
//create variables you need
var stage, instance2;
function init() {
//initialize stage variable to your html canvas element
stage = new createjs.Stage("demoCanvas");
//data object that holds animation info-spritesheet and how to break it up
var data = {
images: ["fairyintroscene3.png"],
//this says each individual sprite is 180 wide and 247.5 tall (view image size in photoshop and do the math to get these numbers)
frames: {width:50, height:55, count:2},
//define animations here by giving frame indexes (remember to start at zero)
animations: {
stop:0,
fly:[0,2]
}
};
var data2 = {
images: ["girlsheetlvl1.png"],
//this says each individual sprite is 180 wide and 247.5 tall (view image size in photoshop and do the math to get these numbers)
frames: {width:72, height:128, count:3},
//define animations here by giving frame indexes (remember to start at zero)
animations: {
stand:0,
run:[0,2]
}
};
//these two lines pair together and are both necessary:
//create sprite sheet from the data
var ss = new createjs.SpriteSheet(data);
var ss2 = new createjs.SpriteSheet(data2);
//create animation from the sprite sheet
var instance = new createjs.Sprite(ss);
instance2 = new createjs.Sprite(ss2);
//give your animation starting coordinates: (0,0) is top left
instance.x = 300;
instance.y = 280;
//instance2.x = 0;
instance2.y = 450;
//need to add instance to stage (everything needs to be added to the stage)
stage.addChild(instance);
//stage.addChild(instance2);
//this starts the animation and repeats forever
//gotoAndStop would cause it to run once
//can also specify a animation to follow, look at docs
instance.gotoAndPlay("run");
instance2.gotoAndPlay("run");
//these two lines continully update the stage
createjs.Ticker.setFPS(6);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
<style type="text/css">
body{
background-image: url("introscene3.jpg");
background-size: cover;
}
</style>
</body>
</html>