Skip to content

Commit 83c3caa

Browse files
drawcalldrawcall
committed
feat: add pixi v7 demo
1 parent 414b7a4 commit 83c3caa

3 files changed

Lines changed: 25022 additions & 0 deletions

File tree

‎example/game/pixijs/index.html‎

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
4+
<head>
5+
<title>pixi.js game</title>
6+
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7+
<meta charset="utf-8">
8+
<style type="text/css">
9+
body {
10+
background-color: #333333;
11+
margin: 0px;
12+
overflow: hidden;
13+
}
14+
15+
.shadow {
16+
box-shadow: 0 0 25px #000;
17+
}
18+
19+
#container {
20+
width: 1003px;
21+
height: 580px;
22+
margin-top: 50px;
23+
margin-left: -501px;
24+
left: 50%;
25+
position: absolute;
26+
}
27+
</style>
28+
</head>
29+
30+
<body>
31+
<div id="container" class="shadow">
32+
</div>
33+
<script src="../../lib/stats.min.js"></script>
34+
<script src="../../lib/pixi.js"></script>
35+
<script src="../../lib/pixi-spine-4.1.js"></script>
36+
<script src="../../lib/TweenLite.min.js"></script>
37+
<script src="//localhost:3001/build/proton.js"></script>
38+
<script>
39+
let app;
40+
let container;
41+
let proton;
42+
let renderer;
43+
let smokeEmitter;
44+
let coinEmitter;
45+
let glodFrame;
46+
let jumpOver = false;
47+
let postition = 0,
48+
pixie,
49+
background,
50+
background2,
51+
foreground,
52+
foreground2;
53+
54+
main();
55+
56+
function main() {
57+
initPIXI();
58+
loadAssets();
59+
}
60+
61+
function initPIXI() {
62+
app = new PIXI.Application(1003, 580, { backgroundColor: 0x1099bb });
63+
container = document.getElementById('container');
64+
container.appendChild(app.view);
65+
66+
app.stop();
67+
}
68+
69+
function loadAssets() {
70+
PIXI.Assets.init({
71+
basePath: ""
72+
});
73+
PIXI.Assets.add('pixie', 'assets/Pixie.json');
74+
PIXI.Assets.add('gold', 'image/gold_anim.json')
75+
PIXI.Assets.load(['pixie', 'gold']).then(onAssetsLoaded);
76+
}
77+
78+
function onAssetsLoaded(res) {
79+
addBackground(res);
80+
addPixie(res);
81+
addGlodAnim(res);
82+
83+
addPixiEventListener();
84+
app.start();
85+
app.ticker.add(tick);
86+
87+
addProton();
88+
addRain();
89+
addSmoke();
90+
addCoin();
91+
}
92+
93+
function addPixiEventListener() {
94+
app.stage.interactive = true;
95+
app.stage.on('pointerdown', onTouchStart);
96+
}
97+
98+
function onTouchStart() {
99+
if (jumpOver) return;
100+
101+
pixie.state.setAnimation(0, 'jump', false);
102+
pixie.state.addAnimation(0, 'running', true, 0);
103+
104+
smokeEmitter.p.x = pixie.x;
105+
coinEmitter.p.x = pixie.x + 20;
106+
107+
smokeEmitter.emit('once');
108+
coinEmitter.emit(.5);
109+
110+
TweenLite.to(pixie, .5, {
111+
y: 490,
112+
onComplete: function () {
113+
TweenLite.to(pixie, .2, { y: 530 });
114+
}
115+
});
116+
117+
setTimeout(function () { jumpOver = false }, 1000);
118+
jumpOver = true;
119+
}
120+
121+
function addBackground(res) {
122+
background = PIXI.Sprite.from('assets/iP4_BGtile.jpg');
123+
background2 = PIXI.Sprite.from('assets/iP4_BGtile.jpg');
124+
125+
foreground = PIXI.Sprite.from('assets/iP4_ground.png');
126+
foreground2 = PIXI.Sprite.from('assets/iP4_ground.png');
127+
foreground.y = foreground2.y = 640 - foreground2.height;
128+
129+
app.stage.addChild(background, background2, foreground, foreground2);
130+
}
131+
132+
function addPixie(res) {
133+
pixie = new PIXI.spine.Spine(res.pixie.spineData);
134+
pixie.x = 1024 / 3 + 100;
135+
pixie.y = 530;
136+
pixie.scale.x = pixie.scale.y = .22;
137+
138+
app.stage.addChild(pixie);
139+
140+
pixie.stateData.setMix('running', 'jump', 0.2);
141+
pixie.stateData.setMix('jump', 'running', 0.4);
142+
pixie.state.setAnimation(0, 'running', true);
143+
console.log(pixie);
144+
}
145+
146+
function addGlodAnim() {
147+
let frames = [];
148+
for (let i = 1; i <= 6; i++) {
149+
frames.push(PIXI.Texture.from('gold_' + i + '.png'));
150+
}
151+
152+
glodFrame = frames;
153+
}
154+
155+
function addProton() {
156+
proton = new Proton;
157+
renderer = new Proton.PixiRenderer(app.stage);
158+
159+
let create = renderer.pool.create;
160+
renderer.pool.create = function (body, particle) {
161+
if (body.name == 'COIN') {
162+
let glodAnim = new PIXI.AnimatedSprite(glodFrame);
163+
glodAnim.anchor.set(0.5);
164+
glodAnim.animationSpeed = 0.4;
165+
glodAnim.play();
166+
return glodAnim;
167+
} else {
168+
return create.call(proton.pool, body, particle);
169+
}
170+
}
171+
172+
proton.addRenderer(renderer);
173+
}
174+
175+
function addCoin() {
176+
coinEmitter = new Proton.Emitter();
177+
coinEmitter.rate = new Proton.Rate(new Proton.Span(2, 3), .1);
178+
179+
coinEmitter.addInitialize(new Proton.Body({ name: 'COIN' }));
180+
coinEmitter.addInitialize(new Proton.Mass(1));
181+
coinEmitter.addInitialize(new Proton.Life(1.3));
182+
coinEmitter.addInitialize(new Proton.Velocity(new Proton.Span(3, 5), new Proton.Span(0, 60, true), 'polar'));
183+
184+
coinEmitter.addBehaviour(new Proton.Rotate(Proton.getSpan(0, 360), new Proton.Span([-1, -2, 0, 1, 2]), 'add'));
185+
//coinEmitter.addBehaviour(new Proton.Alpha(1, 0));
186+
coinEmitter.addBehaviour(new Proton.Gravity(6));
187+
coinEmitter.addBehaviour(new Proton.Scale(Proton.getSpan(.2, .5)));
188+
189+
coinEmitter.p.y = 250;
190+
proton.addEmitter(coinEmitter);
191+
}
192+
193+
function addRain() {
194+
let emitter = new Proton.Emitter();
195+
emitter.rate = new Proton.Rate(new Proton.Span(15, 22), new Proton.Span(.1, .3));
196+
197+
emitter.addInitialize(new Proton.Body('./image/rain.png'));
198+
emitter.addInitialize(new Proton.Mass(1));
199+
emitter.addInitialize(new Proton.Life(1, 2));
200+
201+
let y = 60;
202+
let d = 800;
203+
emitter.addInitialize(new Proton.Position(new Proton.LineZone(130, y, app.stage.width + d, y)));
204+
emitter.addInitialize(new Proton.Velocity(new Proton.Span(6, 12), -130, 'polar'));
205+
206+
emitter.addBehaviour(new Proton.Alpha(Proton.getSpan(1, 0)));
207+
emitter.addBehaviour(new Proton.Rotate(130));
208+
emitter.addBehaviour(new Proton.Scale(Proton.getSpan(.2, .6)));
209+
210+
y = app.stage.height - 100;
211+
emitter.addBehaviour(new Proton.CrossZone(new Proton.LineZone(-1000, y, app.stage.width + 1000, y, 'down'), 'dead'));
212+
213+
emitter.emit();
214+
proton.addEmitter(emitter);
215+
216+
emitter.preEmit(1.2);
217+
}
218+
219+
function addSmoke() {
220+
smokeEmitter = new Proton.Emitter();
221+
smokeEmitter.rate = new Proton.Rate(new Proton.Span(6, 8), 1);
222+
223+
smokeEmitter.addInitialize(new Proton.Body('./image/smoke.png'));
224+
smokeEmitter.addInitialize(new Proton.Mass(1));
225+
smokeEmitter.addInitialize(new Proton.Life(1));
226+
smokeEmitter.addInitialize(new Proton.Velocity(new Proton.Span(.8, 1.2), new Proton.Span(0, 110, true), 'polar'));
227+
228+
smokeEmitter.addBehaviour(new Proton.Rotate(0, new Proton.Span([-1, -2, 0, 1, 2]), 'add'));
229+
smokeEmitter.addBehaviour(new Proton.Scale(Proton.getSpan(.1, .3), .7));
230+
smokeEmitter.addBehaviour(new Proton.Alpha(1, 0));
231+
232+
smokeEmitter.p.y = pixie.y;
233+
proton.addEmitter(smokeEmitter);
234+
}
235+
236+
function tick() {
237+
bgRun();
238+
proton.update();
239+
proton.stats.update(2, container);
240+
}
241+
242+
function bgRun() {
243+
postition += 10;
244+
245+
background.x = -(postition * 0.6);
246+
background.x %= 1286 * 2;
247+
if (background.x < 0) {
248+
background.x += 1286 * 2;
249+
}
250+
background.x -= 1286;
251+
252+
background2.x = -(postition * 0.6) + 1286;
253+
background2.x %= 1286 * 2;
254+
if (background2.x < 0) {
255+
background2.x += 1286 * 2;
256+
}
257+
background2.x -= 1286;
258+
259+
foreground.x = -postition;
260+
foreground.x %= 1286 * 2;
261+
if (foreground.x < 0) {
262+
foreground.x += 1286 * 2;
263+
}
264+
foreground.x -= 1286;
265+
266+
foreground2.x = -postition + 1286;
267+
foreground2.x %= 1286 * 2;
268+
if (foreground2.x < 0) {
269+
foreground2.x += 1286 * 2;
270+
}
271+
272+
foreground2.x -= 1286;
273+
}
274+
</script>
275+
</body>
276+
277+
</html>

0 commit comments

Comments
 (0)