mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-06 07:14:55 +08:00
[ts][pixi] Add bunnymark example to compare performance among releases.
This commit is contained in:
Davide Tantillo
parent
5cc203b772
commit
3512e3ddff
@ -53,6 +53,7 @@
|
||||
<li><a href="/spine-pixi-v7/example/physics3.html">Physics III</a></li>
|
||||
<li><a href="/spine-pixi-v7/example/physics4.html">Physics IV</a></li>
|
||||
<li><a href="/spine-pixi-v7/example/slot-objects.html">Slot Objects</a></li>
|
||||
<li><a href="/spine-pixi-v7/example/bunnymark.html?count=500">Bunny Mark</a></li>
|
||||
</ul>
|
||||
<li>PixiJS v8</li>
|
||||
<ul>
|
||||
@ -78,6 +79,7 @@
|
||||
<li><a href="/spine-pixi-v8/example/physics3.html">Physics III</a></li>
|
||||
<li><a href="/spine-pixi-v8/example/physics4.html">Physics IV</a></li>
|
||||
<li><a href="/spine-pixi-v8/example/slot-objects.html">Slot Objects</a></li>
|
||||
<li><a href="/spine-pixi-v8/example/bunnymark.html?count=500&renderer=webgpu">Bunny Mark</a></li>
|
||||
</ul>
|
||||
<li>Phaser</li>
|
||||
<ul>
|
||||
|
||||
152
spine-ts/spine-pixi-v7/example/bunnymark.html
Normal file
152
spine-ts/spine-pixi-v7/example/bunnymark.html
Normal file
@ -0,0 +1,152 @@
|
||||
<!-- This example is adapted from https://github.com/GoodBoyDigital/pixi-bunnymark -->
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>spine-pixi-v7 bunnymark</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/pixi.js@7.4.2/dist/pixi.min.js"></script>
|
||||
<script src="../dist/iife/spine-pixi-v7.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>javascript:(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);stats.dom.children[1].style.display='block';stats.dom.children[2].style.display='block';requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='https://mrdoob.github.io/stats.js/build/stats.min.js';document.head.appendChild(script);})()</script>
|
||||
<script>
|
||||
(async function () {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const totalBunnies = parseInt(params.get('count')) || 100;
|
||||
|
||||
const bunnyPool = [];
|
||||
|
||||
const renderer = new PIXI.Renderer({
|
||||
clearBeforeRender: true,
|
||||
backgroundAlpha: 1,
|
||||
backgroundColor: 0xFFFFFF,
|
||||
width: 800,
|
||||
height: 600,
|
||||
resolution: 1,
|
||||
antialias: false,
|
||||
})
|
||||
|
||||
document.body.appendChild(renderer.view)
|
||||
|
||||
const stage = new PIXI.Container();
|
||||
|
||||
PIXI.Assets.add({ alias: "spineboyData", src: "assets/spineboy-pro.skel" });
|
||||
PIXI.Assets.add({ alias: "spineboyAtlas", src: "assets/spineboy-pma.atlas" });
|
||||
await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
|
||||
|
||||
const bounds = new PIXI.Rectangle(0, 0, 800, 600);
|
||||
|
||||
const bunnies = []
|
||||
|
||||
function addBunny() {
|
||||
|
||||
const bunny = new BunnyV7(bounds)
|
||||
|
||||
stage.addChild(bunny.view);
|
||||
bunnies.push(bunny);
|
||||
}
|
||||
|
||||
for (let i = 0; i < totalBunnies; i++) {
|
||||
addBunny();
|
||||
}
|
||||
|
||||
let pause = false;
|
||||
|
||||
renderer.view.addEventListener('mousedown', () => {
|
||||
pause = !pause
|
||||
addBunny();
|
||||
})
|
||||
|
||||
function renderUpdate() {
|
||||
|
||||
if (!pause) {
|
||||
for (let i = 0; i < bunnies.length; i++) {
|
||||
bunnies[i].update();
|
||||
}
|
||||
}
|
||||
|
||||
renderer.render(stage);
|
||||
requestAnimationFrame(renderUpdate)
|
||||
}
|
||||
|
||||
renderUpdate()
|
||||
})();
|
||||
|
||||
class BunnyV7 {
|
||||
|
||||
view;
|
||||
|
||||
gravity = 0.75
|
||||
|
||||
speedX = Math.random() * 10;
|
||||
speedY = (Math.random() * 10) - 5;
|
||||
|
||||
positionX = 0;
|
||||
positionY = 0;
|
||||
|
||||
bounds;
|
||||
|
||||
constructor(bounds) {
|
||||
const spineboy = spine.Spine.from({
|
||||
atlas: "spineboyAtlas",
|
||||
skeleton: "spineboyData",
|
||||
scale: 0.125,
|
||||
});
|
||||
|
||||
// Set the default mix time to use when transitioning
|
||||
// from one animation to the next.
|
||||
spineboy.state.data.defaultMix = 0.2;
|
||||
|
||||
// Center the spine object on screen.
|
||||
spineboy.x = window.innerWidth / 2;
|
||||
spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
|
||||
|
||||
// Set animation "cape-follow-example" on track 0, looped.
|
||||
spineboy.state.setAnimation(0, "run", true);
|
||||
|
||||
this.view = spineboy
|
||||
this.bounds = bounds;
|
||||
}
|
||||
|
||||
update() {
|
||||
let pX = this.positionX;
|
||||
let pY = this.positionY;
|
||||
|
||||
pX += this.speedX;
|
||||
pY += this.speedY;
|
||||
this.speedY += this.gravity;
|
||||
|
||||
if (pX > this.bounds.right) {
|
||||
this.speedX *= -1;
|
||||
pX = this.bounds.right;
|
||||
}
|
||||
else if (pX < this.bounds.left) {
|
||||
this.speedX *= -1;
|
||||
pX = this.bounds.left;
|
||||
}
|
||||
|
||||
if (pY > this.bounds.bottom) {
|
||||
this.speedY *= -0.85;
|
||||
pY = this.bounds.bottom;
|
||||
if (Math.random() > 0.5) {
|
||||
this.speedY -= Math.random() * 6;
|
||||
}
|
||||
}
|
||||
else if (pY < this.bounds.top) {
|
||||
this.speedY = 0;
|
||||
pY = this.bounds.top;
|
||||
}
|
||||
|
||||
this.view.position.x = this.positionX = pX;
|
||||
this.view.position.y = this.positionY = pY;
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.positionX = 0;
|
||||
this.positionY = 0;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
162
spine-ts/spine-pixi-v8/example/bunnymark.html
Normal file
162
spine-ts/spine-pixi-v8/example/bunnymark.html
Normal file
@ -0,0 +1,162 @@
|
||||
<!-- This example is adapted from https://github.com/GoodBoyDigital/pixi-bunnymark -->
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>spine-pixi-v8 bunnymark</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/pixi.js@8.4.1/dist/pixi.min.js"></script>
|
||||
<script src="../dist/iife/spine-pixi-v8.js"></script>
|
||||
<link rel="stylesheet" href="../../index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>javascript:(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);stats.dom.children[1].style.display='block';if (stats.dom.children[2]) stats.dom.children[2].style.display='block';requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='https://mrdoob.github.io/stats.js/build/stats.min.js';document.head.appendChild(script);})()</script>
|
||||
<script>
|
||||
(async function () {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const totalBunnies = parseInt(params.get('count')) || 100;
|
||||
const preference = params.get('renderer') || 'webgl';
|
||||
|
||||
const bunnyPool = [];
|
||||
|
||||
const renderer = await PIXI.autoDetectRenderer({
|
||||
preference,
|
||||
clearBeforeRender: true,
|
||||
backgroundAlpha: 1,
|
||||
backgroundColor: 0xFFFFFF,
|
||||
width: 800,
|
||||
height: 600,
|
||||
resolution: 1,
|
||||
antialias: false,
|
||||
hello: true,
|
||||
})
|
||||
|
||||
document.body.appendChild(renderer.view.canvas);
|
||||
|
||||
const stage = new PIXI.Container();
|
||||
|
||||
PIXI.Assets.add({ alias: "spineboyData", src: "assets/spineboy-pro.skel" });
|
||||
PIXI.Assets.add({ alias: "spineboyAtlas", src: "assets/spineboy-pma.atlas" });
|
||||
await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
|
||||
|
||||
const bounds = new PIXI.Rectangle(0, 0, 800, 600);
|
||||
|
||||
const bunnies = []
|
||||
|
||||
function addBunny() {
|
||||
|
||||
const bunny = bunnyPool.pop() || new BunnyV8(bounds)
|
||||
|
||||
bunny.reset();
|
||||
|
||||
stage.addChild(bunny.view);
|
||||
bunnies.push(bunny);
|
||||
}
|
||||
|
||||
for (let i = 0; i < totalBunnies; i++) {
|
||||
addBunny();
|
||||
}
|
||||
|
||||
let pause = false;
|
||||
|
||||
renderer.view.canvas.addEventListener('mousedown', () => {
|
||||
pause = !pause
|
||||
})
|
||||
|
||||
|
||||
function renderUpdate() {
|
||||
|
||||
if (!pause) {
|
||||
for (let i = 0; i < bunnies.length; i++) {
|
||||
bunnies[i].update();
|
||||
}
|
||||
}
|
||||
|
||||
// bunnies[0].view.visible = !bunnies[0].view.visible;
|
||||
|
||||
renderer.render(stage);
|
||||
requestAnimationFrame(renderUpdate)
|
||||
}
|
||||
|
||||
renderUpdate();
|
||||
})();
|
||||
|
||||
|
||||
|
||||
|
||||
class BunnyV8 {
|
||||
|
||||
view;
|
||||
|
||||
gravity = 0.75
|
||||
|
||||
speedX = Math.random() * 10;
|
||||
speedY = (Math.random() * 10) - 5;
|
||||
|
||||
positionX = 0;
|
||||
positionY = 0;
|
||||
|
||||
bounds;
|
||||
|
||||
constructor(bounds) {
|
||||
const spineboy = spine.Spine.from({
|
||||
atlas: "spineboyAtlas",
|
||||
skeleton: "spineboyData",
|
||||
scale: 0.125,
|
||||
});
|
||||
|
||||
// Set the default mix time to use when transitioning
|
||||
// from one animation to the next.
|
||||
spineboy.state.data.defaultMix = 0.2;
|
||||
|
||||
// Center the spine object on screen.
|
||||
spineboy.x = window.innerWidth / 2;
|
||||
spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
|
||||
|
||||
// Set animation "cape-follow-example" on track 0, looped.
|
||||
spineboy.state.setAnimation(0, "run", true);
|
||||
|
||||
this.view = spineboy
|
||||
this.bounds = bounds;
|
||||
}
|
||||
|
||||
update() {
|
||||
let pX = this.positionX;
|
||||
let pY = this.positionY;
|
||||
|
||||
pX += this.speedX;
|
||||
pY += this.speedY;
|
||||
this.speedY += this.gravity;
|
||||
|
||||
if (pX > this.bounds.right) {
|
||||
this.speedX *= -1;
|
||||
pX = this.bounds.right;
|
||||
}
|
||||
else if (pX < this.bounds.left) {
|
||||
this.speedX *= -1;
|
||||
pX = this.bounds.left;
|
||||
}
|
||||
|
||||
if (pY > this.bounds.bottom) {
|
||||
this.speedY *= -0.85;
|
||||
pY = this.bounds.bottom;
|
||||
if (Math.random() > 0.5) {
|
||||
this.speedY -= Math.random() * 6;
|
||||
}
|
||||
}
|
||||
else if (pY < this.bounds.top) {
|
||||
this.speedY = 0;
|
||||
pY = this.bounds.top;
|
||||
}
|
||||
|
||||
this.view.position.x = this.positionX = pX;
|
||||
this.view.position.y = this.positionY = pY;
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.positionX = 0;
|
||||
this.positionY = 0;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user