AS3 Tile Engine Dev

Counting down.

2010-04-21T19:03:00.000-07:00

The countdown to the Nadir beta is underway, but in the mean time, we are able to show you some of the new updated graphics. This week, we will be busy updating some of the games environments. Previously, the environment textures in our original examples had been created by another artist and had been used to create a proof of concept. They were always going to change and when we did update them, we were able to create a much deeper, immersive environment. This was mostly due to the increase in the environment resolution. Fig. 1. shows a Nebula scene with an enemy ship ahead.

Fig. 1. Inside a gas giant with a ship in the distance

We are also beginning to add graphics to our menu screens. We wanted a subtle yet engaging title screen so after some initial designs we were able to create some concept art for the title screen. We wanted movement in this screen so we have used a filter to provide a subtle overlaying motion effect. Fig. 2. shows our initial title screen concept art.

Fig. 2. Concept art for the Nadir title screen

We have started work on the concept art for the HUD. We wanted to get a modern or futuristic feel to the HUD so we started looking at some of the new laser technologies being used in modern cars. We also looked at some of the movie interpretations of futuristic HUD interfaces and decided that we would try to get the feeling that the HUD was being projected onto the inside of your cockpit windshield. We really liked the effect of a semi transparent, neon hue and this started to evolve into the following concept screenshot, Fig. 3.

Fig. 3. Developing the HUD

We want to thank everyone who has already contacted us about our beta program, I suspect that you guys will be beating us at our own game in no time. There are still available beta test slots open for anyone who would like to join in with us from June 1st 2010. To be part of the beta testing team, simply drop us an message from this contact form and we will get back to you.

Gary Paluk

Nadir Beta Testing Announcement

2010-04-14T16:48:00.000-07:00

Today, I am happy to announce that, as described in our previous post, we have been working on a new browser title. This game is called Nadir and is a multi player, 3D space shooter where you take control of a space craft and engage in a dog fight style battle in timed rounds.

Luckily for you, we have decided to conduct open beta testing of the game from the 1st June 2010.

If you are interested in becoming a beta tester, you my apply by dropping us a message (including a contact address) at our contact page. A shortlist will be made and, if successful we will send you instructions of how to access the game, along with your username and password.

To give you an idea of the game (very early and poor quality), here is the game in action: http://www.youtube.com/watch?v=v7QUBAdTdTo

Regards

Gary Paluk

Sharp shooter

2010-04-13T04:42:00.000-07:00

After a development delay making my own C.V. website, teaching some programming and doing a short contract. I am currently learning the more in depth workings of the Smartfox Client Server technologies and I have decided to create an initial, smaller, more simple game, to better understand the development process of creating such a large Flash project on my own.

I have based my initial game design on a multi player dog fight, where users log in, enter or create a new game room and then fly around and shoot their opponents. This will make use of some of the core technologies that I will base my time based game on. The games are timed and a user may enter the game at any time during an air battle, similar to the technique used in games such as the multi player, Call of Duty 4. I have used the PureMVC framework to create my overall architecture, Smartfox for the back end comms, I have included database drivers and written custom log in and server side extensions. For the 3D ships, I created a low poly ship in Blender, exported it as a 3D Studio Max model. I then textured it in Paint Shop Pro 7.04.

The server is now communicating positional data to all other users in a given room, this will allow the simple interpolation of positional values since there are no obstacles within this space environment.

The most difficult part up to now has been PureMVCs state machine integration, since I think it has a relativly steep learning curve, however once mastered, it's invaluable. Smartfox is great, but lacks a neat way of handling event objects without wrapping existing SFSEvent objects. This makes it neccessary to know (or learn) the SFSEvent objects' API, since there is no auto completion for this type of object in FlashDevelop.

Overall, creating such an advanced game in Flash is proving to be very enjoyable. I am having fun working on it, I'm learning alot and everything seems to be on track and will, undoubtably, be a great first step to bringing these technologies together for my MMORPG.

