Loading...

JavaScript HTML Game Development Tutorial 2 - Drawing Stretched and Rotated Sprites on Canvas

47,240 views

Loading...

Loading...

Transcript

The interactive transcript could not be loaded.

Loading...

Rating is available when the video has been rented.
This feature is not available right now. Please try again later.
Published on Jan 29, 2015

Source code: http://www.tigrisgames.com/src

This is my next HTML canvas game engine tutorial in the series. So let's continue our journey on our way to learning how to develop a 2D tile mapped HTML game engine (In the style of Mario platformer, but with a few unique twists of our own.) This Java Script game development tutorial was created to help learn how to draw image sprites / pictures on JavaScript canvas, in preparation to making your first JavaScript game engine.

First we will make sure our canvas is set up, this is a must for game dev. as we deviate from HTML div element-based sprites you may already be familiar with. (We want to use HTML5 canvas tag this time, not DIV elements as sprites!)

JavaScript objects are important. And so, after our JavaScript canvas has been set up, we will create a new JavaScript object conveniently called "Sprite" and add methods draw and rotate. Original size, stretched and rotated 2D tiles (32 by 32 pixels) are covered.

It's a good gamedev tutorial if you're starting out to make an 2D platformer or an adventure RPG game but still need to brush up on JavaScript Canvas code.

As a bonus I decided to include an animated sprite, which is just a tile with some sprite rotation applied to it, using JavaScript's setInterval time function.

Source code from this sprite drawing tutorial is available here: http://jsfiddle.net/gregsidelnikov/dz...

Help me make my next JavaScript gamedev tutorial :)
https://www.patreon.com/tigrisgames

Loading...

Advertisement

to add this to Watch Later

Add to

Loading playlists...