shaku
Version:
A simple and effective JavaScript game development framework that knows its place!
150 lines (118 loc) • 6.4 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">
<button class="view-code-btn" onclick="showSampleCode();">View Code</button>
<h1 class="demo-title">Shaku Gfx Demo: Text</h1>
<p>This demo demonstrate how to render text using MSDF with Shaku.<br/>
To render text with higher resolution, Shaku can load a pre-generated MSDF atlas, which would look something like this (the below image was generated with <a href="https://github.com/soimy/msdf-bmfont-xml">msdf-bmfont-xml</a>):</p>
<img id="font-texture" style="background: black;" />
<p>Once created, the Gfx manager can use it to convert any string into a collection of sprites that when rendered will draw the text with the given font.</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 = 800;
let screenY = 600;
// add canvas to document
document.body.appendChild(Shaku.gfx.canvas);
Shaku.gfx.setResolution(screenX, screenY, true);
// create text sprite batch
let textSpriteBatch = new Shaku.gfx.TextSpriteBatch();
textSpriteBatch.msdfFont = true;
// load font texture
let fontTexture = await Shaku.assets.loadMsdfFontTexture('assets/DejaVuSansMono.ttf', {jsonUrl: 'assets/DejaVuSansMono.json', textureUrl: 'assets/DejaVuSansMono.png'});
document.getElementById('font-texture').src = fontTexture.texture.image.src;
// create some texts
let text1 = Shaku.gfx.buildText(fontTexture, "Hello World!");
text1.position.set(40, 40);
let text2 = Shaku.gfx.buildText(fontTexture, "Rotating", 32, Shaku.utils.Color.red, Shaku.gfx.TextAlignments.Center);
text2.position.set(130, 170);
let text3 = Shaku.gfx.buildText(fontTexture, "Flipping", 32, Shaku.utils.Color.red, Shaku.gfx.TextAlignments.Center);
text3.position.set(330, 170);
let text4 = Shaku.gfx.buildText(fontTexture, "Wavy & Funky!", 32, Shaku.utils.Color.white, Shaku.gfx.TextAlignments.Center);
text4.position.set(600, 170);
let text5 = Shaku.gfx.buildText(fontTexture, "This is a multiline text..\nAligned left.", 24, Shaku.utils.Color.white, Shaku.gfx.TextAlignments.Left);
text5.position.set(screenX / 2, 250);
let text6 = Shaku.gfx.buildText(fontTexture, "This is a multiline text..\nAligned right.", 24, Shaku.utils.Color.white, Shaku.gfx.TextAlignments.Right);
text6.position.set(screenX / 2, 350);
let text7 = Shaku.gfx.buildText(fontTexture, "This is a multiline text..\nAligned center.", 24, Shaku.utils.Color.white, Shaku.gfx.TextAlignments.Center);
text7.position.set(screenX / 2, 450);
let text8 = Shaku.gfx.buildText(fontTexture, "Larger spacing", 24, Shaku.utils.Color.brown, Shaku.gfx.TextAlignments.Center, null, new Shaku.utils.Vector2(2.5, 1));
text8.position.set(screenX / 2, 550);
// do a main loop step.
function step()
{
// start frame and clear screen
Shaku.startFrame();
Shaku.gfx.clear(Shaku.utils.Color.cornflowerblue);
// draw texts
textSpriteBatch.begin();
textSpriteBatch.drawText(text1);
textSpriteBatch.drawText(text2);
textSpriteBatch.drawText(text3);
textSpriteBatch.drawText(text4);
textSpriteBatch.drawText(text5);
textSpriteBatch.drawText(text6);
textSpriteBatch.drawText(text7);
textSpriteBatch.drawText(text8);
textSpriteBatch.end();
// do some animations
text2.rotation += Shaku.gameTime.delta;
text3.scale.x = Math.sin(Shaku.gameTime.elapsed);
text4.forEach (sprite => {
sprite.position.y = Math.sin(Shaku.gameTime.elapsed + sprite.position.x) * 6;
sprite.color.r = Math.sin(Shaku.gameTime.elapsed * 2 + sprite.position.x);
sprite.color.g = Math.sin(2 + Shaku.gameTime.elapsed * 2 + sprite.position.x);
sprite.color.b = Math.sin(4 + Shaku.gameTime.elapsed * 2 + sprite.position.x);
})
// end frame and request next frame
Shaku.endFrame();
Shaku.requestAnimationFrame(step);
}
// start main loop
step();
}
// start demo
runDemo();
</script>
</div>
<!-- code example part -->
<div id="sample-code-modal" class="modal">
<div class="modal__overlay jsOverlay"></div>
<div class="modal__container">
<p class="noselect">The following is a minimal code example on how to draw text.</p>
<pre><code class="language-js">// load font texture asset
let fontTexture = await Shaku.assets.loadMsdfFontTexture('assets/DejaVuSansMono.ttf', {jsonUrl: 'assets/DejaVuSansMono.json', textureUrl: 'assets/DejaVuSansMono.png'});
// create text sprite batch
let textSpriteBatch = new Shaku.gfx.TextSpriteBatch();
textSpriteBatch.msdfFont = true;
// generate text
let textGroup = Shaku.gfx.buildText(fontTexture, "This is a multiline text..\nAligned left.", 24, Shaku.utils.Color.white, Shaku.gfx.TextAlignments.Left);
textGroup.position.set(100, 100);
// part below goes between startFrame() and endFrame()
// -------------------------------------------------------
// draw the text
textSpriteBatch.begin();
textSpriteBatch.drawText(textGroup);
textSpriteBatch.end();</code></pre>
<button class="modal__close" onclick="closeModal('sample-code-modal')">✕</button>
</div>
</div>
<link href="prism/prism.css" rel="stylesheet" />
<script src="prism/prism.js"></script>
</body>
</html>