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

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

Title : JavaScript HTML Game Development Tutorial 2 - Drawing Stretched and Rotated Sprites on Canvas
Duration : 26:26
Channel : Dev Tigris
Label : javascript, canvas, sprite, draw, image, picture, rotate, tile, tiles, tileset, 2d, game, tutorial, how, Canvas Element, rpg, adventure, gamedev, game development, indiedev, indiegame, Video Game Development (Conference Subject), HTML5 (API), html, engine, platform, platformer, mario, zelda

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

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/dzuwLr8t/22/ Help me make my next JavaScript gamedev tutorial :) https://www.patreon.com/tigrisgames

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