Thursday, March 29, 2012

MochiLand: Tutorial: Custom Leaderboards With Mochi API (AS3)

Hi everyone, I haven’t found any example how to create a custom leaderboard, so I’ve decided to create one. I’m sure that it can be useful for you :) To follow this tutorial, you should be familiar with the information in the Mochi Media docs. With just a little bit of time, we will create something like this: Let’s go! We need 6 buttons: 2 function buttons (Load – to load our leaderboard, Send – to send the score)and 4 buttons to filter the score: daily/weekly/monthly/all We also need 3 columns (Text fields) to output name/score/date of players.

Main code:

initialization function
Read more: MochiLand: Tutorial: Custom Leaderboards With Mochi API (AS3)

Wednesday, March 28, 2012

Simulate radial gravity (also known as “planet gravity”) with Box2D as seen on Angry Birds Space

With the launch of Angry Birds Space I am sure you are wondering how to simulate planet gravity with Box2D.

And guess what… the basics are very easy.
First, in space there’s no gravity, so you will create a b2World world without gravity this way: [...]
Read more: Simulate radial gravity (also known as “planet gravity”) with Box2D as seen on Angry Birds Space

Quick comments about Unity and premium features

I’m sitting at the Seattle airport at the moment but I just wanted to clarify a couple of things about the announcements we made last night. Firstly we announced that we now have a partnership in place with Unity. Our teams working together will make their Flash export feature even better in the future. Big shout out to Ralph and the Unity for their awesome work on it!
The second thing we announced is a new premium feature model for the desktop browser runtime. This model is there to allow Adobe to make revenue from large, web-based Flash games like the ones that we expect to come out of Unity and other tools. Building a real game platform means that we have to be able to make revenue to fund its development. When talking with game companies at GDC, most prefer this model because they are much more confident about deploying to a platform that we are actively making money from.
So in a nutshell this is what the premium features mean. If you create a game that uses Stage3D GPU AND uses the Alchemy opcodes then you will need to get a license key from Adobe. Then if your game makes over $50,000 in revenue, your game will subject to a 9% revenue share that you will pay to Adobe. This does not apply at all to Adobe AIR. So you can use Stage3D and the opcodes as much as you want with no license. I have seen a lot of chatter online basically saying that people will have to pay a cut to Adobe in addition to the cut Apple and Google take. This is completely false. There is NO licensing needed when deploying to mobile.
I know there are a tons of edge cases here surrounding the use of the opcodes and I will be writing more in-depth about them very soon. Read through the two links below to get more details.
Premium features overview
Premium features FAQ
Read more: Quick comments about Unity and premium features

Tuesday, March 27, 2012

Quick Tip: A Simple Score Display for Flash Games

Almost all games out there use a scoring system to help players see their progress. It is essential to show the player’s score in a clear and fun way. In this Quick Tip we’re going to learn how to do just that!

Introduction

Click the button to add 20,000 points to your score:
In this Quick Tip we’re going to learn how to create a score display. To improve the quality of our display, we’re going to do two things:
  1. Add commas to our score, so it reads 1,600,000 instead of 1600000. This makes it easier for the player to figure out how big his or her score is.
  2. Make our score transition between values, instead of changing immediately. This gives the player a sense of achievement, because he or she actually sees his score grow.
In the end we’ll have a very simple and useful class, which you can easily use within any of your projects.
This class will only concern itself with displaying the score, not with calculating it.

Step 1: Creating Our Class

First off let’s create our class; I’ve named it ScoreDisplay: [...]
Read more: Quick Tip: A Simple Score Display for Flash Games

Monday, March 26, 2012

AIR 3.2 – Making an Endless Runner with Stage3D (Part 1)

With the introduction of AIR 3.2, Adobe has brought Stage3d to mobile devices. This means that flash developers can now leverage direct GPU Acceleration on Mobile Platforms (Android and iOS specifically). While this obviously enables 3d games, it’s also totally a huge boon for 2d games! There are already several 2d frameworks you can choose from which make the gpu quite easy to work with:
My personal favorite right now is ND2D.  So I thought it would be cool to take a look at how you might build an Endless Runner style game with this framework!

