Skip to content

Commit

Permalink
feat: add pixi v7 demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@drawcall
drawcall committed Feb 6, 2023
1 parent 414b7a4 commit 83c3caa
Show file tree
Hide file tree
Showing 3 changed files with 25,022 additions and 0 deletions.
277 changes: 277 additions & 0 deletions example/game/pixijs/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,277 @@
<!DOCTYPE HTML>
<html>

<head>
<title>pixi.js game</title>
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<style type="text/css">
body {
background-color: #333333;
margin: 0px;
overflow: hidden;
}

.shadow {
box-shadow: 0 0 25px #000;
}

#container {
width: 1003px;
height: 580px;
margin-top: 50px;
margin-left: -501px;
left: 50%;
position: absolute;
}
</style>
</head>

<body>
<div id="container" class="shadow">
</div>
<script src="../../lib/stats.min.js"></script>
<script src="../../lib/pixi.js"></script>
<script src="../../lib/pixi-spine-4.1.js"></script>
<script src="../../lib/TweenLite.min.js"></script>
<script src="//localhost:3001/build/proton.js"></script>
<script>
let app;
let container;
let proton;
let renderer;
let smokeEmitter;
let coinEmitter;
let glodFrame;
let jumpOver = false;
let postition = 0,
pixie,
background,
background2,
foreground,
foreground2;

main();

function main() {
initPIXI();
loadAssets();
}

function initPIXI() {
app = new PIXI.Application(1003, 580, { backgroundColor: 0x1099bb });
container = document.getElementById('container');
container.appendChild(app.view);

app.stop();
}

function loadAssets() {
PIXI.Assets.init({
basePath: ""
});
PIXI.Assets.add('pixie', 'assets/Pixie.json');
PIXI.Assets.add('gold', 'image/gold_anim.json')
PIXI.Assets.load(['pixie', 'gold']).then(onAssetsLoaded);
}

function onAssetsLoaded(res) {
addBackground(res);
addPixie(res);
addGlodAnim(res);

addPixiEventListener();
app.start();
app.ticker.add(tick);

addProton();
addRain();
addSmoke();
addCoin();
}

function addPixiEventListener() {
app.stage.interactive = true;
app.stage.on('pointerdown', onTouchStart);
}

function onTouchStart() {
if (jumpOver) return;

pixie.state.setAnimation(0, 'jump', false);
pixie.state.addAnimation(0, 'running', true, 0);

smokeEmitter.p.x = pixie.x;
coinEmitter.p.x = pixie.x + 20;

smokeEmitter.emit('once');
coinEmitter.emit(.5);

TweenLite.to(pixie, .5, {
y: 490,
onComplete: function () {
TweenLite.to(pixie, .2, { y: 530 });
}
});

setTimeout(function () { jumpOver = false }, 1000);
jumpOver = true;
}

function addBackground(res) {
background = PIXI.Sprite.from('assets/iP4_BGtile.jpg');
background2 = PIXI.Sprite.from('assets/iP4_BGtile.jpg');

foreground = PIXI.Sprite.from('assets/iP4_ground.png');
foreground2 = PIXI.Sprite.from('assets/iP4_ground.png');
foreground.y = foreground2.y = 640 - foreground2.height;

app.stage.addChild(background, background2, foreground, foreground2);
}

function addPixie(res) {
pixie = new PIXI.spine.Spine(res.pixie.spineData);
pixie.x = 1024 / 3 + 100;
pixie.y = 530;
pixie.scale.x = pixie.scale.y = .22;

app.stage.addChild(pixie);

pixie.stateData.setMix('running', 'jump', 0.2);
pixie.stateData.setMix('jump', 'running', 0.4);
pixie.state.setAnimation(0, 'running', true);
console.log(pixie);
}

function addGlodAnim() {
let frames = [];
for (let i = 1; i <= 6; i++) {
frames.push(PIXI.Texture.from('gold_' + i + '.png'));
}

glodFrame = frames;
}

function addProton() {
proton = new Proton;
renderer = new Proton.PixiRenderer(app.stage);

let create = renderer.pool.create;
renderer.pool.create = function (body, particle) {
if (body.name == 'COIN') {
let glodAnim = new PIXI.AnimatedSprite(glodFrame);
glodAnim.anchor.set(0.5);
glodAnim.animationSpeed = 0.4;
glodAnim.play();
return glodAnim;
} else {
return create.call(proton.pool, body, particle);
}
}

proton.addRenderer(renderer);
}