I have included a few screen shots of my development process below.

Gary :)

Quick blitting, matrices and deformations

2009-05-08T13:07:00.000-07:00

I've been busy working on some of the blitting techniques that I spoke about sometime earlier in this blog. I have concentrated on making things quick and flexible and arrived at a point where I can blit around 1800 tiles at 60fps using my fast drawing method or a couple of hundred tiles that can be ran through a matrix with rotations and scaling applied. There is still alot of room for optimizations in the later but I aim to have a rounded off blitting system within the next few weeks. I will be concentrating on getting some of the more advanced features impemented over this time. I will then need to make some decisions about the tile engine itself. This will include a few main areas such as the intended audience of the tile engine and its format, its requirement within my MMORPG, what technologies I wish to use along side my tile engine, such as external libraries, image creation programs and how my own workflow will benefit from these. Do I need to create custom editors and tile tools for such things as pallette mapping, how will my environments be created etc... there are many considerations.

As you see in the screenshot above, I am applying tiles to a single bitmap image allowing me to do some cool things such as deformations, exporting screenshots in PNG or JPG formats and various other things usually associated with C++ development on more highend systems. I have also started to develop the time-based animation part of the library which will use trigonometry to apply velocities to entities to determin their positions using the clients maximum possible framerates.

Gary Paluk

Java extensions in SmartFox

2009-04-30T05:34:00.000-07:00

So... I want to build the logic of my game on the server, it needs to be quick and I also need to access a MySQL database to store information about my players. What do I do? I could use PHP / ASP etc but there is a more secure option. These are known as SmartFox extensions.

Extensions for SmartFox can be written in AS1, Java or Python. Since the Server itself is written in Java and I have been advised to use Java. A friend and I opened up Eclipse and setup a new workspace, we grabbed a copy of the MySQL drivers and made an attempt to log in on my SmartFox application, get data from the MySQL database and return the data to the player. After a short time we had it working. There were a few steps in order to make this happen and luckily these are outlined in the SmartFox Server documentation files.

Smartfox allows the use of ActionScript objects which make moving data to and fro very neat. I think that this is an extremely useful and powerful concept which I will continue to learn and hopefully I'll be writing the server logic to my game very soon.

Gary Paluk

Drawing API and back to PureMVC

2009-04-27T15:39:00.000-07:00

After some R&D of various types of tile based engines I started work on a simple bitmap drawing API. I had deduced that nearly all tile engine require tiles, tilesets and tilemaps so I drew up some class diagrams and started coding. As you may imagine I aim to make the tile engine render as quickly as possible so I took measures to keep things fast. First of all I did not use Sprites as the foundation of the tiles in fact I use only one display object datatype and that is a bitmap. The bitmap defines my tileset and stores the width and height of the tiles within it. I can create Tile objects from this class or by passing a reference of the tileset to an instance of a Tile class. The tile class simply acts as a pointer on the tileset meaning that a tile doesn't contain any graphic at all.

I bench marked my early engine by blitting 1400 tiles of 50px * 50px to a secondary bitmap and got a steady 60fps on my dev machine (The swf was running at 60fps). I used a primary and secondary buffer by using the bitmap lock( ) and unlock( ) functionality. I have optimizations to make but this was a good benchmark and led me to making a demo that used large areas of alpha transparency. This also showed good performance but there is a many optimizations I wish to make so I will provide benchmark test results after I make these changes.

Today I set up a new project environment in FlashDevelop and I started to work on the PureMVC framework in order to create a basic structure for my game project. I also spent time looking over a couple of tutorials regarding UI implementations since I want to build from FlashDevelop rather than having to build my app from the Flash IDE. Even though I have worked on and contributed to the AS2 PureMVC framework, I ported both the AsyncCommands classes and the StateMachine classes from AS3 a few months ago, I do have more to learn about the UI outside of the Flash IDE and I will need to keep reading since most tutorials are written in Flex or exceptionally vague.

