Hackday experiment to try dynamically altering 2D game sprites on a HTML canvas.
Created by Shaun A. Noordin.
Canvas CSS scaling: When our <canvas>
's CSS width/height is scaled
larger than its HTML width/height, be sure to use use canvas { image-rendering: pixelated }
.
This preserves the pixel sharpness of our sprite art.
Canvas 2D Context scaling: Before we use canvasContext2d.drawImage()
to
draw sprite art, be sure to specify canvasContext2d.imageSmoothingEnabled = false
.
This allows sprite art to be scaled up correctly.
Start the web app by accessing index.html
from your web browser. (Compatible with Chrome 102 and Firefox 101.)
- This is a web app built on HTML5, JavaScript, and Sass/CSS.
- Developing the web app requires Node and NPM installed on your machine and a handy command line interface. (Bash, cmd.exe, etc)
Project anatomy:
- Source JavaScript and Sass files are in the
/src
folder. - Compiled JS and CSS files are in the
/app
folder. - Media assets are meant to be placed in the
/assets
folder, but this is optional. - Entry point is
index.html
.
Starting the project:
- Install the project dependencies by running
npm install
- Run
npm start
to start the server, ornpm run dev
to start the server in dev mode (i.e. source files will be watched and changes compiled dynamically.) - Open
http://localhost:3000
on your web browser to view the app.