forked from pixijs/pixijs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
153 lines (121 loc) · 3.79 KB
/
index.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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE HTML>
<html>
<head>
<!--<link href='http://fonts.googleapis.com/css?family=Snippet|Arvo:700italic|Podkova' rel='stylesheet' type='text/css'>-->
<title>pixi.js example 10 Text</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="pixi.js"></script>
</head>
<body>
<script>
// Load them google fonts before starting...!
WebFontConfig = {
google: {
families: [ 'Snippet', 'Arvo:700italic', 'Podkova:700' ]
},
active: function() {
// do something
init();
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
function runList(item)
{
console.log(">>>>>>>>>")
console.log("_")
var safe = 0;
var tmp = item;
while(tmp._iNext)
{
safe++;
// console.log(tmp.childIndex + tmp);
tmp = tmp._iNext;
console.log(tmp);//.childIndex);
// console.log(tmp);
if(safe > 100)
{
console.log("BREAK")
break
}
}
}
function init()
{
var assetsToLoader = ["desyrel.fnt"];
// create a new loader
var loader = new PIXI.AssetLoader(assetsToLoader);
// use callback
loader.onComplete = onAssetsLoaded;
//begin load
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x66FF99);
loader.load();
function onAssetsLoaded()
{
var bitmapFontText = new PIXI.BitmapText("bitmap fonts are\n now supported!", {font: "35px Desyrel", align: "right"});
bitmapFontText.position.x = 620 - bitmapFontText.width - 20;
bitmapFontText.position.y = 20;
runList(bitmapFontText)
stage.addChild(bitmapFontText);
}
// add a shiney background..
var background = PIXI.Sprite.fromImage("textDemoBG.jpg");
stage.addChild(background);
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(620, 400);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
requestAnimFrame(animate);
// create some white text using the Snippet webfont
var textSample = new PIXI.Text("Pixi.js can has\nmultiline text!", {font: "35px Snippet", fill: "white", align: "left"});
textSample.position.x = 20;
textSample.position.y = 20;
// create a text object with a nice stroke
var spinningText = new PIXI.Text("I'm fun!", {font: "bold 60px Podkova", fill: "#cc00ff", align: "center", stroke: "#FFFFFF", strokeThickness: 6});
// setting the anchor point to 0.5 will center align the text... great for spinning!
spinningText.anchor.x = spinningText.anchor.y = 0.5;
spinningText.position.x = 620 / 2;
spinningText.position.y = 400 / 2;
// create a text object that will be updated..
var countingText = new PIXI.Text("COUNT 4EVAR: 0", {font: "bold italic 60px Arvo", fill: "#3e1707", align: "center", stroke: "#a4410e", strokeThickness: 7});
countingText.position.x = 620 / 2;
countingText.position.y = 320;
countingText.anchor.x = 0.5;
stage.addChild(textSample);
stage.addChild(spinningText);
stage.addChild(countingText);
var count = 0;
var score = 0;
function animate() {
requestAnimFrame( animate );
count++;
if(count == 50)
{
count = 0;
score++;
// update the text...
countingText.setText("COUNT 4EVAR: " + score);
}
// just for fun, lets rotate the text
spinningText.rotation += 0.03;
// render the stage
renderer.render(stage);
}
}
</script>
</body>
</html>