Anyway, as soon as I get the UI implementation how I want it I will start to roll out some technical demos but until then I'm going to keep reading vague tutorials until something clicks :D

Gary Paluk

Papervision + many sprites = slooooooow

2009-04-24T17:21:00.000-07:00

After finally getting a 300tris COLLADA file imported into my 3Dworld, I duplicated it about 20 times and immediately started to see a significant slowdown in the flash client. I was still running the skybox demo but I hadn't even added the world tiles. I had suspected that this would be the case and means that I have eliminated the concept of using papervision to create a fully 3D tile environment in Flash. The main reason for this is that I wish to have many sprites handled in my tile engine and lagging graphics are simply unacceptable so now I have decided to look at a few other common tile engine models. Pseudo 3D tile engines, top down perspective and an isometric perspective.

I have the weekend ahead of me so I'm sure that I'll be able to get some good R&D done over the next couple of days. I shall be looking more into isometric engines since they are great for pseudo 3D visualization but they can also be made to run very quickly.

Gary Paluk

Papervision Skybox

2009-04-22T17:20:00.000-07:00

Tonight I set about getting the COLLADA model rendered in Blender. No sooner had I created my model and tried to export it, Blender popped up a message saying that I needed Python installed in order to export. I find this a bit strange since COLLADA is a simple XML file so I'm not sure why this is a drama. I downloaded and installed Python and played around with the settings in an attempt to export my model. Anyway, to cut a long story short, I wasn't having any luck. Rather than not make a blog post today I continued on with a little bit of code that I wrote in my lunch break at work earlier.

I had created a cube example with and I decided I would progress it into a skybox demo. The purpose of a skybox it to give a 3D panoramic view of an environment by attaching images onto the inside of a very large cube or sphere primitive. The games 3D environment sits inside this skybox and moves relative to the player camera and never rotates. This means you can never arrive at the face of the actual cube itself and will give the illusion that there are constant objects or scenery that appears to be very far into the distance.

I started with my cube and created a materials list consisting of six panoramic images. I then mapped each image to it's relevant face on the cube. This is very simple but it is important to note that the cube must not draw the faces that might obscure your view since then you must always be looking at the inside of the box. You must also map the images to the inside faces of the cube.

This was a really fun thing to do and I think it creates a great effect. It would be possible to improve this demo by changing the viewport render modes and increasing the tri count on the cubes polygons but I will wait till I make the real thing.

Until then you can check out the demo here.

Gary Paluk

PaperVision 3D Tile demo

2009-04-21T14:32:00.000-07:00

This evening I managed to get some work done in PaperVision 3D. This was really nice to play around with and obviously it gives instant visual results to marvel at. As I said in an earlier post I want to create COLLADA models as tiles but first I thought that I might test out the initial rendering speed of PaperVision with various numbers of planes to get an idea of PaperVisions rendering speeds. I was pretty happy to see that I had added 400 planes before I started to see any real noticeable slowdown. This was somewhere in the region of what I had expected, so I'm happy with my first test results.

You can see a demo here.

The above demo shows just a grid of plane primitives with random height values. I then rotate the main camera that I offset from the map slightly. I'm sure that there is a lot to learn about PV3Ds render pipelines so once I'm up to speed I might be able to make things run a bit faster but I can already see potential here to keep on experimenting. Soon, I will also look at storing tiles in proxy objects in order to cache the tile data for reuse when I come to moving the camera but my next step is to get a simple textured cube exported from Blender.

Gary Paluk

Web Server active

2009-04-20T16:51:00.000-07:00

Today I got a few hours to work on a couple of fun things. First up, I continued to get SmartFox server set up and had some success in making my desktop machine run as a web server. The purpose of this was to eliminate an unknown and to allow beta testers to run the tile engine application client from my web server. This was a nice move forwards since I've never set something up like this before (I had to jump through hoops with router settings dyndns setting etc), but it's all working well and I got to use my amazing 'enter room' application to verify it working over the Internet and some friends came and entered the room lol. As you can imagine this wasn't very interactive but It didn't matter, it proved that SmartFox Server was handling the connections as it should.