function addCoin() {
coinEmitter = new Proton.Emitter();
coinEmitter.rate = new Proton.Rate(new Proton.Span(2, 3), .1);

coinEmitter.addInitialize(new Proton.Body({ name: 'COIN' }));
coinEmitter.addInitialize(new Proton.Mass(1));
coinEmitter.addInitialize(new Proton.Life(1.3));
coinEmitter.addInitialize(new Proton.Velocity(new Proton.Span(3, 5), new Proton.Span(0, 60, true), 'polar'));

coinEmitter.addBehaviour(new Proton.Rotate(Proton.getSpan(0, 360), new Proton.Span([-1, -2, 0, 1, 2]), 'add'));
//coinEmitter.addBehaviour(new Proton.Alpha(1, 0));
coinEmitter.addBehaviour(new Proton.Gravity(6));
coinEmitter.addBehaviour(new Proton.Scale(Proton.getSpan(.2, .5)));

coinEmitter.p.y = 250;
proton.addEmitter(coinEmitter);
}

function addRain() {
let emitter = new Proton.Emitter();
emitter.rate = new Proton.Rate(new Proton.Span(15, 22), new Proton.Span(.1, .3));

emitter.addInitialize(new Proton.Body('./image/rain.png'));
emitter.addInitialize(new Proton.Mass(1));
emitter.addInitialize(new Proton.Life(1, 2));

let y = 60;
let d = 800;
emitter.addInitialize(new Proton.Position(new Proton.LineZone(130, y, app.stage.width + d, y)));
emitter.addInitialize(new Proton.Velocity(new Proton.Span(6, 12), -130, 'polar'));

emitter.addBehaviour(new Proton.Alpha(Proton.getSpan(1, 0)));
emitter.addBehaviour(new Proton.Rotate(130));
emitter.addBehaviour(new Proton.Scale(Proton.getSpan(.2, .6)));

y = app.stage.height - 100;
emitter.addBehaviour(new Proton.CrossZone(new Proton.LineZone(-1000, y, app.stage.width + 1000, y, 'down'), 'dead'));

emitter.emit();
proton.addEmitter(emitter);

emitter.preEmit(1.2);
}

function addSmoke() {
smokeEmitter = new Proton.Emitter();
smokeEmitter.rate = new Proton.Rate(new Proton.Span(6, 8), 1);

smokeEmitter.addInitialize(new Proton.Body('./image/smoke.png'));
smokeEmitter.addInitialize(new Proton.Mass(1));
smokeEmitter.addInitialize(new Proton.Life(1));
smokeEmitter.addInitialize(new Proton.Velocity(new Proton.Span(.8, 1.2), new Proton.Span(0, 110, true), 'polar'));

smokeEmitter.addBehaviour(new Proton.Rotate(0, new Proton.Span([-1, -2, 0, 1, 2]), 'add'));
smokeEmitter.addBehaviour(new Proton.Scale(Proton.getSpan(.1, .3), .7));
smokeEmitter.addBehaviour(new Proton.Alpha(1, 0));

smokeEmitter.p.y = pixie.y;
proton.addEmitter(smokeEmitter);
}

function tick() {
bgRun();
proton.update();
proton.stats.update(2, container);
}

function bgRun() {
postition += 10;

background.x = -(postition * 0.6);
background.x %= 1286 * 2;
if (background.x < 0) {
background.x += 1286 * 2;
}
background.x -= 1286;

background2.x = -(postition * 0.6) + 1286;
background2.x %= 1286 * 2;
if (background2.x < 0) {
background2.x += 1286 * 2;
}
background2.x -= 1286;

foreground.x = -postition;
foreground.x %= 1286 * 2;
if (foreground.x < 0) {
foreground.x += 1286 * 2;
}
foreground.x -= 1286;

foreground2.x = -postition + 1286;
foreground2.x %= 1286 * 2;
if (foreground2.x < 0) {
foreground2.x += 1286 * 2;
}

foreground2.x -= 1286;
}
</script>
</body>

</html>
Loading

0 comments on commit 83c3caa

Please sign in to comment.