Example of how to create a Pixel Platformer in PIXI.js using ES6 Modules directly in the browser.
- Loading tilesheets and tilemaps
- Loading spritesheets
- a stepper sprite with keyboard control
- floating sprite and anchored sprite motion
- Just run it in your browser
app.js— the demo appsprite.js— custom sprite classes with asset loadingFloatingSprite(moving continuously)AnchoredSprite(using anchors for each frame)StepperSprite(anchored sprite with keyboard control for debugging of animations)
keyboard.js— keyboard events and statescontroller.js— your own extensible controller (add voice control, gesture control, etc here)resize.js— function to resize the stage dynamicallyfullscreen.js— toggle fullscreenhelpscreen.js— toggle help screentiledmap.js— load tile maps created by Tiled Map Editorpixi-tilemap.js— efficient implementation of tilemaps. (pixi-tilemap bundled as ESM for usage in the browser)filters- directory for filter modulescolorFilter.js— just a quick color filter to change individual sprite colors using a GLSL fragement shader- all other filters are from pixi-filters
hilite.js— function to hilite graphics on mouse hoverpoly.js— example for a custom graphics objectwebfonts.js— function to load google webfonts using webfont loadermath.js— Javascript math functions as ES6 modules (so we can writesininstead ofMath.sin)
Seepoly.jsfor an example
bitcraft-littleguy.png— 8 frames walking animation — created with Piksel App + TexturePackerbitcraft-littleguy.json— spritesheet data created with TexturePacker. Adjusted anchor points / pivot points to create a convincing animationkenney-pixelpal.png— free sprite from kenney's simplified-platformer-packkenney-tilesheet.png— free tiles from kenney's simplified-platformer-pack
- Piksel App to create animations
- Texture Packer to create spritesheets and tilesheets
- Tiled Map Editor to create the level
MIT licensed