Next up, relating more to the tile engine, I checked out the latest version of PaperVision. I'm guessing that anyone reading this now may be wondering why I'm looking at PaperVision but I'm still exploring the possibilities of various technologies in which to base the final tile engine. I have dabbled in PaperVision before but only a simple tutorial but I have written a simple 3D engine before. Although it was limited it did apply a transformation matrix to handle the vector data and camera views, it had simple back face culling and a very simple demo can be found here.

I will probably spend tomorrow evening attempting to export some simple COLLADA data from Blender. Ideally, I hope to get some sort of simple grid array of planes rendered and if I can add a simple texture then I'll be more than happy and if I can add some movement then that would be even better. I'll keep you posted.

Gary Paluk

You are now connected

2009-04-19T16:18:00.000-07:00

Today I got to sit down with SmartFox server and get my teeth into making something happen and I'm glad to say that I did make something happen. I mostly played around with the SFS API and got to know it a little. I setup some connections. I ran clients over my home network, wrote an app that showed people entering a room, allowed users to create rooms etc so I'm happy that everything makes sense and is going smoothly.

Couple of little things about the SmartFox Server API that can get slightly annoying...There is only one type of event object, good old SFSEvent, that holds specific data for what should be abstracted event data, instead you access the events param object. Whilst this is not such a bad thing, it's not correct and the other thing is that the AS3 examples are all written in flex so I found myself looking at the AS2 code, cross referencing it with AS3 syntax from the API docs and then finally I laid down some code. These are minor issues though and other than these, the API is intuative and well documented so overall very nice to work on.

I am slowly moving towards sending data objects over to other users and then i'll be looking at interpolation techniques. This should allow the movement of player sprites over laggy connections to be kept smooth and keep things looking nice. This will use the time-based techniques that I spoke about in my earlier post.

Gary Paluk

SetInterval and time based animation

2009-04-18T09:20:00.000-07:00

I'm starting to see a trend around the Flash community about time based animation in Flash and members stating that setInterval is the equivalent of time-based animation. This is incorrect so here is where I answer the questions once an for all.

SetInterval is called on an Event.ENTER_FRAME event if it has expired. This means that a target client running at 5fps has the potential to loose 19ms ( or even more with application lag) per frame. The real concept is to actively look at how much time has passed between the last frame update and the current frame update, we will then have a figure to use to do our time based math, so here is the code:


package  {
 
 import flash.display.DisplayObject;
 import flash.display.Sprite;
 import flash.utils.getTimer;
 import flash.utils.Timer;
 import flash.events.TimerEvent;
 
 /**
  * ...
  * @author Gary Paluk
  */
 public class TimeBasedAnimation extends Sprite {
  
  [Embed(source = '../lib/sprite_sheet1.png')]
  private var m_SpriteSheet: Class;
  private var m_Timer: Timer;
  private var m_UpdateInterval: int;
  private var m_sprite: DisplayObject;
  
  public function TimeBasedAnimation( ) {
   m_Timer = new Timer( 20 );
   m_Timer.addEventListener( TimerEvent.TIMER, onTimer );
   m_Timer.start( );
   m_sprite = new m_SpriteSheet( );
   addChild( m_sprite );
  }
  
  private function onTimer( event: TimerEvent ): void {
   var totalInterval: int = ( getTimer( ) - m_UpdateInterval ) ;
   // move the sprite at 50 pixels per second
   m_sprite.y += 50 * ( totalInterval / 1000 );
   m_UpdateInterval = getTimer( );
  }

 }
}

Gary Paluk

A Serving of SmartFox

2009-04-18T06:13:00.000-07:00

