shaku
Version:
A simple and effective JavaScript game development framework that knows its place!
180 lines (145 loc) • 6.5 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: Blend Modes</h1>
<p>This demo demonstrate how to render with different blend modes.<br />
Press <b>Space</b> to toggle background, <b>Z</b> to change textures.</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();
// show background?
let showBackground = false;
let textureIndex = 0;
// screen size
let screenX = 900;
let screenY = 600;
// add canvas to document
document.body.appendChild(Shaku.gfx.canvas);
Shaku.gfx.setResolution(screenX, screenY, true);
// load font texture
let fontTexture = await Shaku.assets.loadFontTexture('assets/DejaVuSansMono.ttf', {fontName: 'DejaVuSansMono'});
// create text and sprites batch
let spritesBatch = new Shaku.gfx.SpriteBatch();
let textSpriteBatch = new Shaku.gfx.TextSpriteBatch();
// set outline
textSpriteBatch.outlineWeight = 1;
textSpriteBatch.outlineColor = Shaku.utils.Color.black;
// draw a texture with simple outline
function drawTextWithOutline(text, position)
{
let textGroup = Shaku.gfx.buildText(fontTexture, text, 24, Shaku.utils.Color.black, Shaku.gfx.TextAlignments.Center);
textGroup.setColor(Shaku.utils.Color.white);
textGroup.position.copy(position);
textSpriteBatch.begin();
textSpriteBatch.drawText(textGroup);
textSpriteBatch.end();
}
// load textures
let texture1 = await Shaku.assets.loadTexture('assets/shaku.png');
let texture2 = await Shaku.assets.loadTexture('assets/colors.png');
let texture3 = await Shaku.assets.loadTexture('assets/sprite.png');
let texture4 = await Shaku.assets.loadTexture('assets/stone_wall.png');
let background = await Shaku.assets.loadTexture('assets/level.jpg');
// texture options
let textures = [texture1, texture2, texture3, texture4, Shaku.gfx.whiteTexture];
// do a main loop step.
function step()
{
// start frame and clear screen
Shaku.startFrame();
Shaku.gfx.clear(Shaku.utils.Color.cornflowerblue);
// draw background
if (showBackground) {
spritesBatch.begin();
spritesBatch.drawRectangle(background, Shaku.gfx.getRenderingRegion());
spritesBatch.end();
}
// input
if (Shaku.input.pressed('space')) {
showBackground = !showBackground;
}
if (Shaku.input.pressed('z')) {
textureIndex++;
if (!textures[textureIndex]) { textureIndex = 0; }
}
// draw blend modes
let spriteSize = 200;
let x = spriteSize / 2;
let y = spriteSize / 2;
for (let blend in Shaku.gfx.BlendModes) {
// draw sprite with blend mode
spritesBatch.begin(Shaku.gfx.BlendModes[blend]);
spritesBatch.drawQuad(textures[textureIndex], new Shaku.utils.Vector2(x, y), spriteSize);
spritesBatch.end();
// draw blend mode text
drawTextWithOutline(blend, new Shaku.utils.Vector2(x, y - spriteSize / 2 + 18));
// update position for next sprite
x += spriteSize;
if (x >= screenX - spriteSize / 2) {
x = spriteSize / 2;
y += spriteSize;
}
}
// 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 to demonstrate different Blend Modes.</p>
<pre><code class="language-js">// load sprite's texture asset
let texture = await Shaku.assets.loadTexture('assets/sprite.png');
// part below goes between startFrame() and endFrame()
// -------------------------------------------------------
// sprite offset and position
let x = 1;
let y = 1;
let spriteSize = 100;
// draw alpha blend (default) blend mode:
spritesBatch.begin(Shaku.gfx.BlendModes.AlphaBlend);
spritesBatch.drawQuad(texture, new Shaku.utils.Vector2(x++, y).mul(spriteSize), spriteSize);
spritesBatch.end();
// draw opaque (no transparency) blend mode:
spritesBatch.begin(Shaku.gfx.BlendModes.Opaque);
spritesBatch.drawQuad(texture, new Shaku.utils.Vector2(x++, y).mul(spriteSize), spriteSize);
spritesBatch.end();
// draw additive (add color to dest) blend mode:
spritesBatch.begin(Shaku.gfx.BlendModes.Additive);
spritesBatch.drawQuad(texture, new Shaku.utils.Vector2(x++, y).mul(spriteSize), spriteSize);
spritesBatch.end();
// draw multiply (multiply color with dest) blend mode:
spritesBatch.begin(Shaku.gfx.BlendModes.Multiply);
spritesBatch.drawQuad(texture, new Shaku.utils.Vector2(x++, y).mul(spriteSize), spriteSize);
spritesBatch.end();
// there are other blend modes Shaku support, check out Shaku.gfx.BlendModes for more options</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>