-
-
Notifications
You must be signed in to change notification settings - Fork 97
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(sprite): allow preprocessing of file through rollup-plugin
* feat(sprite): allow preprocessing of file through rollup-plugin * fix test * add docs * add docs * change flag names to denote sprite * update docs * update gulpfile with new names * fix minified output
- Loading branch information
Showing
47 changed files
with
1,677 additions
and
1,250 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,5 @@ | ||
node_modules | ||
.DS_Store | ||
coverage | ||
coverage | ||
test/spritePermutations/sprite.js | ||
test/spritePermutations/sprite.spec.js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,171 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<title>Kontra.js – Custom Builds</title> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<base href="https://straker.github.io/kontra/"> | ||
|
||
<script> | ||
// adjust path based on location (github pages required kontra url) | ||
if (window.location.host.indexOf('localhost') !== -1) { | ||
let base = document.querySelector('base'); | ||
base.setAttribute('href', '/'); | ||
} | ||
</script> | ||
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism.min.css"> | ||
<link rel="stylesheet" href="assets/styles.css"> | ||
<script src="assets/js/kontra.js"></script> | ||
</head> | ||
<body> | ||
<div class="content"> | ||
<header class="main-nav"> | ||
<div id="kontra-heading" class="nav-heading">Kontra</div> | ||
<a href="#main">Skip navigation</a> | ||
|
||
<nav> | ||
<button class="menu-button" aria-expanded="false" aria-controls="menu"><span aria-hidden="true">☰</span> Menu</button> | ||
|
||
<!-- add role=list back to list so screen readers still read it as list when | ||
css list-style: none is set | ||
@see https://web-a11y.slack.com/archives/C042TSFGN/p1501699529181172 --> | ||
<ul id="menu" role="list"> | ||
<li><a href="." >Introduction</a></li> | ||
<li><a href="getting-started" >Getting Started</a></li> | ||
<li><a href="download" >Download</a></li> | ||
<li><a href="custom-builds" aria-current="page">Custom Builds</a></li> | ||
<li><a href="tutorials" >Tutorials</a></li> | ||
<li><a href="made-with-kontra" >Made With Kontra</a></li> | ||
|
||
<li> | ||
<span id="api" class="nav-api-heading">API</span> | ||
<ul aria-labelledby="api"> | ||
<li><a href="api/animation" >Animation</a></li> | ||
<li><a href="api/assets" >Assets</a></li> | ||
<li><a href="api/collision" >Collision</a></li> | ||
<li><a href="api/core" >Core</a></li> | ||
<li><a href="api/events" >Events</a></li> | ||
<li><a href="api/gameLoop" >GameLoop</a></li> | ||
<li><a href="api/keyboard" >Keyboard</a></li> | ||
<li><a href="api/plugin" >Plugin</a></li> | ||
<li><a href="api/pointer" >Pointer</a></li> | ||
<li><a href="api/pool" >Pool</a></li> | ||
<li><a href="api/quadtree" >Quadtree</a></li> | ||
<li><a href="api/sprite" >Sprite</a></li> | ||
<li><a href="api/spriteSheet" >SpriteSheet</a></li> | ||
<li><a href="api/store" >Store</a></li> | ||
<li><a href="api/tileEngine" >TileEngine</a></li> | ||
<li><a href="api/vector" >Vector</a></li> | ||
</ul> | ||
</li> | ||
</ul> | ||
</nav> | ||
<div class="scroll-indicator" aria-hidden="true"><span>^</span></div> | ||
</header> | ||
|
||
<main id="main"> | ||
<div> | ||
<a href="https://github.com/straker/kontra" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a> | ||
|
||
<h1>Custom Builds </h1> | ||
|
||
<p>As of kontra 6.0.0, custom builds can be achieved by using a module bundler such as <a href="https://rollupjs.org/">Rollup</a> or <a href="https://webpack.js.org/">webpack</a>. Kontra supports ES modules, allowing you to use <a href="https://rollupjs.org/guide/en#tree-shaking">tree-shaking</a> to only bundle the code you need.</p> | ||
<pre><code class="language-js">// game.js | ||
import { Sprite, GameLoop } from 'kontra'; | ||
|
||
let sprite = Sprite({ | ||
x: 100, | ||
y: 100, | ||
dx: 2, | ||
width: 20, | ||
height: 40, | ||
color: 'red' | ||
}); | ||
|
||
let loop = GameLoop({ | ||
update() { | ||
sprite.update(); | ||
}, | ||
render() { | ||
sprite.render(); | ||
} | ||
}); | ||
|
||
loop.start();</code></pre> | ||
<pre><code class="language-bash">$ rollup game.js --format iife --file game.bundle.js</code></pre> | ||
<h2 id="rollup-plugin-kontra">Rollup-plugin-kontra</h2> | ||
<p>Kontra supports even more granular control over the output. If you're looking to remove unused parts of the Sprite class, such as <code>rotation</code> or <code>anchor</code>, you can use <a href="https://github.com/straker/rollup-plugin-kontra">rollup-plugin-kontra</a> to remove entire parts of the Sprite codebase. Just pass the functionality you want enabled and rollup-plugin-kontra will remove the rest.</p> | ||
<p><strong>Note:</strong> All options default to <code>false</code> when using rollup-plugin-kontra, so only pass the options you wish to enable. Passing no options will result in a Sprite with just <code>position</code>, <code>width,</code> and <code>height</code>.</p> | ||
<pre><code class="language-js">// rollup.config.js | ||
import kontra from 'rollup-plugin-kontra' | ||
|
||
export default { | ||
entry: 'entry.js', | ||
dest: 'bundle.js', | ||
plugins: [ | ||
kontra({ | ||
sprite: { | ||
// enable only velocity and rotation functionality | ||
velocity: true, | ||
rotation: true | ||
} | ||
}) | ||
] | ||
}</code></pre> | ||
<h3 id="available-options">Available options</h3> | ||
<p>Sprite options:</p> | ||
<table> | ||
<thead> | ||
<tr> | ||
<th>Name</th> | ||
<th>Functionality Enabled</th> | ||
</tr> | ||
</thead> | ||
<tbody><tr> | ||
<td>velocity</td> | ||
<td><code>velocity</code>, <code>dx</code>, <code>dy</code></td> | ||
</tr> | ||
<tr> | ||
<td>acceleration</td> | ||
<td><code>acceleration</code>, <code>ddx</code>, <code>ddy</code></td> | ||
</tr> | ||
<tr> | ||
<td>rotation</td> | ||
<td><code>rotation</code></td> | ||
</tr> | ||
<tr> | ||
<td>ttl</td> | ||
<td><code>ttl</code>, <code>isAlive</code></td> | ||
</tr> | ||
<tr> | ||
<td>anchor</td> | ||
<td><code>anchor</code></td> | ||
</tr> | ||
<tr> | ||
<td>camera</td> | ||
<td><code>sx</code>, <code>sy</code>, <code>viewX</code>, <code>viewY</code></td> | ||
</tr> | ||
<tr> | ||
<td>image</td> | ||
<td><code>image</code>, flip image using negative width</td> | ||
</tr> | ||
<tr> | ||
<td>animation</td> | ||
<td><code>animations</code>, <code>playAnimation</code>, flip image using negative width</td> | ||
</tr> | ||
</tbody></table> | ||
|
||
|
||
|
||
|
||
|
||
</div> | ||
</main> | ||
</div> | ||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/prism.min.js"></script> | ||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-javascript.min.js"></script> | ||
<script src="assets/js/navbar.js"></script> | ||
<script src="assets/js/exampleTabList.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.