Sprites, Sprites, Sprites

This is a repost of some posts to my old website from May to June 2007

Animated Sprites and Tile Mapping with Javascript

Based on a previous post about Javascript Sprite Animation  I decided a while back to create a little tile map and have a sprite move about it using keyboard controls.

Below is the original context:

Yesterday while surfing the net I found some very cool tile graphics. Luckily Danc the creator of these graphics released them to the open public. These will prove a rich learning resource for me.

Anyone who is interested might visit his blog at lostgarden.com

The game tiles are available from this post > more free game graphics

Javascript Sprite Animation with Tiles

* * *

Javascript Sprite Shading Algorithm

My curiosity led me to try my hand at simulating a light source with Javascript. While I had done this previously to fake a 3d lighting effect (use this link for the JS version) with just 5 layered graphics, I wanted to try a different approach this time.

My goal was to create the illusion of a light source fading with distance - much like a point light source, a light bulb for example.

The algorithm or one that is similar was probably used in tile based games that tried to simulate light sources. Some that I played myself were “Jagged Alliance 2″  and the original X-Com strategy games.

To see the algorithm in action click the link below:

Javascript Sprite Shading Algorithm

Tags: Games, lighting, tile graphics

Fake 3d Lighting Tutorial Part 1

How to create Graphics for Isometric Tile Games

This is a repost from my old playground website from May 19th, 2007.

Contents:

• Introduction
• Modeling The Object
• Scene And Model Preparation
• Adjusting The Render Frame
• Setting Up The Camera
• Adding Light
• Rendering
• Post Processing
• Final Thoughts

Introduction

I thought that it is about time I am doing a tutorial for modo. I have often stated I would eventually do one, now I am here to deliver.

In this tutorial I am introducing a technique to use modo to create sprites for tile based games. These sprites can then be used to generate a fake 3d lighting effect within the game, without the need for real 3d calculations. But that is part of a later tutorial really, today I just want to focus on the scene lighting, object and camera setup.

The results of this mini series can be used in traditional isometric tile games or adapted in other games as well. Right now this technique is in experimental stage, but I have made some demonstrators. One uses Javascript and the other uses Actionscript inside a flash movie:

• Flash movie
• Javascript implementation (currently no IE and Opera, sorry)
• download tutorial files (zip archive)

(more…)

Tags: Games, isometric, lighting, modo, Rendering, tile graphics