shaku
Version:
A simple and effective JavaScript game development framework that knows its place!
123 lines (96 loc) • 4.19 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Shaku</title>
<meta name="description" content="Shaku - a simple and easy-to-use javascript library for videogame programming.">
<meta name="author" content="Ronen Ness">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div class="noselect">
<h1 class="demo-title" style="margin-left: 0;">Shaku Gfx Demo: Static Performance Test</h1>
<p>This demo is a performance test to check the limits of Shaku on your machine, with a static batch that only updates once and redrawn every frame.</p>
<p id="fps-data"></p>
<!-- include shaku -->
<script src="js/demos.js"></script>
<script src="js/shaku.js"></script>
<!-- demo code -->
<script>
async function runDemo()
{
// init shaku
await Shaku.init();
// screen size
let screenX = 1000;
let screenY = 800;
// add canvas to document
document.body.appendChild(Shaku.gfx.canvas);
Shaku.gfx.setResolution(screenX, screenY, true);
// load textures
let texture = await Shaku.assets.loadTexture('assets/skelly.png');
// create sprites group
let group = new Shaku.gfx.SpritesGroup();
// add a new sprite to group
function drawSprite()
{
// create sprite
let sprite = new Shaku.gfx.Sprite(texture);
// random position and set size
sprite.position.set(16 + Math.random() * (screenX - 32), 24 + Math.random() * (screenY - 48));
sprite.size.set(32, 48);
// make some with source rect
if (Math.random() < 0.5) {
sprite.sourceRectangle = new Shaku.utils.Rectangle(0, 0, texture.width, texture.height);
}
// random color
if (Math.random() < 0.75) {
sprite.color.set(Math.random(), Math.random(), Math.random(), 1);
}
// random if should rotate randomly
if (Math.random() < 0.25) {
sprite.rotationSpeed = (Math.random() - 0.5) * 5;
}
// randomize velocity
sprite.velocity = new Shaku.utils.Vector2(Math.random() * 2 - 1, Math.random() * 2 - 1);
// add to group
group.add(sprite);
}
// create starting sprites
let spritesCount = 250000;
for (let i = 0; i < spritesCount; ++i) {
drawSprite();
}
// create a sprites batch
let batchSize = spritesCount + 1;
let spritesBatch = new Shaku.gfx.SpriteBatch(batchSize, true);
// add sprites
spritesBatch.begin();
spritesBatch.drawSpriteGroup(group);
spritesBatch.makeStatic();
spritesBatch.endWithoutDraw();
// do a main loop step.
function step()
{
// start frame and clear screen
Shaku.startFrame();
Shaku.gfx.clear(Shaku.utils.Color.cornflowerblue);
// draw sprites batch - we just begin and end since we already have all the vertices set statically (we set preserve buffers = true).
// here we can change effect, blend mode, transformations, etc.
spritesBatch.begin();
spritesBatch.end();
// end frame and request next frame
Shaku.endFrame();
Shaku.requestAnimationFrame(step);
// update fps and data
document.getElementById('fps-data').innerHTML = "FPS: " + Shaku.getFpsCount() + "<br />Sprites: " + group.count + "<br />Avg Frame Time (ms): " + Shaku.getAverageFrameTime() + "<br />Delta Time (ms): " + (Shaku.gameTime.delta * 1000.0) + "<br />Draw Calls: " + Shaku.gfx.drawCallsCount;
}
// start main loop
step();
}
// start demo
runDemo();
</script>
</div>
</body>
</html>