Javascript tile engine tutorials

Because I won't be using my old website anymore, and I found it a waste to just delete these articles, I've moved them to here. Comments are disabled, but I left the comments already posted underneath the articles. If you still want to send me a mail for some reason, you can find my email address on my homepage (I won't reply to (Javascript-)code problems anymore, though). Also note that some code might be obsolete (e.g. console.log works way better than the approach I took) but most should be still fine.

A thanks to everyone that actively participated in this whole project!

- Niels (11 dec. 2012)

Javascript tile engine: map basics

tutorial, tile engine, javascript
1 comment

I've had some people emailing me about the tile engine source code after I took the demo offline. I figured there must be more people out there interested in this topic, so I decided to write some articles about Javascript tile-based engines. In this first installment, we'll cover the map basics.

Javascript tile engine: map with images

tile engine, javascript, tutorial
2 comments

In this second part, I'll expand the code from the previous article to work with actual images instead of text. We'll also change some code, optimizing the engine.

Javascript tile engine: player and movement

javascript, tile engine, tutorial
3 comments

In this third tutorial, we'll cover the player's character and movement. At the end of this article the engine will have a player-controlled character walking across the map!

Javascript tile engine: player animation & collision detection

javascript, tile engine, tutorial
0 comments

The fourth article in the tile-engine series! Today we'll discuss collision detection and player animation. We'll do the walking-animation first, because it requires quite some change in our core functions.

Javascript tile engine: events

javascript, tile engine, tutorial
0 comments

Hi, and welcome to article 5! Today we'll discuss events; events are scripts that are executed at a certain moment, for example when the character activates a secret door. Scripts are a vital part in any engine because they allow interaction with the player.

Javascript tile engine: models

javascript, tile engine, tutorial
1 comment

In this article we'll implement models (sprites). This'll put a seperation between the player mechanics and the sprite on the screen. This also makes it way easier to implement NPC's (which I'll cover in the next article article #8, I promise!).

Javascript tile engine: data files

javascript, tile engine, tutorial
9 comments

In this article we'll implement data files. This means that we'll move the map data, tiles, models and scripts of any one map into a single file which we'll be able to load dynamically.

Javascript tile engine: NPC's part 1

javascript, tile engine, tutorial
9 comments

In this article I'll cover NPC (Non-Player Character) basics, as well as some changes in the engine's core functions. In the end we'll be able to load NPC's into the engine and draw them on the screen.

Javascript tile engine: animated tiles

javascript, tile engine, tutorial
0 comments

In this article I'll show you how you can (relatively) easily implement animated tiles. At the end of this article the engine will be able to draw flowing water and animated flowers.

Javascript tile engine: speed, tile size & floating tiles

javascript, tile engine, tutorial
7 comments

Today we'll cover different tile sizes (no more fixed 16x16 pixels!), floating tiles and game speed. I'll also cover 'general' tiles, to make game development easier.

Javascript tile engine: NPC (inter)action

javascript, tile engine, tutorial
12 comments

In this second article on NPC's, we'll add two NPC events: one that enables the player to talk to the NPC, and another that makes NPC's walk around randomly.