jellysmash_tuto01

Jelly Smash part 1 : Game Tutorial for Flash-Stage3D & ND2Dx

0 Flares Twitter 0 Facebook 0 Google+ 0 Pin It Share 0 Email -- Filament.io 0 Flares ×

Welcome to my first tutorial. We are gonna learn how to make a simple and fun game with Flash ActionScript3, Stage3D and ND2Dx, a simple, fast and efficient framework for making 2D games and apps with Stage3D.

This tutorial is driven by three goals:

  • show how to make a game in Flash & Stage3D.
  • Show how to use the new framework ND2Dx I’m currently working on. Of course it could also be easily translated to use a different Framework like Starling or Genome2D as most of the techniques here are present and/or adaptable to those frameworks.
  • And finally, see for myself how ND2Dx is doing in a real case scenario in order to refine its internal functioning if needed.

The full source code can be downloaded on page 2.

What you will learn

  1. how to setup ND2Dx (a couple of lines of code)
  2. how to use a texture atlas (a big texture containing various smaller textures)
  3. how to create and use components (and the simple yet powerful idea/concept behind a “component based system”)
  4. how to make an object follow your mouse at a certain speed
  5. how to make an object look towards your mouse
  6. how to start making a game :)

Well, that seems a lot for a first tutorial but it’s gonna be fine, you’ll see.

The idea

First we need an idea. It is often the most difficult task as it is the main concept that will lead the rest of the development of your game. But don’t you worry too much, the hardest part is to actually start, no matter how good or bad your idea is, it will change and change over the course of your development.

Here I’m going to borrow an idea I saw a couple of years ago, I unfortunately don’t remember the author but that main idea is not from me. The author had a website with lots of small and cute games made in Flash. If someone recognizes himself in that very succinct description, please don’t hesitate to shout it out.

The concept is the one of a small character that you control with your mouse and that can jump and smash bugs that are moving around on the screen. Of course Toby (our character) cannot be touched by the bugs and needs to avoid them at all cost. So how do we smash them then ? well simply by jumping in the air and smashing them while landing. But to jump, Toby needs to gain momentum, and the more momentum Toby gains, the higher he is going to jump and the bigger will be the surface he is going to affect when landing. Of course, and to make it a little bit more challenging, when Toby is gaining momentum he cannot move.

That’s it for the idea, I think it’s a really fun one and I’m sure some of you have already seen it somewhere as well.

The prototype

Now that we have our main idea/concept, let’s start working on our first prototype. The principle here is to have a proof of concept as soon as possible, without worrying too much about the game in its “whole” (art, sound, UI, features, …), just the most basic stuff. Here is a preview of what you’ll be doing in the first part of this tutorial :

Get Adobe Flash player

Click to gain momentum, release to jump.

The tools

  • For coding, I’ll be using FlashDevelop, a really outstanding IDE for ActionScript 3, Haxe, Javascript, XML, … if you are not using it, I highly recommend you to try it out. If not, any code editor will do.
  • Flash Professional CS5.5: it is not absolutely needed but I think everyone is more familiar with it to compile into a Flash movie.
  • TexturePacker: to pack my art assets into one big atlas.

ND2Dx

This will be our main framework that acts as an interface between the low level Stage3D API and us. To have a simple and, I believe, a good idea of what it is, I invite your to read this post, but I’ll explain everything you need to know throughout this tutorial.

Keep in mind that ND2Dx is not yet finished, it will still change and improve. Even though the accent is put on simplicity, I’m also developing it with a goal in mind: logic. By that I mean that I’ll try to avoid as much as possible “comings back and forth” of data throughout the pipeline, and as I add new features, things might need to change to integrate them in a more logical and efficient way.

That being said, and if you are ready, let’s move on to the code.

0 Flares Twitter 0 Facebook 0 Google+ 0 Pin It Share 0 Email -- Filament.io 0 Flares ×

Pages: 1 2 3 4

Leave a Comment