Files & Demo

Before we get started here’s some downloads to help you follow along:

Overview

The core classes which will make up this demo are*:
  • Game.as – Root display object, instantiates the other classes, and manages property injection
  • Background.as – Handle parrallax scrolling bg
  • Foreground.as – Handles ground tiles
  • PhysicsManager – Simple Physics engine, processes gravity and collisions
  • PlayerManager – Control Player animations and Keyboard controls
* Note: I’ve never actually built this type of game before. So, my approach may have some issues. However, this is about my 3rd iteration, so it should be ok ;)

Hello World2D

The first step to setting up ND2D is to create your World2D, and assign it an active Scene. In this example we’ll have just one Scene, our main Game: [...]
Read more: AIR 3.2 – Making an Endless Runner with Stage3D (Part 1)

How to create the sequel of a game

During these days I am playing with Box2D to create the sequel of SamePhysics.
It was my first Box2D game (you can download the source code here), people found it funny so I decided to make a sequel to improve some features I missed in the original game.
Since it’s my first sequel, I had to make some considerations before starting to code. That’s what I want to share with you.
1) Choose wisely which game deserves a sequel
This is the first thing, and the most obvious one. If people did not like the original game, probably they won’t like the sequel. Or, even worse, they won’t even look at it. With two sponsors, ranking higher than 3 and 3.5 respectively on Kongregate and Newgrounds and more than 2.5M views, we can say people liked SamePhysics
2) Fix issues according to the feedback
You don’t upload a game to Kongregate just to make it spread virally, do you? The most interesting thing about Kong is the qualified feedback players give to the game. The aim of a good sequel should be improving things people liked, and reducing things people did not like.
In the original game, one of the major flaws was the collision detection. Using the contact listener class included in Box2D, I was be able to see two boxes as “colliding” only if they collided for real in the physics world. Too bad the sprites on screen are just a visual representation of such world, so if two of them aren’t touching because there are, let’s say, two centimeters of empty space between them, there’s no way to show such a tiny distance on the stage. At 30 pixels per meter, I would need 0.6 pixels to show two centimeters, but I can’t do it.
Look: [...]
Read more: How to create the sequel of a game

Friday, March 23, 2012

How to Build a Python Bot That Can Play Web Games

In this tutorial we’ll explore the ins and outs of building a Computer Vision-based game bot in Python, which will be able to to play the popular Flash game Sushi Go Round. You can use the techniques taught in this tutorial to create bots for automatically testing your own web games.

Final Result Preview

Let’s take a look at the final result we will be working towards:

Prerequisites

This tutorial, and all the code within it, requires that a few additional Python libraries be installed. They provide a nice Python wrapping to a bunch of low-level C code which greatly eases the process and speed of bot scripting.
Some of the code and libraries are Windows-specific. There may be Mac or Linux equivalents, but we won’t be covering them in this tutorial.
You’ll need to download and install the following libraries:
  • The Python Imaging Library
  • Numpy
  • PyWin
  • All of the above have self installers; Running them will automatically install the modules into your \lib\site-packages directory and, in theory, adjust your pythonPath accordingly. However in practice this doesn’t always happen. Should you begin receiving any Import Error messages after installation, you’ll probably need to manually adjust your Environment Variables. More information on adjusting Path Variables may be found here.
The final tool we’ll need is a decent paint program. I suggest Paint.NET as an excellent free option, but any program with rulers that display their measurements in pixels can be used.
We’ll use a few games as examples along the way

Introduction

