SoundQuest, a journey in the extraordinary world of game development and Stage3D

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

Today I pluck up some courage to try presenting a project I (and many others) have been working hard on for the past few months: SoundQuest (you can play it there: https://apps.facebook.com/soundquest/)

Originally proposed for a replacement and enhancement of the famous “snake game” on Nokia mobile phones, it has developed progressively to a totally different game with a dragon as a main character, 4 different worlds to discover and many items to collect.
I’ll also try to show how, from a simple retro flash game, we went to a full HD game using the latest Flash11 technologies (Stage3D through ND2D framework)

soundquest_lvl02

Actual game screenshot (level 2)

 

First idea

One of the first and main idea behind the game was to enhance the music based on how well the user was playing.
Each level has its own soundtrack composed by a band named “Tha Trickaz”. I was pleasantly surprised when I first heard of their music and the soundtracks they would provide us with. This gave me positive energy as it’s always nice to know that you’re working with talented people.

We had different ideas on what we wanted to base the “playability” on:

  • speed of the snake (can be raised or lowered by picking up special items)
  • energy of the snake (it loses some when it hits obstacles)
  • time elapsed without hitting obstacles

I really liked the idea because it could potentially deliver another kind of experience to users but I remained sceptical as I felt this could quickly become complicated to implement into the game.
At this stage of the process, we were still thinking of making a snake-like game.

Approaches

Our first approach was to disassemble each soundtrack in “loops” and assemble them progressively in real-time during the game. The idea was kind of sexy as this would give us some kind of flexibility on what to play or not and when.
When” was important as we wanted to make the music reflect as much as possible what was happening on the screen (or vice versa)
But this idea was soon rejected as we would have lost the particularities of each soundtrack (progressive start, quiet moments, change of rhythm, change of melody, …)

The second idea was to build the levels based on the soundtracks. This was much easier to implement but we were losing the main concept of the game.

Our third idea was to take the second idea because we were running out of time, money, patience and mental stability. And to keep a little bit of the “progressive music” idea, we “simply” decided to add effects on the soundtrack when the dragon hits and obstacle.

soundquest_lvl01

First prototype

Below is a screenshot of one of our first prototypes.
The main square is the game area. The green pixels represent the snake. The red ones, the items to collect to get bigger. There is an energy bar going from red to green and in the bottom, we can see the whole level.
The idea was to add different kind of items, obstacles (static & dynamics) and also an automatic horizontal scroll to oblige the player to move forward.

soundquest_2nd_prototype

Of course this was just a prototype, we wanted to give this game a totally new look with nice HD effects, fullscreen support and a cool retro touch mixed to it.

My work on this project

“Technical director” was the first role I endorsed for this project.
I had to translate the mechanics of the game into structures that developers (flash & php) could use and communicate with. I needed to visualise the whole process (game mechanics, facebook api, …) to see all the interactions between the different structures and data.

In about the middle of the project, when it was already well advanced (we already had abandoned the snake concept and were working on the dragon, with different worlds and HD graphics), I had to take over the work of our flash developer.
Having already developed a good part of the game engine, I didn’t feel like taking over his code, for many reasons. So I started from scratch by building a generic 2D map editor using ND2D (Stage3D).
This map editor would allow me to set the base of the engine while building a tool that would greatly simplify the creation of each level.

WorldGameMaker

This is how I called the editor. It is written in AS3 and compiled in AIR with support of Stage3D and uses ND2D as a 2D framework for Stage3D.
It exports the level data in a xml file so it can be used for many types of 2D games.
It took me a couple of weeks to build. I actually build it while coding the engine as both are tightly linked.

The reason why I chose ND2D over Starling is that the former was more powerful when I started working on it. I also liked the material approach of it and it was packed with much more features than Starling.

soundquest_worldgamemaker01

Features

I’m quite satisfied with what I have done on this editor, it has all the basic features one developer could need to start building maps/levels for his/her game.
There are still a couple of features that I would like to implement and the approach I took on a couple of things (like animated textures) could be improved. I had very little time and I always chose the path that would get the job done as soon as possible. But I think it can still be used quite intuitively, as long as you have some basic knowledge about game programming.

Amongst other things, here are the most notable features of the editor:

  • edit world boundaries
  • edit grid properties
  • layer system (it actually appeared quite late in the process)
    • really helpful as it allows to separate the different elements of a map
    • it also allows for optimizations during the rendering if one uses the same texture on every object of a same layer (batching)
    • can be used as a parallax system based on the movement of the camera (ex: layers in back can be set to follow the camera to a certain extend, giving an intuitive parallax effect)
  • object system, everything on a map is an object:
    • Sprite2D: a simple image object
    • ParticleSystem2D: a particle system that uses the graphic card to compute the transformation of each particle (almost 0% of cpu used)
    • CouldParticleSystem: a particle system that uses Sprite2DCloud (ND2D object) to render particles (uses more cpu but we have total control over each particle)
    • CollisionSystem: an object that allows to set up collisions vectors for an object (see picture below)
    • TriggerSystem: an object that is triggered (once or every time) when an other objects (can be the player) is colliding it
    • RibbonTrail: a special object that I used to build the tail of the dragon. It’s kind of a dynamic ribbon.
  • prefab system: you can create a prefab object out of any other object. This allows reuse of sets of objects (like a mountain made from several other Sprite2D objects)
  • properties panel: every object has its own properties that can be edited
  • textures panel: load/unload textures, link atlases to them, preview them.
  • animated textures panel: create animated textures from a texture that has an atlas linked to it. It currently automatically create an animation from a set of textures that has a same name and that ends with a number (ex: anim1_0001, anim1_0002, …)
  • intuitive editing of objects: this took me a while to figure it out (especially for the objects with nested objects inside of them). You can scale and position objects with your mouse as you would do it in any other image editor.
soundquest_worldgamemaker02

CollisionSystem object in action, simply set up the boundaries of an object

Final result and social approach

After months of work and changes, we were finally seeing the end of it. The concept had changed, as well as the whole atmosphere of the game. We started from a simple retro-snake-like game to a full High Definition kind-of-adventure game using the latest Stage3D technology.
Most of the engine was ready and the editor was stable, we could start making the levels and work on fine tuning the gameplay. We didn’t have much time left, we were already super late, so a couple of things that we wanted to add had to be left away. There are still a couple of improvements that could be made to the engine and the map editor but it works well and I’m pretty proud of them.

soundquest_lvl03

In total, we have 4 different levels with different atmospheres, several items to catch (points, speed, slow, souls and special items), meteors that fall from the sky, obstacles to avoid, special zones to recharge the energy of the dragon and a dragon that has 4 different states with 4 different visual effects (see “dragon on fire” above) for each of them.

Social approach and the “soul” system

The game is only playable over Facebook, for several reasons I won’t explain here (mostly marketing reasons), but one good thing about it is the social approach you can add to the game. Like every game on Facebook, you can compare your score with your friends or with everyone. But we wanted something more.

As it is only playable alone, we wanted to allow people to change the gameplay of a map to a certain extend. With this in mind, we added the “soul” system: every time you die, your soul appears on the map (were you died) and will be available for your friends to pick up. By doing so, they earn the life that you lost. This brings a whole new area of possibilities for the players as they only earn 1 life every 12 hours. By dying, you not only lose a chance to win but you give it to your friends.

Another cool thing about this soul system is that you can leave a message to the friend that will pick up your soul.

Credits

Enough of writing, this was a really big, dense and exhausting project. There are so many things I learned, and now, with a bit more distance, I can see that I’m happy I did it and (that doesn’t happen often) I’m proud of the result.
So let’s give some place to the people who worked on the project:

Uzful: French Communication Agency (conception and project management)
Reed.be (which I’m part of): Belgian Communication Gang (conception, creation, production and project management)

Thanks to everyone.

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

8 Comments

  1. Sorry, this page isn’t available

    The link you followed may be broken, or the page may have been removed.
    =/

  2. indeed, it was a game made for a marketing campaign and is not online anymore. I don’t think we will put it online again as it requires some work. Sorry for that.

  3. Sergi Kolesnik (@SergiKoles)

    Do you plan to work on the editing tool and release it on a subscription/pay basis? If only it could be used for mobile Air projects…

  4. I’m not sure yet how I will release it but I currently am working on the ui part and soon will show how far I’m at the moment. Of course, one of my big goal is to allow users to build air projects directly with it (or with the help of another tool like FlashDevelop)

  5. Sergi Kolesnik (@SergiKoles)

    Thomas, that would be totally awesome! 🙂

    Cheers

  6. 🙂 cool
    I’m preparing a play at the moment so I don’t have all the time I want but this is one of my top most priority project

  7. Jens Eckervogt

    Hey Thomas, nice grid 2D – How do you get large grid. I am always hanging of stupid problem with cacheAsBitmap or Vector. – I am really sad because i have always problem with largest grid if i start air app than it hangs of loading and drawing grid. How do you get fast loading grid. Please tell me! How do i get fast loaded grid like your loaded grid.

    I am developing as 3D Game Engine with 3 panels ( front, side and top ) like Valve Hammer Editor Looks.

    Thanks and sorry for disturb to your development 🙂

    Best regards from Germany

  8. Hey
    sry for the late reply, I shamefully abandoned this blog for too long.

    I’m simply using the very simple LineTo method from the graphics object of a Shape, without cacheAsBitmap. It is taking quite some cpu when drawing, that is why I’m disabling the small lines (there are more of them) when moving.
    Depending on the size of the area you want to draw your lines to, you could use a BitmapData. I think it would be much more efficient, especially using a lib that draws lines without antialiasing. The problem is that I think BitmapData are still limited to 4096px * 4096px, it could be a problem on large “retina” screens.
    Hope it helps a little bit…

Leave a Comment

*