-
Notifications
You must be signed in to change notification settings - Fork 2k
/
Copy pathBitmapText.html
executable file
·126 lines (114 loc) · 3.46 KB
/
BitmapText.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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EaselJS Example: Bitmap Text</title>
<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
<script src="../_assets/js/examples.js"></script>
<script src="../lib/easeljs-NEXT.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script id="editable">
var stage, text;
function init() {
stage = new createjs.Stage("testCanvas");
var img = new Image();
img.onload = function () {
var ss = new createjs.SpriteSheet(data);
var text = new createjs.BitmapText("Hello World,\nWhat is Happening?", ss);
// Center the text
var bounds = text.getBounds();
text.x = stage.canvas.width - bounds.width >> 1;
text.y = stage.canvas.height - bounds.height >> 1;
stage.addChild(text);
stage.update();
};
img.src = "../_assets/art/spritesheet_font.png";
// Embedded SpriteSheet data.
var data = {
"animations": {
"V": {"frames": [21]},
"A": {"frames": [0]},
",": {"frames": [26]},
"W": {"frames": [22]},
"B": {"frames": [1]},
"X": {"frames": [23]},
"C": {"frames": [2]},
".": {"frames": [29]},
"Y": {"frames": [24]},
"D": {"frames": [3]},
"Z": {"frames": [25]},
"E": {"frames": [4]},
"F": {"frames": [5]},
"G": {"frames": [6]},
"H": {"frames": [7]},
"I": {"frames": [8]},
"J": {"frames": [9]},
"K": {"frames": [10]},
"!": {"frames": [27]},
"L": {"frames": [11]},
"M": {"frames": [12]},
"N": {"frames": [13]},
"O": {"frames": [14]},
"P": {"frames": [15]},
"Q": {"frames": [16]},
"R": {"frames": [17]},
"S": {"frames": [18]},
"T": {"frames": [19]},
"?": {"frames": [28]},
"U": {"frames": [20]}
},
"images": ["../_assets/art/spritesheet_font.png"],
"frames": [
[155, 2, 25, 41, 0, -10, -3],
[72, 2, 28, 43, 0, -8, -1],
[599, 2, 28, 38, 0, -8, -4],
[41, 2, 27, 44, 0, -8, -1],
[728, 2, 32, 38, 0, -6, -4],
[184, 2, 35, 41, 0, -4, -2],
[409, 2, 30, 39, 0, -7, -3],
[443, 2, 29, 39, 0, -7, -3],
[901, 2, 13, 35, 0, -8, -5],
[698, 2, 26, 38, 0, -9, -4],
[666, 2, 28, 38, 0, -8, -4],
[764, 2, 23, 38, 0, -10, -4],
[828, 2, 37, 36, 0, -3, -5],
[567, 2, 28, 38, 0, -8, -4],
[519, 2, 44, 38, 0, 1, -4],
[869, 2, 28, 36, 0, -8, -5],
[476, 2, 39, 38, 0, -2, -4],
[371, 2, 34, 39, 0, -5, -3],
[631, 2, 31, 38, 0, -6, -4],
[289, 2, 39, 40, 0, -2, -3],
[918, 2, 31, 32, 0, -6, -7],
[791, 2, 33, 37, 0, -5, -4],
[2, 2, 35, 46, 0, -4, 1],
[253, 2, 32, 40, 0, -6, -3],
[104, 2, 32, 43, 0, -6, -1],
[332, 2, 35, 39, 0, -5, -4],
[953, 2, 9, 16, 0, -17, -29],
[140, 2, 11, 41, 0, -16, -1],
[223, 2, 26, 41, 0, -7, -1],
[966, 2, 9, 10, 0, -17, -31]
]
};
}
</script>
</head>
<body onload="init()">
<header class="EaselJS">
<h1>BitmapText</h1>
<p>
The <code>BitmapText</code> class uses a <code>SpriteSheet</code> to
display text characters. Characters are defined in
the SpriteSheet definition, and any defined characters can be displayed,
as well as spaces and line breaks.
BitmapText will check for uppercase or lowercase variations, but
accented characters must be specifically
defined in order to be displayed.
</p>
</header>
<div><canvas id="testCanvas" width="960" height="400"></canvas></div>
</body>
</html>