Last night I dived into the world of SmartFox server. I've always wanted to use a socket server for a Flash game and about 5 years ago I managed to make a simple 2 player, turn-based game with a nice guy over at the FlashKit forums called random10122. Anyway, we played it a few times and it was fun but it was built without any rooms or lobby areas so users would of had to have ran the server on thier own machines thus it was never a viable project. Today, however, we have quite a few options; SmartFox, Union, ElectroServer and others. These servers are much more complete than the one that our old game was built on and since my tile game will be built with a multi-user system in mind I started looking at the different APIs. A friend of mine is currently working on a game built on SmartFox server, so his advice weighs out the differences in the APIs and I'm going forward with SFS.

This might seem like I'm going off track from tile engines, but bare with me. The main point of this topic getting introduced here is that I needed to identify the separation between the engine and the control system and also identify where they may cross over. This has a lot of bearing on many factors especially the collision detection and if multiple sprites can be controlled from various locations with PCs of various performances and latency thrown in for good measure then the earlier I think about this the better.

I'm going to start with the PC speeds issue. If over in the Venezuelan capital, Caracus, some kid is playing on their 500MHz Celeron ( jealous friends ) and some MIT computer science guru on his 80 core IBM super computer both decide to play my game at the same time, will there be a difference in frame rate? Yes.

What I need to do is make the sprites reposition based on the time that has passed between the renderings rather than using an Event.ENTER_FRAME event. This will have 2 positive impacts on the game, firstly, we can now make the game update the graphics as fast as the machine will allow us too and of course it will fix the PC performance issue.

So, If our sprite is to move 10 pixels per second in a straight line and our computer is updating the screen every 200ms, we can safely say that 1000 ms / 200 ms = 5 updates in that 1 second duration. Now we can now move our sprite by 10 pixels / 5 updates = 2 pixels per update. This is termed time-based animation and will be at the heart of my tile engine and will be my first project to fully incorporate this style of rendering graphics.

Gary Paluk

In the beginning...

2009-04-17T08:10:00.000-07:00

I am embarking on a rewrite of an AS2 tile engine that I made in March 2008 whilst I was sunning myself in Thailand. Since then I worked at a small Flash development company making betting games where I spent some time learning design patterns, the PureMVC framework and AS3. In fact the company I worked for allowed me to contribute to PureMVC with ports of the ASyncCommands and StateMachine classes :D

I'm starting a new year stint working on my own full time project and it shall require an AS3 tile engine. I've been involved with tile engines since the very early Flash days ( Flash 4 ) where MCs were used to represent tiles but Flash has evolved a lot since then and now that AS3 and its DisplayObject data types are available there is a much more realistic concept of creating a tile engine with the capabilities of it being able to run the other required parts such as pathfinding & line of sight algorythms, AI routines, battle mechanics and time-based animation routines... the list goes on.

Today is just an introduction and I'm simply performing R&D over at GameDev but I shall be posting progress reports and info regarding the build of this engine but I can give you an insight to my thoughts so here goes.

The first part of this project is to research fast ways of doing things, luckily for me it seems that the method of copying pixels that I used in my old tile engine has been tested thouroughly and I was on the right track since Michael Grundvig of Electotank had done some testing with the same copypixel technique that I used in my AS2 engine and his findings confirmed that it is a very fast method for drawing images to the screen.

Next up, my new design pattern knowledge came into play when I was looking at the way that older machines used a block of memory to store the tiles. Back then tile structs were created to point at the positions in memory that a particular tiles data existed at. My thoughts were to do the same thing. I could create a Tileset object to act like a memory block that holds a DisplayObject. Tile objects could then be instantiated with a reference to its Tileset object. The Tileset object is in charge of the tiles height and width meaning that a Tile object has no graphical asset to hold and no knowledge of its width or height, this should be very fast and easy on RAM allocation.

I am going to check out some source code of other tile engines to determine how they have approached this and I will let you know my findings in my next post.

Have fun and keep checking back :D

Gary Paluk