This tutorial is written to gave a basic introduction to the process of building bots that play browser-based games. The approach we’re going to take is likely slightly different than what most would expect when they think of a bot. Rather than making a program that sits between the client and server injecting code (like a Quake or C/S bot), our bot will sit purely on the ‘outside’. We’ll rely on Computer Vision-esque techniques and Windows API calls to gather needed information and generate movement.
With this approach we lose a bit of refined detail and control, but make up for it in shortened dev time and ease of use. Automating a specific game function can be done in a few short lines of code, and a full-fledged, start-to-finish bot (for a simple game) can be cranked out in a few hours.
The joys of this fast approach are such that once you get familiar with what the computer can easily ‘see’, you’ll begin to view games slightly differently. A good example is found in puzzle games. A common construct involves exploiting human speed limitations to force you into a less than optimal solution. It’s fun (and pretty easy) to ‘break’ these games by scripting in movements that could never be accomplished by a human.
These bots are also very useful for testing simple games – unlike a human, a bot won’t get bored playing the same scenario over and over again.
Source code for all of the tutorial examples, as well as for one of the completed example bots, may be found here.
Have fun!

Step 1: Create a New Python Project

In a new folder, right-click and select New > Text Document [...]
Read more: How to Build a Python Bot That Can Play Web Games

Creation of a rotating room with Flash and Box2D

I was thinking about a game concept which features physics and a rotating room, so I asked to myself how to make a rotating room with Box2D, and what is the best way to do it. These are the three ways I tried. 1 – “Manually” rotating a static room In my first attempt I built a static room with a compound object (see the theory of compound objects in this post), then I rotated the object at every frame. This is the source code: [...]
Read more: Creation of a rotating room with Flash and Box2D

Wednesday, March 21, 2012

Build a Stage3D Shoot-’Em-Up: Explosions, Parallax, and Collisions

This entry is part 3 of 3 in the series Build a Stage3D Shoot-'Em-Up
In this tutorial series (part free, part Premium) we’re creating a high-performance 2D shoot-em-up using the new hardware-accelerated Stage3D rendering engine. In this part, we’re adding eye candy with particle systems, a parallax effect, framerate-independent game loop timers, and collision detection.


Final Result Preview

Let’s take a look at the final result we will be working towards: a hardware-accelerated shoot-em-up demo that includes everything from parts one and two of this series, plus an efficient particle system for loads of eye-candy, framerate-independent timers for consistent movement, a subtle background parallax effect, the ability for entities to orbit one another, and a collision detection system capable of handling tons of entities.
Check it out: every explosion is slightly different!

Introduction: Welcome to Level Three!

Let’s continue to make a side-scrolling shooter inspired by retro arcade titles such as R-Type or Gradius in actionscript.
In the first part of this series, we implemented a basic 2D sprite engine that achieves great performance through the use of Stage3D hardware rendering as well as several optimizations.
In (the second part, we implemented a title screen, the main menu, sound effects and music, and an input system so that the player could control their spaceship using the keyboard.
In this part, we are going to add all the eye-candy: a particle system, complete with sparks, flying debris, shockwaves, engine fire trails and tons of explosions.
In previous versions, our game was framerate-locked and ran slower on old computers. To ensure the same timings for everything no matter what the framerate, we are going to change all movement and animation simulation units to account for the exact number of milliseconds that have passed since the previous frame. This way, whether you are running at 60fps on a modern gaming rig or your grandma’s old netbook, the game experience itself will be identical.
Finally, we’re going to program collision detection, which is required in nearly any game you can imagine. In order to trigger explosions and we need to be able to detect when a bullet has hit an enemy. While we’re at it, we are going to throw in a little bit of additional pizazz, just for fun, including a vertical parallax effect to the starfield background and an R-Type inspired orbiting “power orb” companion that circles the player’s ship.

Step 1: Open Your Existing Project

If you don’t already have it, be sure to download the source code from part two. Open the project file in FlashDevelop and get ready to upgrade your game!
This source code will work in any other AS3 compiler, from CS6 to Flash Builder. If you do use FB, be sure to include “-default-frame-rate 60” in your compiler options to ensure you get the best performance.

Step 2: Get the Party Started!

We are going to take advantage of the well-optimized internals of your entity manager class from last time by adding a simple particle system to it that still uses all the same basic entity and spritesheet functionality.
This way, we are still rendering the entire game’s sprites (ships, bullets and all) in a single geometry batch using a single texture. Therefore, much of the simulation of particles will be handled the same way as we currently handle the movement of the enemies. Most importantly, we are going to keep the number of draw calls to a minimum by inserting particles into our existing sprite batch.
The fist thing we need to do is define a few interesting effects. We’re going to have a little fun and create some cool-looking effects such as an expanding ring of blueish energy (a “shockwave”), a bunch of different fireballs that spin and fade out, some fast moving sparks that stay nice and bright and some metallic spaceship hull debris.
Create a new file in your project called GameParticles.as and implement the basic particle and explosion helper functions [...]

Read more: Build a Stage3D Shoot-’Em-Up: Explosions, Parallax, and Collisions

Monday, March 19, 2012

Compile Time Only

The const and final keywords only apply at compile time. Despite having written about const and final before, readers frequently ask me about these two keywords. Today’s article will answer the question and definitively show that these keywords only apply at compile time: not runtime. Let’s start with const. Consider this simple class: class MathConstants [...]

Read more: Compile Time Only

Quick Tip: Create a Typewriter Text Effect Class

In this Quick Tip, we’ll create a static, re-usable ActionScript class that will produce a Typewriter effect with a single line. Read on!

Step 1: Brief Overview

We’ll split a user defined string into an array, and then add the resulting letters to a TextField one by one using the Timer class.

Step 2: Typewriter Class

Our class will be static, which means it doesn’t need to be instantiated using the new keyword. To access a static class member, use the name of the class instead of the name of an instance. Create a new ActionScript file and write the following code:
package
{
 import flash.text.TextField;
 import flash.utils.Timer;
 import flash.events.TimerEvent;

 public final class Typewriter
 {
  /* Declare the variables and methods as static */

  private static var chars:Array; //the characters in the string
  private static var cLen:int; //length of the string
  private static var tf:TextField; //textfield to which the string will be written
  private static var timer:Timer; //pauses between writing each character
  private static var i:int = 0; //variable used to count the written characters

  public static function write(txt:String, txtField:TextField, time:Number):void
  {
   chars = txt.split(""); //split the string into an array of characters
   cLen = chars.length + 2; //length of the string
   tf = txtField; //assign tf to the text field passed to the function
   timer = new Timer(time); //set time according to parameter

   timer.addEventListener(TimerEvent.TIMER, writeChar);
   timer.start(); //start writing function
  }

  private static function writeChar(e:TimerEvent):void
  {
   tf.appendText(chars[i]); //writes a char every time the function is called
   i++; //counts the written chars

   if(tf.length == cLen) //check whether string is complete
   {
    timer.stop();
    timer.removeEventListener(TimerEvent.TIMER, writeChar); //clear timer
    timer = null;
   }
  }
 }
}

Step 3: Usage

The usage couldn’t be easier – just add the Typewriter.as class to your project folder and use the following code:
import Typewriter;

Typewriter.write('Text to Write', targetTextfield, 50);
That’s it, test your movie and you’ll see your TextField using the Typewriter effect.

Step 4: Example

I used the class in on this example swf so you can see the effect [...]
Read more: Quick Tip: Create a Typewriter Text Effect Class

Wednesday, March 14, 2012

Build a Stage3D Shoot-’Em-Up: Interaction

This entry is part 2 of 2 in the series Build a Stage3D Shoot-'Em-Up
In this tutorial series (part free, part Premium) we’re creating a high-performance 2D shoot-em-up using the new hardware-accelerated Stage3D rendering engine. In this part, we’ll extend our rendering demo by adding an animated title screen and menu, music and sound effects, and a keyboard-controlled ship that can fire bullets.


Final Result Preview

Let’s take a look at the final result we will be working towards: a hardware accelerated shoot-em-up demo in the making that includes an animated title screen and menu, sounds, music, and keyboard controls.
Click the logo to gain keyboard focus, then use the arrow keys to move and space bar to fire. Your shots will be reflected back at you once they reach the edge of the screen.

Introduction: Welcome to Level Two!

We’re going to continue making a side-scrolling shooter inspired by retro arcade titles such as R-Type or Gradius, in AS3, using Flash 11′s Stage3D API and the freeware tool FlashDevelop.
In the first part of this tutorial series, we implemented a basic 2D sprite engine that achieves great performance through the use of Stage3D hardware rendering as well as several optimizations.
These optimizations include the use of a spritesheet (or texture atlas), the creation of an entity object pool which reuses incactive entities instead of creating and destroying objects at runtime, and a batched geometry rendering system which draws all of our game’s sprites in a single pass rather than individually. These optimizations are the perfect foundation upon which we will build our high performance next-gen 3d shooter.
In this part, we are going to work toward evolving what is currently a mere tech demo into something that is more like a videogame. We are going to create a title screen and main menu, add some sound and music, and code an input system that lets the player control their spaceship using the keyboard.

Step 1: Open Your Existing Project

If you don’t already have it, be sure to download the source code from part one (download here). Open the project file in FlashDevelop (info here) and get ready to upgrade your game!

Read more: Build a Stage3D Shoot-’Em-Up: Interaction

Tuesday, March 13, 2012

fastSort, faster is better!

Today, Jackson Dunstan posted about how to use a profiler to get better performance in flash.
For this post he decided to show how to use TheMiner… awesome!
In this post he’s profiling two sorting method: native vector. sort, and Skyboy’s fastSort code.
At first I was impressed by the result of Skyboy. Then I realized two things.
First, The flash native sort REALY don’t like Number.infinity, negative infinity.
So when sorting and vector. with these values inside, it’s getting a LOT slower.
Where a standard vector could take 100ms to sort, one with infinity values in it can take up to 2000ms!!
The other thing is fastSort is using void (*) pointer everywhere.
So if we go back a few day to my previous (epic) article , we know that this is a really bad thing when casting from void to Number.
It’s allocating a LOT of memory. (5Mo/Sort on 50K elements)
So I decided to add a few hundreds lines to this class with already a lot of it (fastSort)
I added a specific sorting method for int, uint and Number to manage only typed values.
The result is quite amazing!
Native Vector Sort : 100 ms + 400Ko allocation
UnOptimized fastSort : 400 ms + 5Mo allocation
New Optimized fastSort : 20ms + zero allocation
Finaly, just before giving you the code, I want to invite you on a new little forum that focus on Performances, optimization, debugging and multiple other flash hardcore subjects.
Many of the most hardcore dev and blogger I know are already in or are going to join soon, so please be part of this and enjoy posting refreshing and brain teasing content!
The Hardcore flash forum
And now.. the way too many lines of code part: [...]

Read more: fastSort, faster is better!

Friday, March 9, 2012

Build a Stage3D Shoot-’Em-Up: Sprite Test

In this tutorial series (part free, part Premium) we’ll create a high-performance 2D shoot-em-up using the new hardware-accelerated Stage3D rendering engine. We will be taking advantage of several hardcore optimization techniques to achieve great 2D sprite rendering performance. In this part, we’ll build a high-performance demo that draws hundreds of moving sprites on-screen at once.


Final Result Preview

Let’s take a look at the final result we will be working towards: a high-performance 2D sprite demo that uses Stage3D with optimizations that include a spritesheet and object pooling.

Introduction: Flash 11 Stage3D

If you’re hoping to take your Flash games to the next level and are looking for loads of eye-candy and amazing framerate, Stage3D is going to be your new best friend.
The incredible speed of the new Flash 11 hardware accelerated Stage3D API is just begging to be used for 2D games. Instead of using old-fashioned Flash sprites on the DisplayList or last-gen blitting techniques as popularized by engines such as FlashPunk and Flixel, the new breed of 2D games uses the power of your video card’s GPU to blaze through rendering tasks at up to 1000x the speed of anything Flash 10 could manage.
Although it has 3D in its name, this new API is also great for 2D games. We can render simple geometry in the form of 2D squares (called quads) and draw them on a flat plane. This will enable us to render tons of sprites on screen at a silky-smooth 60fps.
We’ll make a side-scrolling shooter inspired by retro arcade titles such as R-Type or Gradius in ActionScript using Flash 11′s Stage3D API. It isn’t half as hard as some people say it is, and you won’t need to learn assembly language AGAL opcodes.
In this 6-part tutorial series, we are going to program a simple 2D shoot-’em-up that delivers mind-blowing rendering performance. We are going to build it using pure AS3, compiled in FlashDevelop (read more about it here). FlashDevelop is great because it is 100% freeware – no need to buy any expensive tools to get the best AS3 IDE around.

Step 1: Create a New Project

If you don’t already have it, be sure to download and install FlashDevelop. Once you’re all set up (and you’ve allowed it to install the latest version of the Flex compiler automatically), fire it up and start a new “AS3 Project.” [...]

Read more: Build a Stage3D Shoot-’Em-Up: Sprite Test

Tuesday, March 6, 2012

FREE Unity3D Mobile Basic (Android and iOS)

Unity3D

That’s exactly what your just read: the Unity3D Mobile Basic (Android and iOS), which costs $400 each,  is completely FREE until April 8th.  It is not a trial! Head to the Unity3D web store and download your copy.

The Unity3D Mobile Basic license allows you to develop games targeting the Android and the iOS platforms. Even though this is not a Pro license (which has lots of heavy weaponry), you still can use cutting edge technologies to create amazing games. Check this page to compare the different licenses.

Thanks Unity Technologies for that!

Read more: FREE Unity3D Mobile Basic (Android and iOS)

Introducing the new Adobe Gaming website

adobe gamingWe are very excited to share with you a brand new website we have been working on : gaming.adobe.com

We wanted to provide a place to discover what Flash enables for game development, showcase content but also a place to help developers get started with the technology.

And finally, a place to show the world what Flash can do. We hope you guys will like it.

Read more: Introducing the new Adobe Gaming website

Friday, March 2, 2012

Build a Classic Snake Game in AS3

In this tutorial I would like to show you how easy it is to create a classic “Snake” game in Flash. I will try to explain everything easily, step by step, so that you can develop the game further to your needs! The Game will be developed in AS3 and I will use the FlashDevelop IDE.


Introduction

The game won’t be complex. Whenever we hit a wall, it will restart the game. After eating an apple the snake will grow, and a ‘new’ Apple will appear. (Actually, it will be the same apple, but I’ll explain this later.)

One of the most important aspects of the game is the code’s reaction to KEY_DOWN events. The snake will only then change its direction after a tick has passed, not immediately after a keypress. This means that, if the snake is going right, and you press down and left very fast, the snake will go down, not down AND left. Without this ‘feature’ the snake would allow us to go left while we are going right, which would mean it hit itself.


Let’s Look at the Game Already!

Let’s take a look at the final result we will be working towards:


Step 1: Creating the Project

In FlashDevelop, create a new Project, and inside the ‘src’ folder create a ‘com’ folder. In the ‘com’ folder create a new class, and call it ‘Element.as’.

Set the dimensions of the project to 600x600px.

The FlashDevelop project structure

Step 2: Wait… What’s an Element?

The snake is make up of blue squares, which I call elements. We will create an Element Class, which draws the element. The red apple is going to be an element too, so we will extend the code with a few more lines.

Therefore we won’t create a new class for the apple. (But if you really want to, you can.)


Step 3: Writing the Element Class

The Element class creates a square. It doesn’t draw it on the stage, it just creates it. The registration point of the element – the position referred to by its x- and y-coordinates – is in the top-left.

After opening the Element.as you will see something like this:

package com
{
 /**
  * ...
  * @author Fuszenecker Zsombor
  */
 public class Element
 {

  public function Element()
  {

  }

 }
}

First we need this to extend the Shape class, so we can use the graphics object to draw the square. After this, create two variables: one for the direction (if it’s part of the snake), and one for the score value (if it’s an apple), and then change the parameters of the constructor function: [...]

Read more: Build a Classic Snake Game in AS3