This week’s Flash Game Friday winner is Catnarok 2: Longcat Rampage by Antoine Litzler!

If you are an internet geek, you’ll love this game. Memes and parody abound as Antoine manages to pull in countless familiar characters into one hilarious game!

You are the longcat, and you are definitely on a rampage. You shoot fire and even lasers from your eyes at incoming enemies. As you progress, more and more familiar memes are revealed. Antoine added a directory of the characters he used in his games, and their origins (giving proper credit).

Catnarok 2: Longcat Rampage, in movie terms, would be referred to as “An irreverent good time”- congratulations on winning Flash Game Friday, Antoine!

Get to Know Antoine Litzler

Tell me about yourself- how many people are on your team? Where are you based?

My name is Antoine Litzler, but you might know me as my fancy online name “Hyakkidouran”, which is probably the only thing close to cool I will ever get. I am a froggie and am based in Frogland (some call it France).

This might be dissapointing to some people, but I am not much more than a bedroom programmer working alone. I wish I could say I have a dynamic and great team I am working with, but life has not put other crazies like me on my way yet (or a pile of gold to hire crazies), so I have to make do with my own hands.

How long have you been making games? What did you do before?

I think I started about 5 years ago with (what else?) a dress up game. But, even though my games got more complex, this always has been amateur or semi-pro (if that word even has a meaning) work, as I could not make enough money to consider quitting a regular job. Even today, I still have my day job as a computer developer/administrator for a huge cultural association.

I am probably not being original by saying that being able to live from making what I do on my own would be awesome. But I still have to thank my day job for providing me with food and licenses for Photoshop and Flash CS until now. Without this food and software, I would not be making games..

What was your inspiration for “Catnarok 2: Longcat Rampage”?

Wasn’t it obvious? Memes.

Internet memes are very diverse and range from being really funny to being pure crap. I really like the older memes in particular, like “Longcat” or “All your base are belong to us”, which spawned pretty funny and interesting content.

But now it seems that young teenagers attempt to artificially create memes for the sake of “internet fame”, which usually results in crap. The good memes were usually born from a natural selection process of something that is actually funny, and that was how it worked in the early 2000′s.

The idea of the game was to adapt the “internet legend” of Longcat, while giving the opportunity to kill some bad memes.

The first Catnarok was kind of a prototype for that idea. When I saw that the prototype did fairly well despite its simplicity, I decided it was worth it to invest the time to get closer to my original vision.

Any major challenges or hurdles during development?

…Everything?

Joke aside, I think the hardest was that I had to stop the project for extended periods of time as my job or other IRL things pulled my leg. Coming back to the code after 1 month of not writing anything was a nightmare.

I also was pretty scared of the potential copyright issues.

Since there are sites out there which make money from referencing memes, I figured that, if I traced/redrew over the meme pictures, I would probably be fine (and I probably am since mochi approved the game), but I admit this worried me through all the development. I was scared that all that work would go for naught if some guy came and said “sorry, this parody, that is like the over 9000 there already are, is copyright infringement because it is more visible than the others”. ?_-

I also can’t do music, meaning I have to rely on the generosity of people online for it (usually throught people on Newgrounds audio portal or classic public domain music). All this creates kind of a legal mess that I am pretty scared of and it might be the greatest obstacle there is to moving to actual commercial game development.

Fair use is a blurry line, and it seems I did not cross it on that particular project, at least to the eyes of the users…this is quite a relief.

What types of games do you like to create the most? What types of games do you like to play the most?

Being a bedroom programmer, I have to create games I can grasp entirely on my own.

This is why I create usually shoot-them-ups or puzzle games. Those are simple enough for my monkey brain.

I have little interest in studying 3D because I think it is out of my reach (for now?), plus I am actually quite the japanese anime fan, and I really love the way 2D looks and feels.

Considering this, you will not be surprised to hear that I am a great fan of Japanese 2D fighters like Guilty Gear, Blazblue or Arcana Heart. In general, I can enjoy anything with good 2D graphics, unless the gameplay really sucks.

I am also quite the fan of Starcraft and Deus Ex. And I also have some very obscure games that I have been loving since 20 years and still play sometimes, like “Ristar” or “Zoom!” .

How long is your game creation cycle? What is your process?

I am that kind of person who usually has 20 funny and unrealistic ideas per minute, so the main part of the process is to filter those ideas by wondering “what can I, with my skill and time currently at hand, actually do?”. Once I can envision an idea that is simple enough to code, but still feels like it will be fun despite my limited ressources, I start working on it.

After that, it usually becomes pretty chaotic, since I am forced to code and draw when I can, with sometimes huge periods during which I can’t do anything on the game. Talking about a “process” would be complimenting this mess really.

Are there any game developers that you admire or consider “rock stars”?

Daisuke Ishiwatari, who is litterally a developer AND a rock star.

I am also quite a fan of the early work of Peter Molyneux on the PC, before he started doing this Fable-RPG thing. Even though I don’t play his games as regularily as the ones I quoted earlier, all of them are really good, intriguing games that qualify as “unique experiences”.

I also admire all indie developers. Period. I realized how much it takes balls to do games, and everyone taking this risk without stable financing deserves respect.

What is it about making a new game that you enjoy most?

Hard to tell. What is certain is that the moment your prototype runs well enough, allowing you to play the game from start to finish, do feel really special. The polishing and balancing that comes after that is actually way more tedious (but unfortunately necessary).

Do you have any hot projects you’re working on right now?

Do I! I virtually have a pile of projects waiting that I can’t wait to recede.

I think that the hottest news is that I have been working on creating a completely original license, based on my love for anime. I took a few clues from Mochi’s very own Mr. Shen, and thought it would be a great idea to have a cross-media character that I could use for games, comics, or virtually anything I want.

This character is “Serina, the star guardian”, a character heavily influenced by the magical girl genre, but with a bunch of personnal twists that hopefully will make her unique. Besides expressing my anime love, I am also creating this character for the sake of all the kids in my family, which makes this project even more stimulating and interesting.

Overall, I have great hopes for the future, and maybe this feature of Catnarok 2 will contribute to that extra boost I need to start my own thing into full steam. And if it’s not… well, I am ready to keep doing my dirty things in my bedroom at night. :)

Thanks Antoine, and congratulations again on winning Flash Game Friday!

© Colin Cupp for MochiLand, 2012. | Permalink | 3 comments

Add to del.icio.us

Search blogs linking this post with Technorati

Want more on these topics ? Browse the archive of posts filed under Developer Feed, Developer Spotlight, Flash Game Friday, Game Showcase, MochiLand Topics, Publisher Feed.

This week’s Flash Game Friday winner is Greens Survive Only When Reds Die by Oleksii Zagorodnii!

You have to love a game with instructions in the title, and this title pretty much says it all- Greens Survive Only When Reds Die!

The object is to get the green guy through the door. Problem is, you have to make sure to kill the red guys in order to get the door open…without killing the green guy, of course!

Greens Survive Only When Reds Die is a great platformer witha unique gameplay twist- congratulations Oleksii!

Get To Know Oleksii Zagorodnii

Tell me about yourself- how many people are on your team? Where are you based?

There is one person in my team, this is me :). I live in Kyiv, Ukraine. I do programming and art by myself, but I know nothing about writing music, so the music for most of my games is created by Alexander Ahura. He is a really great composer and I’m happy to work with him.

How long have you been making games? What did you do before?

I’ve been making (actually, trying to make) games since I was in school. Back in those days I used Game Maker and then BlitzMax, but never actually finishing anything. I completed my first Flash game in the summer of 2010, and since then I have created six more games, all of which can be found at my site: friedpixel.com.

What was your inspiration for “Greens Survive Only When Reds Die”?

I really love platform games and wanted to create something original and fun in this genre. The idea of playing with lots of characters at the same time looked promising. However, I saw a few released games where players controlled several characters simultaneously, so I decided to add a twist, and make some of these controlled characters ‘bad’, setting a task for players to kill them.

Any major challenges or hurdles during development?

The main challenge for me is my laziness. I’m not a full-time game developer. I have a dayjob and sometimes it’s very difficult to start working on a game, especially when the prototype and all of the experiments are done and there are lots of things and polishing to be done to complete the final version.

What types of games do you like to create the most? What types of games do you like to play the most?

I love to create different arcade and platform games. I also enjoy playing platform games in Flash and on mobile devices the most. Sometimes I also play some big AAA games on XBox, the last were Gears of War and Skyrim.

How long is your game creation cycle? What is your process?

Usually it takes 2-3 months to finish a game. There is not so much work in the type of games I create, but I can’t spend a lot of time on them. There is no particular process; I just do the things that need to be done to create the game.

Are there any game developers that you admire or consider “rock stars”?

I really admire indie developers who create original and fun games, especially those who share their experience and help less experienced game creators. I would name Adam Atomic (Canabalt and Flixel, my favorite Flash engine) and Johnny-K (Cover Orange, Ragdoll Cannon).

What is it about making a new game that you enjoy most?

At the first stages of development it’s really fun to try new things and see how game mechanic starts working. Later, when the game is released, I like to read reviews from players on different sites. It’s really great to know that some people from the different corners of the Earth like your creation.

Do you have any hot projects you’re working on right now?

Everyone is making mobile games now. I thought that I also may try to create something in this field and started new arcade shooter for iPhone with my friend. Unfortunately, we didn’t make it as quickly as we would have liked, and it’s still a little too early to draw any conclusions about the success of the game.

Thanks Oleksii, and congratulations again on winning Flash Game Friday!

© Colin Cupp for MochiLand, 2012. | Permalink | 2 comments

Add to del.icio.us

Search blogs linking this post with Technorati

Want more on these topics ? Browse the archive of posts filed under Developer Feed, Developer Spotlight, Flash Game Friday, Game Showcase, MochiLand Topics, Publisher Feed.

This week’s Flash Game Friday winner is Orbits by Andy Brown!

Orbits is a really well-made physics-based puzzler. You are a ship, and you have to propel yourself to the target on the planet. As you complete this task, you advance to the next level. You start in Autumn, and work your way through Spring, Summer, and Winter, each with their own design and music.

So, just aim for the target right? Well, it isn’t that easy. There are a certain amount of moves it should take you to complete each level, and you gain points for coming in at or under “par”, so keep an eye on your click level. If you go over your click level it is very bad for your score!

Obstacles also get in your way, where you need to go around them just to get close to the target. Coins are available throughout the game, which you can collect. You can use these coins to upgrade your ship. There are also 20 different achievements waiting to be unlocked!

Orbits is a well-made game with great artwork and fun game mechanics. Congratulations Andy Brown!

Get To Know Andy Brown

Tell me about yourself- how many people are on your team? Where are you based?

We have three people on our team right now, Sam, Chris, and myself. Sam does artwork and design, Chris does the music, and I do the programming and whatever else is needed. I currently live in Northern Idaho, USA.

How long have you been making games? What did you do before?

My first released Flash game was in 2006, but I started making games a few years before that, and designing them long before that just drawing out concepts on paper. I didn’t do anything before making games, I was making them while I was still in high school.

What was your inspiration for “Orbits”?

This was actually the first game that I’ve made where I did not come up with the original concept. I asked the designer / artist of the game and he said: “It just.. came to me *adjusts sunglasses*”.

Any major challenges or hurdles during development?

There were a few new concepts in this game for me that took me awhile to get working how I wanted. The gravity mechanics and the bouncing mechanics took me the longest to get right without over complicating the whole process.

What types of games do you like to create the most? What types of games do you like to play the most?

This is a really hard question for me, as I like playing and making almost all genres of games. I think I have the most fun making games with randomly generated content, because then I get excited when seeing something new every time I playtest it. Lately I’ve been playing a lot of Skyrim, so I will just leave it at that for what I play the most.

How long is your game creation cycle? What is your process?

My game creation cycles vary for every game, and gets shorter as I master more techniques. Orbits took us nearly six months to make and polish. My process usually consists of coming up with a game idea,  brainstorming with my co-workers and friends, writing down the best ideas and then just start making the game, adding in new ideas and crossing out others as the game continues development.

Are there any game developers that you admire or consider “rock stars”?

There are actually quite a few! Shigeru Miyamoto, John Carmack, Gabe Newell, and Tim Schafer would be the ones I admire the most. What is it about making a new game that you enjoy most? My favorite moment is when I’m struggling with a new idea and I finally get the idea working in the game. It’s a very rewarding feeling to see your ideas come to life.

Do you have any hot projects you’re working on right now?

Yes, I do! I’m currently working on a couple projects.

The first one is a platformer where you play as a ninja and is planned to play like a distance game where you must keep running to the right with randomly generated obstacles, collect coins, and purchase upgrades.

The second project is a RPG where you are stranded on an island and need to survive by foraging, crafting, and killing wild animals. This one started as a Ludum Dare 22 project and I had so much fun with the idea that I decided I would flesh it out and make a full game out of it.

Thanks Andy, best of luck to you and the team on your upcoming projects!

© Colin Cupp for MochiLand, 2012. | Permalink | No comment

Add to del.icio.us

Search blogs linking this post with Technorati

Want more on these topics ? Browse the archive of posts filed under Developer Feed, Developer Spotlight, Flash Game Friday, Game Showcase, MochiLand Topics, Publisher Feed.

This week’s Flash Game Friday Winner is Raze 2 by Juice-Tin!

If shooters are your thing, this will be your new favorite game. Raze 2 really delivers as a big-time shooter with a ton of polish and tight gameplay.

You are a soldier in the Raze unit, and your mission is to eradicate aliens from the planet. You have a wide range of weapons to select from, and as you play you can upgrade your soldier with a variety of options. Speaking of upgrades, you can also upgrade a bunch of abilities and items using an in-game credits system- so you can really customize the game and your soldier to your liking!

All of these upgrades, amazing artwork, and superb gameplay make Raze 2 a natural choice for Flash Game Friday. Congratulations Juice-Tin!

Get To Know Juice-Tin

Tell me about yourself- how many people are on your team? Where are you based?

As of right now, our team consists of one programmer (myself), and two artists. They take turns making games with me, as their both also busy with school/work. Right we’re located in Canada, Ontario/Quebec and are planning on forming a company soon and expanding to a much bigger staff. Games will still be created by only two people, but a bigger staff means we can work on multiple games at once, on multiple platforms!

How long have you been making games? What did you do before?

Funny thing is that all three of us always wanted to be artists, including me! I’ve always loved drawing and expressing my creativity. When I finally tried programming in highschool I fell in love, and have been creating games just for fun ever since. It wasn’t until about 3 years ago that I finally decided my work was good enough to release publicly.

What was your inspiration for “Raze 2″?

One of the things we really wanted to achieve, was the big environments found in the Halo games, and the very vibrant and almost exotic areas from the game Bullet Storm. We really wanted it to feel like you were just a small person in a huge world, despite being limited to a small map. As you can also probably tell, we’re both fans of the leveling up and upgrading systems found in many shooters today. It was these new PC/Console first person shooters that made us strive to make the biggest and best game we possibly could. Since we can’t yet make a full game for PC/Console, we wanted to achieve as close to it as possible with Raze 2.

What are the major improvements / changes compared to the original Raze?

There’s really too many to list here. We read almost every possible comment about Raze 1, and because of the success it had, really wanted to fix as many problems people had with the original Raze as possible. We first started with a completely new game engine, created from scratch. Raze 2 now features tighter controls/camera, smarter AI, and a 100x better game engine, that allows an incredible amount of detail in the maps and effects (including waterfalls, sparks, etc) without causing slowdown for decent computers. Aside from the technical point of view, the levels are much more detailed and better designed for a shooting type of game. Oh yeah, there’s also over 26 more weapons than Raze 1, 9 modifying equipments, 7 abilities, a deep and detailed campaign with cut-scenes, and up to 4 separate teams allowed in game play.

Any major challenges or hurdles in creating Raze 2?

To be completely honest, no, actually. Creating Raze 1 was more or less a nightmare. Being our first game we were doing a lot of trial and error. We learned an incredible amount from not only our Raze 1 experiences, but all the feedback we got from it’s players. With everything we learned, we were actually able to create Raze 2 quite smoothly. In terms of the engine, I already created one slightly similar when I created the engine for Siegius. So really, from everything we did prior to starting Raze 2, we ended up being 100% prepared for everything ahead of us, as we’ve tackled it all before, and now knew the proper ways to do it all.

Can we expect another (future) installment in the “Raze” series?

Yes! We have plans for both a Raze 3, and an eventual Raze Online. Because Addison is busy with school, we’d first like to focus on Raze 3 to complete the story, fix any remaining problems people had with Raze 2, as well as introduce a bunch of really cool, and crazy ideas that couldn’t make it into Raze 2, including many new ones. Our goal is to get Raze as perfect as possible, so when we have the time to work on the Online version, we’ll be able to make it both massive, and as enjoyable to all as humanly possible!

What types of games do you like to create the most? What types of games do you like to play the most?

All, and all. I really enjoy all types of games. From RPG’s Shooters, and Strategy games, to the silly games, Viva Pinata, Party games, etc. One of my long term goals actually, is to create a game of every genre. I would normally not want to create sequels, as you don’t learn too much or get to challenge yourself as much when you stick to the same type of game (Raze being an exception of course because of how well it was received, and how fun it was to make). But I would really love to explore every possible Genre. So far I’ve created Shooter, Strategy, Puzzle, Adventure/Rpg, and now we’ve got a beat’em’up, and eventually a 3rd person Racer in the works. I feel every new type of game you create, furthers your skill, and teaches you many more techniques that can be used in other games. It’s this reason I would like to continue making a variety of games, along with Raze.

How long is your game creation cycle? What is your process?

Depending on the game size, we try to take about 1 month for small games, and 4 months for larger games (such as Raze 2). I used to do all my work on my main computer, but purchased a new Laptop strictly for game development, which helps keep my personal data and work data separate. As of now the development process is the same as any, work as much as possible while keeping in good contact with your team. However because Raze 2 was such a huge project, I took a 6.5 hour bus ride to stay with Addison for 1.5 weeks. Surprisingly, we did about a month’s worth of work in just that week and a half. It really is incredible how much more gets accomplished when working side by side with your partner.

Are there any game developers that you admire or consider “rock stars”?

Absolutely! I really admire the developers that start off small, and are able to expand into a well known and established company. One that I really appreciate is the work of Tom Fulp and Dan Paladin at The Behemoth. They both started as Flash developers and went on to create the excellent XBLA title ‘Castle Crashers’. Another would be Edmund McMillen and Florian Himsl, who also went from Flash developers, to remaking their game Super Meatboy for PC as well as multiple consoles. Their newest game Binding of Isaac, is actually a Flash game that was ported to PC via Steam. This is direction I’m trying to go in now, and would love to achieve some day.

What is it about making a new game that you enjoy most?

Well really, who doesn’t love creating new things? Much of it comes from the positive feedback when other people play my game. It really makes you feel good, knowing many people really enjoy something you created. It feels good to make people happy, it feels great to know they are thoroughly entertained, and it’s nice to sit back at the end of it all, look at your work and what you’ve accomplished, and think “I did that :)”.

Do you have any hot projects you’re working on right now?

Yes! I’m currently working on a Gladiator game with Sleva (artist from Siegius). The game has been put on hold for the holiday month, but should be finished sometime soon. Screenshots are available at Juice-Tin.com.

Thanks Juice-tin, can’t wait to play your upcoming Gladiator game as well as Raze 3!

© Colin Cupp for MochiLand, 2012. | Permalink | One comment

Add to del.icio.us

Search blogs linking this post with Technorati

Want more on these topics ? Browse the archive of posts filed under Developer Feed, Developer Spotlight, Flash Game Friday, MochiLand Topics, Publisher Feed.

In this tutorial, you will learn:

• Basic for loop usage
• Basic array usage
• How to find the distance between two points
• How to use Math.atan2() to have MovieClips follow each other
• How to fire projectiles
• How to split a velocity vector into two perpendicular lines using sine and cosine
• How to create objects from custom classes

Introduction

When learning Actionscript, or any programming language for that matter, I find it best to create specific engines that employ a variety of techniques and functions. This way, you are not only learning how to use these features, but you are also experiencing a pragmatic use for them. In this tutorial we will be creating a class for an ally AI that will locate the enemy nearest it, chase it, and shoot it. This is used in just about any game where there are characters not controlled by the player. Take, for example, a tower defense game. The towers created do not simply attack any enemy they want. They usually attack the closest. However, there are some games where you can choose to have them attack the quickest enemy, or the one with the most health, or whatever it may be. But for now let’s concentrate on distance.

Now, what if there are three allies (let’s call them followers for now) and two enemies, one of which is really far away? The tutorial you are about to read is designed so that rather than all three followers clustering up on the closest enemy, two will attack it and the third will set off for the far one. Furthermore, what happens when a third enemy is spawned when all this is going on? Well, rather than the follower by itself (which may be closer) going out to attack it, one of the two that are attacking the same enemy will leave and target the newfound enemy. This optimizes the strategy of the followers so no enemy is left alone while there is a surplus of followers elsewhere.

Rather than just talking about what we’re going to do, let’s actually do it. Sometimes I prefer to just see the source code and play around with it rather than just following a tutorial. If you want, you may download a heavily-commented copy of all the code down below. Without further ado, let’s begin the tutorial.

Download Source

Step 1: Setting Up the MovieClips

There are three MovieClips essential to this tutorial. First, we need the followers and the enemies. We also need some sort of projectile or bullet for the followers to shoot. For the sake of example, I am programming this tutorial in a way that the user can create followers and enemies by clicking buttons at the bottom of the stage. So now we’re up to five MovieClips. Name them Bee, EnemyBee, Ball, BeeButton, and EnemyButton. Below are my five MovieClips in their respective order:

When saving each as a symbol, be sure to check the “Export for Actionscript” box and keep the class name the same.

Step 2: The Arrays

Now that we have our MovieClips, we need a place to store them. Open up the Main Timeline’s Actions Panel (F9) and input the following code:

var beeArray=[];
 
var eArray=[];
 
var ballArray=[];

What’s happening here is we are creating three arrays to store our objects: one for all the bees (followers), one for all the enemies, and one for all the balls being shot. These arrays are going to be accessed a ton of times throughout the tutorial, so if you need to brush up on any of the arrays basics be sure to check out this tutorial

Step 3: The Enemies

The enemies are much easier to program, so we’ll start with them first. Create a new custom class called EnemyBee (or whatever necessary to match the name of your enemy MovieClip) and start off with the following code:

package {
 
import flash.display.MovieClip;
 
import flash.events.*;
 
public class EnemyBee extends MovieClip {
 
private var r:Object;
 
private var angle:Number;
 
private var rot:Number;
 
private var health:int=1;
 
private var speedX:Number;
 
private var speedY:Number;
 
private var dist:Number;
 
private var reload:int=50; //reload timer for shooting (don't worry about this for now)
 
public var isTarget:int;
 
public function EnemyBee() {
 
addEventListener(Event.ADDED_TO_STAGE, beginClass);
 
}
 
private function beginClass(event:Event):void {
 
r=MovieClip(root);
 
addEventListener(Event.ENTER_FRAME, eFrame);
 
r.eArray.push(this);
 
this.x=stage.stageWidth+this.width;
 
this.y=Math.random()*400+20;
 
var h:Number=Math.random()*stage.stageHeight;
 
angle=Math.atan2(h-this.y,-this.x);
 
this.speedX=Math.cos(angle)*2;
 
this.speedY=Math.sin(angle)*2;
 
this.rotation=angle/(Math.PI/180);
 
rot=Math.random()*4;
 
}
 
private function eFrame(event:Event):void {
 
}
 
}
 
}

Now this is a lot of code all at once so let’s go through it line by line. Lines 6-13 declare variables which are more or less self-explanatory. The main one to note here is the public variable isTarget. This variable isn’t accessed at all by EnemyBee, but from the followers. It is used to tell how many bees are following the EnemyBee. But let’s move on for now.

In the beginClass function, line 20 places EnemyBee inside eArray (on the Main Timeline) through the use of r (the root of the MovieClip). Below, the initial x and y coordinates are set to be just off the right side of the stage anywhere from the top to the bottom. Variable h is the destination of EnemyBee and, using Math.random(), is different every time. The next line uses a function called Math.atan2(). Most of you trigonometry aficionados know that the atan2 function, being a variant of the arctangent function, returns the angle (in radians) between the positive x axis of a plane and the point constructed by the given coordinates. For now, all you need to know are the parameters. They are as follows:

Math.atan2(destinationY-this.y , destinationX-this.x);

It seems strange, but just remember the y comes first. By using the atan2 function we now know the angle between the point EnemyBee is going for (in this case h) and itself. But how do we make it so that our object moves towards it? That’s where the sine and cosine lines come in. By taking the cosine of the angle we can find the horizontal speed the object must take. Similarly, we can use sine to find the vertical speed. You can replace the 2 at the end of each line with a larger or smaller number to increase or decrease the speed (respectively). Finally, we rotate the object to face its target once again using angle, and then assign rot (the rotational speed) a random number from 0-3.99999 (this is used later on).

Now we can edit the eFrame function. So within the brackets, place this code:

this.x+=this.speedX;
 
if (this.health>0) {
 
this.y+=this.speedY;
 
if (this.x+this.width/2<0) {
 
r.eArray.splice(r.eArray.indexOf(this),1);
 
removeMe();
 
}
 
} else {
 
if (r.eArray.indexOf(this)>=0) {
 
r.eArray.splice(r.eArray.indexOf(this),1);
 
}
 
this.rotation+=5+rot;
 
this.y+=3+(3-rot/2);
 
if (this.y-this.width>;stage.stageHeight) {
 
removeMe();
 
}
 
}

First, the object moves horizontally. Next, if its health is greater than zero (meaning it is not dead) it will also move vertically and if it manages to survive the followers and go offstage to the left, remove itself from eArray, and then call the removeMe() function which we will declare in a little bit. In case EnemyBee IS defeated, however, it will first check to see if its index in eArray is at least 0. A useful fact about arrays is that “if” an object isn’t in the array at all, its index is -1. Through this “if statement” we are effectively checking to see if EnemyBee is in eArray so we don’t accidentally remove it twice (that would result in an error). The next few lines are pretty much self-explanatory.

The last piece of code for EnemyBee is the removeMe() function. Here it is:

private function removeMe():void {
 
removeEventListener(Event.ENTER_FRAME, eFrame);
 
r.removeChild(this);
 
}

This last part is easy. First the event listener is removed, and then the object itself is deleted. That’s all we need for EnemyBee. Now we can start the hard stuff! (:

Step 4: The Followers

Now it’s time to get to the heart of the tutorial: creating the followers. Create a new custom class for your followers (in this case it’s called Bee), and input this code:

package {
 	import flash.display.MovieClip;
 	import flash.events.*;
 
 	public class Bee extends MovieClip {
  	private var r:Object;
  	private var c;
  	private var max:Number=Number.MAX_VALUE;
  	private var speedX:Number;
  	private var speedY:Number;
  	private var speed:Number=2;
  	private var angle:Number;
  	private var reload:int=50;
  	public function Bee() {
   	addEventListener(Event.ADDED_TO_STAGE, beginClass);
  	}
  	private function beginClass(event:Event):void {
   	r=MovieClip(root);
   	addEventListener(Event.ENTER_FRAME, eFrame);
   	r.beeArray.push(this);
   	x=275;
   	y=245;
  	}
  	private function eFrame(event:Event):void {
  	}
 	}
}
}

You’ve seen all this code already in EnemyBee so I’m not going to explain it all again. The only exceptions are c (which will be explained in a bit) and Number.MAX_VALUE, which can simply be thought of as infinity.

There’s a lot of code in the eFrame event, so let’s do it all in pieces. First, we need this:

if (r.eArray.length!=0) {
 
//paste all the following code here
 
}

This line of code tells us if there are any enemies on stage or not. Without it, we would get errors. Within the brackets, place this first bunch of code:

if (r.eArray.indexOf(c)<0) { //if c is NOT in eArray...
 
for (var i:int=0; i<;r.eArray.length; i++) { //for every object in eArray...
 
var obj=r.eArray[i]; //assign address of object to obj
 
var distX:Number=this.x-obj.x; //horizontal distance between self and obj (the enemy)
 
var distY:Number=this.y-obj.y; //vertical distance between self and obj (the enemy)
 
var dist:Number=(distX*distX+distY*distY); //overall distance using distance formula
 
if (dist<max&&obj.isTarget==0) { //if distance < max and obj has no followers...
 
max=dist; //assign distance to max (the new shorst distance)
 
c=obj; //assign address of object currently being tested in c
 
}
 
}
 
if (r.eArray.indexOf(c)>=0) { //if c is in eArray...
 
c.isTarget++; //tell c (EnemyBee) that one more bee is following it
 
} else { //if c is NOT in eArray...
 
max=Number.MAX_VALUE; //reset max to maximum value
 
for (var j:int=0; j<r.eArray.length; j++) { //for every object in eArray...
 
obj=r.eArray[j]; //assign address of object to obj
 
distX=this.x-obj.x; //horizontal distance between self and obj (the enemy)
 
distY=this.y-obj.y; //vertical distance between self and obj (the enemy)
 
dist=(distX*distX+distY*distY); //overall distance using distance formuala
 
if (dist<max) { //if distance is closer than max...
 
max=dist; //assign distance to max (the new shortest distance)
 
c=obj; //assign address of object currently being tested in c
 
}
 
}
 
c.isTarget++; //tell c (EnemyBee) that one more bee is following it
 
}
 
}

It can get a little confusing at this point, so I included plenty of comments. The variable c is used to hold the address of the closest enemy (hence it’s name). First we check to see if it is not in the array (meaning the closest enemy has not been determined). We use a for loop to iterate through all the enemies in eArray. If you’re new to loops, you can read up on them here.

Next we instantiate four variables: a placeholder for the object being tested, the horizontal distance, the vertical distance, and the total distance. Just in case you are wondering, the distance formula is as follows:

Now that we know the distance of the object being checked, we must see if it is closer than the previous. Recall that max was equal to Number.MAX_VALUE, so it is greater than anything we could compare it to. So the first instance to be checked will definitely be closer, and the if statement will be true. Therefore, max is set to the distance between itself and the enemy being tested (the new shortest distance), and obj is stored in c. All that happened for the first enemy in eArray. Now go through it again for the second enemy. The second enemy is stored in obj, just like the first, and the distance is established. However, instead of max being equal to the highest value, it is equal to the distance of the previous enemy. If the distance between the bee and the enemy being tested is shorter than that of the first enemy, max is lowered again to match the distance and the enemy is stored in c. If not, the loop skips over this and goes on to test the next enemy. This process continues for every enemy in the array. Logically, the value of max by the time all of the enemies are done being tested will be equal to the shortest distance, and c will hold the address for the corresponding enemy.

Note that with the if statement, Bee only looks for enemies that have isTarget==0. In plain English, that means it only takes enemies that are not being followed into consideration. This way we don’t have that surplus of followers in one section and a non-followed enemy elsewhere like we previously discussed. However, there is the case that every enemy is already being followed. The if statement right after the for loop checks to see if a closest enemy (with no followers) has been found. If so, it increases the value of isTarget on the enemy (amount of followers). If not, another for loop extremely similar to the previous is carried out. The only difference is the if statement:

if (dist<max) {

Instead of checking to be sure the enemy being tested has no followers, it just looks for the closest. I found this to be the best design, but you might have another use for it. This code is very easy to customize. Say you wanted locate the enemy with the least amount of followers. You could simply substitute the if statement for this:

if (obj.isTarget<max) {
 
max=obj.isTarget;
 
c=obj;
 
}

All right we’re getting closer to finishing this up. One more loop:

max=Number.MAX_VALUE; //reset max to maximum value
 
if (r.eArray.length>=r.beeArray.length&&c.isTarget>1) { //if c has other followers...
 
c.isTarget--; //tell c it has one fewer follower
 
for (var l:int=0; l<r.eArray.length; l++) { //for every object in eArray...
 
obj=r.eArray[l]; //assign address of object to obj
 
distX=this.x-obj.x; //horizontal distance between self and obj (the enemy)
 
distY=this.y-obj.y; //vertical distance between self and obj (the enemy)
 
dist=(distX*distX+distY*distY); //overall distance using distance formula
 
if (dist<max&&obj.isTarget==0) { //if distance < max and obj has no followers...
 
max=dist; //assign distance to max (the new shortest distance)
 
c=obj; //assign address of object currently being tested in c
 
}
 
}
 
c.isTarget++; //tell c (EnemyBee) that one more bee is following it
 
max=Number.MAX_VALUE; //reset max to maximum value
 
}

Okay so after doing two loops almost exactly like this one, no explanation should be necessary. However, a brief discourse on the logic behind it should help. The only thing different here than the first loop is that it is only executed when there are more enemies than followers and the enemy the bee is following has at least one other follower. You may be asking yourself why I chose to create three loops that are almost identical instead of simply making a function called several times with slightly different arguments. Well, I think it’s easier to retain the information if you see it several times. Plus, a tutorial is never complete unless something is left up to you to figure out yourself.

All right, now that the difficult part is out of the way, we can move on to actually moving the bee. The code below immediately follows the if statement above:

angle=Math.atan2(c.y-this.y,c.x-this.x); //angle between self and closest enemy
 
speedX=Math.cos(angle)*speed; //find horizontal speed according to angle
 
speedY=Math.sin(angle)*speed; //find vertical speed according to angle
 
rotation=angle/(Math.PI/180); //rotate to face enemy
 
distX=this.x-c.x; //horizontal distance between self and closest enemy
 
distY=this.y-c.y; //vertical distance between self and closest enemy
 
dist=(distX*distX+distY*distY); //overall distance using distance formula
 
if (dist<=100) { //if distance is less than or equal to 100...
 
speed=-.1; //slow down
 
if (speed<0) { //if speed is less than 0...
 
speed=0; //keep speed at 0
 
}
 
} else { //if distance is greater than 100...
 
speed+=.1; //speed up
 
if (speed>2) { //if speed is greater than 2...
 
speed=2; //keep speed at 2
 
}
 
}
 
this.x+=speedX; //move horizontally
 
this.y+=speedY; //move vertically

This is very similar to the motion employed in the EnemyBee class and shouldn’t be too difficult at all. The if and else statements are purely for aesthetic purposes so that the bee doesn’t sit directly on the enemy.

That concludes the code for the followers. Now all we need is a means to create the followers and enemies. I’m sure you will come up with plenty of ways that pertain to your game, but for the sake of convenience I just created two buttons that allow the user to spawn them. If you’d like to see the Actionscript for this, download the source code files from above.

Step 5: Shooting

Run your .swf. If you did it right, you should get something like this:

The bees follow the enemies just like we programmed them to, but they do not attack. Remember that Ball Movieclip we make at the beginning of the tutorial? Well we’re finally going to use it. Open up the custom class for Ball and type this in:

package {
 
import flash.display.MovieClip;
 
import flash.events.*;
 
public class Ball extends MovieClip {
 
private var r:Object;
 
private var c:int=15;
 
private var id2:int;
 
private var angle:Number;
 
private var speedX:Number;
 
private var speedY:Number;
 
private var speed:Number=8;
 
private var mc:Object;
 
public function Ball(id:uint) {
 
addEventListener(Event.ADDED_TO_STAGE, beginClass);
 
id2=id;
 
}
 
private function beginClass(event:Event):void {
 
r=MovieClip(root);
 
addEventListener(Event.ENTER_FRAME, eFrame);
 
mc=r.beeArray[id2]; //find which object created it
 
angle=mc.rotation*(Math.PI/180);
 
this.x=mc.x; //set x coordinate to that of bee's
 
this.y=mc.y; //set y coordinate to that of bee's
 
speedX=Math.cos(angle)*speed;
 
speedY=Math.sin(angle)*speed;
 
r.setChildIndex(this,r.getChildIndex(mc));
 
}
 
private function eFrame(event:Event):void {
 
this.x+=speedX;
 
this.y+=speedY;
 
if (c>0) {
 
c--;
 
} else {
 
this.alpha-=.1;
 
}
 
if (this.alpha<=0) {
 
removeBall();
 
}
 
}
 
public function removeBall():void {
 
removeEventListener(Event.ENTER_FRAME, eFrame);
 
r.ballArray.splice(r.ballArray.indexOf(this),1);
 
r.removeChild(this);
 
}
 
}
 
}

Basically we’re just creating an object that follows a straight line path using the rotation of the bee it’s coming from. The address of the bee is determined by the parameter id2, which we will explain it a bit. Now we have to program Bee to actually shoot the balls. In the eFrame event of Bee, right after the speedX and speedY are used, place the following code:

reload--; //lower reload timer
 
if (reload==0) { //if reload is complete...
 
reload=50; //reset reload timer to 50
 
var newBall:Ball=new Ball(r.beeArray.indexOf(this)); //create new ball
 
r.addChild(newBall); //add ball to stage
 
r.ballArray.push(newBall); //put ball in ballArray
 
}

This creates a new instance of the Ball class and places it in the corresponding array on the Main Timeline. As you can see, the argument incorporated while instantiating the new ball is the index of the bee in its array. This is then later accessed by the ball in its class to find where it should be placed on the stage and the angle it should follow:

mc=r.beeArray[id2]; //find which object created it
 
angle=mc.rotation*(Math.PI/180);
 
this.x=mc.x; //set x coordinate to that of bee's
 
this.y=mc.y; //set y coordinate to that of bee's
 
speedX=Math.cos(angle)*speed;
 
speedY=Math.sin(angle)*speed;
 
r.setChildIndex(this,r.getChildIndex(mc));

The address of the bee is found using id2 (which is equal to the argument we just mentioned) and stored in mc, which is used to set all that good stuff above. The setChildIndex() statement is used so that the ball appears below the bee, giving the illusion that it’s being shot by the bee, and not appearing right on top of it.

Okay so run your .swf again and you should see this:

Pretty good, huh? Now we just have more step: the collisions.

Step 6: The Collisions

This part is easy. Simply open up the class file for EnemyBee and, in the first line of the eFrame event, put in the following code:

for (var i:int=0; i<r.ballArray.length; i++) {
 
var mc:Object=r.ballArray[i];
 
dist=Math.abs(mc.x-this.x)+Math.abs(mc.y-this.y);
 
if (dist<;this.width/2+mc.width/2) { //if they touch...
 
health--;
 
mc.removeBall();
 
}
 
}

It’s just a for loop that iterates over every instance in the ball array and tests for a collision. You can use whatever collision-detection technique you want, but for this example the best choice is a simple circle-to-circle test. Upon each collision, the health of the bee is lowered, and the ball is removed through the function removeBall().

Well, that’s about it. Test your .swf and it should work just as my example up above did. This technique is very useful and I’m sure you’ll find plenty of ways to use it in your games. If you make something cool, I’d love to see it (: Thanks for reading!

© dannybuoncore for MochiLand, 2011. | Permalink | 2 comments

Add to del.icio.us

Search blogs linking this post with Technorati

Want more on these topics ? Browse the archive of posts filed under Developer Feed, Developer Spotlight, Flash Development, Front Page, Game Design, MochiLand Topics.

FGS 2012 Advisory Board Interview Series

This is part three in a series of interviews of the Flash Gaming Summit 2012 Advisory Board. This is your chance to get to know the folks who determine the content of Flash Gaming Summit, getting their thoughts on both the conference and the games industry in general. This week’s Advisory Board interview features Jakub Dvorský, founder of Amanita Design. In case you have been living under a rock, their game Machinarium has been a huge success on iTunes, specifically hitting #1 on the iPad. Machinarium was also a Mochis Award Show winner at FGS 2010 (Best Game Art category).

For more information on Flash Gaming Summit, including passes, speaking, or award show nomination information please visit the conference website.

Introduce yourself- who are you, how big is your team, and how do you participate in the Flash games industry?

My name is Jakub Dvorský, I’m visual artist and game designer. In 2003 I founded the studio Amanita Design, which is now nine employees strong. We are focused mostly on developing independent games (built in Flash) but sometimes also on other projects like films, music videos or some experimental stuff.

What did you do before? How did you first get into the Flash games industry? Tell us about your path.

I grew up on 8bit computers and started making my own games when I was 15 on my first PC, I was in grammar school at that time. Later I went to the Academy of Arts in Prague to study animated film. When I was finishing the academy I created my first Flash game (Samorost) as my thesis project and later the same year founded Amanita Design.

What has been your proudest moment since joining the Flash gaming community?

I’m most proud of assembling our team – a bunch of great friends, professionals and passionate creators.

What was your biggest challenge early on with Amanita Design? How does that compare to the types of challenges you face today?

When I started making Flash games I was alone so the biggest challenge was programming – I was doing it myself which was very tough for me even on a basic level, my head is just chaotic for this kind of work. Nowadays we have a couple of excellent programmers so the biggest challenge is probably game design, more specifically how to make a game entertaining, challenging, accessible, new and original.

Do you have any recommendations or advice for game developers who are trying to make a multi-platform “hit” game? What should they be focused on?

The game must definitely be fresh, distinctive and original and at the same time perfectly executed and polished. Sounds easy right? :)

What is it that you love the MOST about the Flash games industry?

It’s easy to create a simple game and publish it on the web or as an app, so any idea can be quickly transformed into a real game and can be played by thousands of people all around the world. This is really  great because you can immediately see if it works or not and you can also improve your game according to the feedback you get from your players.

What do you like the least?

The bugs in Flash.

How has the industry changed since you fist joined?

The whole scene has changed, it was a completely different world when I started with Flash games. When I was searching the web for interesting interactive stuff, there were just a few really good websites and only a couple of games worth mentioning, nowadays there are tens of thousands of games, experimental interactive projects, art projects, websites and portals.

The theme for FGS 2012 is “Maximize Your Game”. How do you think Flash game developers are maximizing their games today? What could they be doing better / differently?

I’ll be repeating myself but I think the developers should try to be more original and brave, they should experiment more with art, game mechanics, narrative approaches and with the whole medium which is still unexplored and waiting for young adventurers who wants to create something really new.

Where do you see the Flash games industry going? What’s in store for the future?

A more interesting question to to me is “where is the games industry is going”? I think the future of the games industry is extremely bright because the medium will be broader and more serious in many ways. I see really big potential for creative people from various disciplines from artists, writers, designers and musicians to programmers and engineers.

What part of Flash Gaming Summit do you enjoy or look forward to the most?

The best part of almost every game conference or festival is always meeting other developers and players in person.

In your opinion, why should people come out to FGS 2012? What should they expect from the conference?

Similarly to my previous answer answer, the most valuable part of conferences for me is meeting some interesting people in person. It’s sometimes much more influential than weeks of reading, surfing or watching videos on the web.

Thanks for your thoughts and insights Jakub, see you at FGS 2012!!

© Colin Cupp for MochiLand, 2011. | Permalink | No comment

Add to del.icio.us

Search blogs linking this post with Technorati

Want more on these topics ? Browse the archive of posts filed under Developer Feed, Developer Spotlight, Front Page, Mochi Media Announcements, MochiLand Topics, Publisher Feed.

FGS 2012 Advisory Board Interview Series

This is part one in a series of interviews of the Flash Gaming Summit 2012 Advisory Board. This is your chance to get to know the folks who determine the content of FGS, and hear their thoughts on both the conference and the games industry in general. This week’s Advisory Board interview features Carl Trelfa, Co-founder of thePodge.

For more information on Flash Gaming Summit, including passes, speaking, or award show information please visit the conference website.

Introduce yourself- who are you, how big is your team, and how do you participate in the Flash games industry?

Hi, my name is Carl Trelfa, chief Code Monkey at thePodge.  Our team consists of 3 people: Me, Jim and Sarah – we’re good friends and have been for years.  We make games!

What did you do before?

Over the years I’ve done a lot of jobs – most of them not worth mentioning, but immediately prior to setting up thePodge, I worked for a couple of Flash Games development companies – most notably Nitrome, where I worked for about a year.  Before that I worked for a web development agency and also worked on some freelance projects.  Jim and Sarah both have worked freelance in the past as well.  None of us like working for other people!

How did you first get into the Flash games industry? Tell us about your path.

I’ve always been into making games, since I was a kid – I taught myself to code when I was pretty young.  About 10 or so years ago, Jim and I set up a business where we made online games using Java (way back before the industry had really got going properly).  We did OK, but we both ended up getting “proper” jobs.  I got really fed up of doing work that I felt wasn’t making use of my skill-set (you know, stuff like working in call centres, fixing people’s internet problems) and decided to give freelancing a go.  I was pretty late into Flash to be honest, my first sponsored game was Extreme Sketch-Pak way back in 2007 – sponsored by Bubblebox followed by 3D Super Snowboarder and Santa Caught Christmas. Next I decided to make a Flash games portal, www.ussgames.com, which helped bag me the job at Fish In A Bottle (with thanks also to RobotJAM for that!).  I then came to realise that web design wasn’t really my thing. I really wanted to get into making Flash games full-time, and that’s when I saw that Nitrome was looking for coders – so I applied and spent a year there.  While working at Nitrome I kept in touch with my old friend Jim and we decided to make another Flash games web site, www.gamebods.com. The goal was to give this a nicer design than USSgames, and we would concentrate on having higher quality games as well as keeping our users (check it out – you can earn points and build your own Bod, which serves as your site-wide avatar!).  After a while I felt I was just scraping by (living in London is expensive!). As much as I loved working at Nitrome, I always wanted to work for myself- so Jim, Sarah and I decided we’d go ahead and set up our own game dev company…and here we are now, almost 2 years on!

Why did you decide to form thePodge? How did you guys find each other?

I think I pretty much covered this already in my previous answers, although I should add that Jim is a really great graphic artist and Sarah’s character design is awesome, so we thought between us we’d make a good team.

What challenges did you encounter going from a solo developer to working in a team? Do you have any advice for developers who are thinking of making a similar decision?

I don’t really think there were any challenges to be honest.  My art and graphics are not great so I tend to prefer working with an artist – if anything it means we can work on bigger projects.  If I were pressed to name a challenge, it might be trying to divide up the work effectively- the coder tends to become a bit of bottle neck towards the end of the project.

What is the single most difficult challenge facing game developers today?

I’d say making original games that are intuitive and also hold people’s attention.  You’ve got to be original, easy to play and interesting enough to hold the attention of people with 3 second attention spans.  Flash games are ten-a-penny to the average online player, if it doesn’t grab them immediately then they will go play something else.

Do you have any advice for developers who want to form a small team?

Just go for it.  It’s hard to give up the security of a full-time job, but there is nothing more rewarding than working for yourself, doing something you love!

What has been your single biggest challenge in the Flash games industry? How does it compare to the types of challenges you face today?

Getting games sponsored is always a challenge.  The industry has changed since I first got in to it – the sponsorship model probably makes it easier for developers to make some money, but to be honest I’m not sure it’s the best model in terms of long term income.  Probably building up your own site is the best way to go, which is obviously a challenge in itself, but I think should lead to more long term benefits.

What has been your proudest moment since joining the Flash gaming community?

Probably winning a Mochi Award with Inferno Meltdown last year.  We were not expecting that!

What is it that you love the MOST about the Flash games industry?

Making creative and original games.

What do you like the least?

Silly comments on games.  Sometimes we get people saying we should do things in our game that are already there and often the players don’t consider what would happen if we implemented their idea – some of them are just downright silly and would completely break the game or just make it so easy it wouldn’t be worth playing!  It’s impossible to please all the people all the time…although, to be fair we get a lot of very good comments as well and really good suggestions – a lot of which have made it into City Siege 3.

How has the industry changed since you first joined?

Companies like Mochi appeared and gave us in-game advertising!  Now anybody can make some money from their games.

How do you think Flash game developers are “Maximizing their games” today? What could they be doing better / differently?

I see a lot of Devs these days with splash screens at the start of their games, which in my mind is essential – everybody can make their branding more visible in their games.  We’re currently looking into ways to encourage click-throughs to our site, people signing up for our mailing list (which you can do within our games) and keeping them playing.  How do you get somebody to carry on playing the game even if they have already played all the way through?  We have an answer – in one of our latest games, Firebug, you actually earn a Golden Jellybean every time you complete a level perfectly which you can then spend on silly things like hats for the bug, alternate skins, tilesets, backdrops, and all that stuff.  We also offer a 5 bean incentive to click through to our site and a 10 bean incentive to sign up to our mailing list.  A lot of iPhone games work in a similar way – just look at Jetpack Joyride, it’s literally the same 30 seconds of gameplay over and over, the main incentive to carry on playing is to collect the coins and buy a new jetpack and the new jetpacks are purely cosmetic! Firebug is coming out very soon, look for it on our website!

Where do you see the Flash games industry going? What’s in store for the future?

That’s a bit of touchy subject with Adobe dropping the mobile browser plugin, but I see that as a positive – if players can’t just play our games in their browser, then they have to buy them in the app store, which is a good thing.  I’ve personally never missed not having Flash on my iPhone!  I think we’ll see a lot of 3D games soon – I might add that a lot of them will be rubbish, 3D doesn’t make a good game.  Hopefully we’ll see some good 2D/3D cross over type games (Paper Mario style, maybe or just interesting effects like in K.O.L.M.) and some amazing stuff using Molehill to accelerate 2D games.

What part of Flash Gaming Summit do you most enjoy or look forward to?

I think maybe the Mochi Award Show, but I’m sure there will be some very interesting speakers as well.

In your opinion, why should people come out to FGS 2012? What should they expect?

Well the theme is Maximize Your Game, so I think any developer has something to gain from going.  We all need to maximize our income and generally get the most from our games.

Thanks for taking the time to chat Carl, this is great insight (and I’m looking forward to playing Firebug!). For more info on FGS 2012, please visit the conference website.

© Colin Cupp for MochiLand, 2011. | Permalink | One comment

Add to del.icio.us

Search blogs linking this post with Technorati

Want more on these topics ? Browse the archive of posts filed under Developer Feed, Developer Spotlight, Front Page, Games Industry, Mochi Media Announcements, MochiLand Topics, Publisher Feed.

Note: This tutorial was originally written for .net magazine. I’m now allowed to publish it here, so read on and enjoy! Grab the files for download before starting!

Retro style games are becoming more popular than ever online. Commonly referred to as “8-bit” these games have pixel-art graphics and “chip tune” music that apes the consoles of old, but often have surprisingly innovative gameplay mechanics. And Flash has turned out to be the perfect tool for creating them, as hit titles like Canabalt and Fathom demonstrate.

Fathom was one of the first games built with Flixel and is a good example of what it can do.

This may seem at odds with a technology known for its vector graphics and timeline animation. But under the hood Flash is perfectly capable of pushing around large volumes of pixels which is exactly what is required. Flixel is a game framework born from a desire to create 8-bit style games. But it has evolved into a powerful way to rapidly create games in Flash. With a strong community and plug-ins available it’s the perfect choice to create our game with. In this two part series we’ll explore how Flixel works and build a retro-styled platform game in the process.

Download the tutorial files and look through the source code alongside reading the article, because for the sake of space not all of it can be included here and we’ve got a lot of ground to cover.

Getting started

For Windows users there is a guide on installing FlashDevelop with Flixel. On Mac OS X you can use Adobe Flash Builder. FlashGameDojo has a tutorial for this. Or run FlashDevelop under Parallels.

Even if you use FlashDevelop / Flash Builder already I’d still recommend following the guides so you become familiar with the Flixel package structure.

Game Design Brief

It helps to have a plan of your game before you start on it. While the plan should never restrict you from iterating your game during development, it will set a base ground on which to build. Here is a concise brief for our game:

“Player controls a chick who can run left/right and jump on platforms across a horizontally scrolling level. The environment is a lush green jungle with trees, grass, flowers and ruins to explore. There will be static and moving platforms and stars to collect. Collect enough stars and the level exit opens. Player cannot die by falling unless he hits the water. Animal baddies move around the platforms and are fatal to touch.”

From this brief we can instantly visualise how the game will look and play. This allows us to break the code structure into logical objects such as Player, Map, Star and Enemy. The artist can also create concept sketches to set the style of the game, and provide a point of reference for the pixel art.

Concept Sketches These help set a visual style for the game, introduce main characters and act as a reference for the pixel art.

It starts with FlxGame

Open Main.as from the “Part 1″ source folder:

public class Main extends FlxGame
{
public function Main()
{
super(320, 240, PlayState, 2, 60, 60);
forceDebugger = true;
}
}

FlxGame is the wrapper for your whole game, setting up Flixel in the process. The call to super sets the resolution of our game (320 x 240), the initial State (PlayState), the zoom level (2) and the frame rates (60 fps).

While 320 x 240 may seem small at a zoom level of 2 it will display at 640 x 480. The up-scaling of retro games is a common trait that helps show-off the detailed pixel art. forceDebugger enables the built-in debugger which is activated by pressing the ‘ key. This lets you view bounding boxes, collision, paths, variables, logs and save out game replays.

Your game can have only one FlxGame class, but it can have many States. States are a way to split your game into logical sections. For example a MainMenuState, a PlayState with the guts of the game and a GameOverState. Only one State can be active at a time.

Getting into a right State

States in Flixel extend FlxState and they are the guts of your game. When the State is initialised it calls the function create. This is used to construct any assets or variables the game needs. Once your game is running Flixel calls the update function every frame. In Flash terms it’s the equivalent of an Enter Frame event. Here is where you handle anything that needs to happen continuously. We’ll use it to detect collision between game objects.

Inside the create function we make two types of object: the Player sprite and some platforms.

player = new Player(32, 100);
floor = new FlxTileblock(0, 208, 320, 32);
floor.makeGraphic(320, 32, 0xff689c16);
add(player);
add(floor);

The floor variable is one such platform. Although we’ll replace it in the final game it’s a great rapid way to provide objects the player can jump on to test the physics. The objects are then added to the State, allowing Flixel to draw them when it renders the scene. It’s similar to addChild in native Flash and the order in which you add defines how they are drawn.

All player specific code is held in the Player class, represented here through the player variable. This keeps it organised and easy to re-use. Before we start that however we need to give our player some wings – quite literally – by preparing the sprite sheet.

Nutmeg The sprite sheet for the pixel hero of our game, drawn in 16 x 18 sized frames.

Flixel can automatically create reversed frames so we only draw him facing right. The first frame is an idle pose. Frames 2 and 3 are the walk cycle, and frame 4 is a hurt expression. If you are more comfortable animating inside of Flash Professional then you can create a timeline sequence as usual, export it to a SWF and use a tool such as Grant Skinner’s Zoe (http://easeljs.com/zoe.html) to convert it to a sprite sheet.

Sprites in Flixel are called FlxSprite which is what our Player extends. These differ from regular Flash Sprites in that as well as graphics data they contain extra values to allow you to easily control physics, animation, direction, collision and rotation. Inside Player.as we’ve embedded the sprite sheet:

[Embed(source = '../assets/player.png')] private var playerPNG:Class;

And then tell FlxSprite to use it:

loadGraphic(playerPNG, true, true, 16, 18, true);

This tells Flixel to chop the sheet into 16×18 frames and create reversed versions. Animation works in a similar way to Flash MovieClips.

addAnimation("walk", [0, 1, 0, 2], 10, true);

This creates a new animation sequence called “walk” which cycles through frames 0, 1, 0, 2 at a rate of 10 frames per second. The true parameter makes it loop. To play an animation you use its label:

play("walk");

What goes up must come down

Making the player sprite run and jump smoothly provides us with a great opportunity to explore ones of Flixel’s strengths: its plug-ins. Much like with WordPress and Drupal, the Flixel community release plug-ins which extend the framework further and ultimately save you time.

One such plug-in is FlxControl which is part of the Flixel Power Tools. They are included in the tutorial zips but are constantly updated, so check https://github.com/photonstorm/Flixel-Power-Tools for updates. If downloading fresh there is a Getting Started guide in the Docs folder.

The plug-in needs to be activated and assigned to our player FlxSprite:

if (FlxG.getPlugin(FlxControl) == null) {
FlxG.addPlugin(new FlxControl);
}
FlxControl.create(this, FlxControlHandler.MOVEMENT_ACCELERATES, FlxControlHandler.STOPPING_DECELERATES, 1, true, false);

The parameters tell it that we want the sprite to accelerate and decelerate. If we didn’t pick this the sprite would start and stop immediately making the experience very abrupt.

FlxControl.player1.setCursorControl(false, false, true, true);
FlxControl.player1.setJumpButton("SPACE", FlxControlHandler.KEYMODE_PRESSED, 200, FlxObject.FLOOR, 250, 200);
FlxControl.player1.setMovementSpeed(400, 0, 100, 200, 400, 0);
FlxControl.player1.setGravity(0, 400);

This enables cursor control for the left and right keys, and sets SPACE BAR to be the jump button. The player can only jump if on the floor and will try to jump to a height of 200 pixels. setMovementSpeed allows the sprite to accelerate at 400px/sec up to top speed of 100px/sec. Modify these values to much lower or higher numbers to see the effect! Finally we set some gravity, pulling the player back down to earth. Try changing the gravity value to make the player float or drop like a lead balloon. The best thing you can do to learn about Flixel and its plug-ins is to mess around with them. You never know what might come out of it! I’ve seen whole game ideas born from what were code bugs, so it pays to experiment.

Putting it all together

Run the code at this point and you’ll see we have a cute little chick sprite who can run and leap around at will. It collides smoothly with the ground, and there’s even a platform to leap on. If you press the debug key (‘) you can watch the physics values in real-time. Click the box icon in the top right to turn on the visual outlines.

We have lift off! A running and jumping player with platforms to leap on

Granted it isn’t quite Mario, but we’re not finished just yet.

Building a Level Map with DAME

Green blocks are all well and good, but we need a proper level for the player to explore. Flixel has built-in support for Tile Maps which are an efficient and fast way to construct game levels. Tile Maps work by using Tile Set in a series of tiles aligned to a fixed-size grid. Here is the Tile Set created for our game:

The Tile Set used to draw the game map, complete with water, plants and platforms.

Each tile is 16×16 pixels in size, and you can see that some of them join together to form game objects such as the platform in the bottom right. The organisation of the Tile Set is up to you (or your artist!), but it’s sensible to leave big chunks of empty tiles should you need to insert new tiles later on in development. Tiles are separated into two types: Tiles you can collide with, and tiles you never collide with. In Flixel this is determined by the tile number and is called the Collide Index. Every tile after the index is treated as a tile you collide with. In our Tile Set you’ll see on the top row items such as flowers, bushes and shrubs. These are all non-colliding tiles, as we don’t want our player getting stuck on flowers.

With our Tile Set created we now need to design the level. To do this we use a Tile Map Editor. For this tutorial we’ll use an editor called DAME. Although the interface takes some getting used-to, the actual map view in DAME is rendered directly with Flixel so you know for sure that what you see in the editor is how it appears in game.

DAME can be downloaded from http://dambots.com/dame-editor/ and works on Windows, OS X and Linux. Create 3 map layers in DAME, one for the Sky background, one for the level itself and one for the stars which the player can collect. You can find our DAME maps by downloading the tutorial files and looking in “Nutmeg Part 2 – The Map”. With the Map Layer selected click on a tile in the Tile window and then paint with it, just like an art package:

Tile Map Editor DAME in action showing part of the level created for the game

Once you are happy with the design of your level you can export the map data to a CSV file from the File ñ Export menu.

Lights, Camera, Action

Add a new class to the project called Level1 that extends FlxGroup. This is Flixel’s way of grouping display objects together and keeps our code logical and structured. We can also check for collision against a whole group, which is significantly faster than checking every element individually. Our map is held in a local variable:

map = new FlxTilemap;
map.loadMap(new mapCSV, mapTilesPNG, 16, 16, 0, 0, 1, 31);
add(map);

loadMap takes our CSV map data exported from DAME, and an embedded Tile Set png and creates a Tile Map object which is then added to the group. The same process is repeated for the Sky background.

Back in the PlayState we add the level to the display. But before we can unleash the player we tell Flixelís camera system to follow them around and restrict the camera to the map boundary:

FlxG.camera.setBounds(0, 0, level.width, level.height);
FlxG.camera.follow(player, FlxCamera.STYLE_PLATFORMER);

The last task is to add a collision check into the PlayState update function:

FlxG.collide(player, level);

With the map loaded, the camera set and collision running we can now test the game. The chick now happily bounces around the level, landing on platforms and not colliding with flowers.

Sprinkling a little stardust

Now we’ve a pretty landscape to traverse we’ll add stars for the player to collect, and display the total collected as a score in the game. Flixel has a text function called FlxText which we use to display the score:

>

score = new FlxText(0, 0, 100);
score.scrollFactor.x = 0;
score.scrollFactor.y = 0;

The score is added at the top left of the screen and has a scrollFactor of zero. This means the text will be locked in place at the coordinates given, and not scroll around as the camera moves.

In the DAME map the Stars layer was exported to a CSV file and weíll use this map data to create Star sprites. The function parseStars in the Level1 class works by looping through the CSV map data, and for every tile it creates a new Star sprite at those coordinates. All of these sprites are added to an FlxGroup called stars. In the PlayState update function we check to see if the player is colliding with a star:

FlxG.overlap(player, level.stars, hitStar);

If a collision occurs this will call the function hitStar, passing in the two objects that collided, in this case the player and the star he hit. The star is removed from the game and the score increased:

star.kill();
FlxG.score += 1;
score.text = FlxG.score.toString() + " / " + level.totalStars.toString();

Finally the score text is updated to show them how many stars they’ve collected, and how many are left. With this one small addition we’ve now got a real playable game with an objective to collect all stars:

Reach for the stars With the stars in place our game now has a purpose - try to complete the level

In part 2 we will introduce baddies for you to avoid, sound effects, a user interface (HUD) and Game Over sequence. If you feel inspired to build your own games be sure to visit http://flixel.org which is home to a vibrant developer community. You’ll also find stacks of Flixel related tutorials at http://www.photonstorm.com along with the Flixel Power Tools plug-ins. Finally for reference to the classic games of old http://www.retrogamingtimes.com is well worth a visit.

The following 2 parts were the “box-outs” that appeared in the print article. I’ve included them here because they’re interesting :)

Adam Saltsman talks about why he created Flixel

I guess it was around 7 years ago that I tried to make a little “game engine”, something that would allow me to make Super NES style games. It just seemed like a fun thing to do. After a few abortive attempts in C++ / Python / Java I finally settled on AS3. It was the pixel-level stuff in it that really interested me. However I’d grown very cautious about “engine building” and not actually making any games. So I stuck with AS3 and created game after game, and noticed which patterns evolved. The games kept getting more complex, and re-used code from previous projects, and eventually those parts I was seeing in every project got moved to their own folder. I think a lot (if not most) developers have a similar folder somewhere, just a pile of “really handy” code.

Originally this was just for me, something I’d use to sketch new game designs in. But it wasn’t long before I thought that with a little polish here and there I might be able to release it publicly. Turns out it needed a lot of polish (and still does), but I really like where it’s going. Lately I have been thinking a lot about how to “make stuff that matters”, which is a very loose idea, but something I obsess over, for better or worse. I think Flixel is a cool thing. It’s not really “art” in and of itself, but it contributes to the cultural food chain, and that makes me feel like a hero.

Eventually it would be great to add official support for a physics engine like Nape, and port it over to Molehill, the hardware-accelerated Flash Player by the end of the year. I am very hesitant to ever add game-specific features to the framework, but these all seem like good general systems and will just make making games easier and more fun.

At the risk of leaving out something awesome I would say the following games are shining examples of Flixel in action:

Canabalt
Station 38
Tuper Tario Tros
Cat Astro Phi

Cat Astro Phi Designed to look, sound and feel like a Gameboy Classic title it's a good example of what Flixel is capable of.

Pushing Pixels

Mastering the style of pixel art

Professional pixel artist Ilija Melentijevic explains how he created the artwork for Nutmeg:

Pixel art is a time-consuming but rewarding approach to creating game graphics. If you have little screen space such as on a mobile device, or are simply looking for that charm and precision it offers, then itís worth making the extra effort. Also, it’s incredibly fun!

It’s a good idea to start from the big picture. First make a mock-up of a game scene, defining the style, colours, characters, etc. Once you have such solid foundation it’s easy to turn it into actual game assets. Your art must fit and enhance the game, not just look nice on its own, so make sure everything reads well and speaks to the player in a consistent way. In a busy shooter, use colours to separate bullets from power-ups, or to make the foreground objects pop out. Immersion is a priority in any game, and understanding what’s going on plays a big part in this. Fire up your favourite games and look how the pros do it.

There are a number of tools you can use and they vary widely. Some people even use Microsoft Paint! Many professionals use Photoshop and it certainly gets the job done, but I prefer a dedicated pixel-oriented program. Closest to the industry standard is Cosmigo Promotion which boasts an impressive set of features and will look familiar to Photoshop users. My personal favourite is the 100% free GraFX2. Currently it lacks animation, but otherwise provides for an unparalleled workflow and ease of use.

Make sure you join an active pixel art community that will provide both feedback and motivation. PixelJoint lets you comment, rate and vote on other people’s work, submit your own, and even take part in weekly challenges, perhaps the best way to hone your skills.

For a less casual approach consider Pixelation, a community focused on pushing the medium forward. Here you’ll find discussions on theory, game art analysis, collaborations and more. Many masters of the form frequent the forum, so it’s a great place to post your work to get some constructive critique.

View Ilija’s artwork at http://www.photonstorm.com/topics/art

GraFX2 A lightweight and free (as in free beer) pixel-pushing program for Windows, Mac and Linux

© Photon Storm for MochiLand, 2011. | Permalink | 7 comments

Add to del.icio.us

Search blogs linking this post with Technorati

Want more on these topics ? Browse the archive of posts filed under Developer Feed, Developer Spotlight, Flash Development, Front Page, Game Design, MochiLand Topics, Tutorials.

This week’s Flash Game Friday winner is Diamond Hollow II by Arkeus!

If you like retro platformers, you are going love Diamond Hollow II. Arkeus creates a world beneath the surface, where you need to climb and defeat various creatures in order to get out. The closer to the surface you get, the harder the game becomes. That’s where the diamonds come in.

Armed with a powerful (and talking) gun built by some mad professor, you collect diamonds as you move through the levels. You can then redeem these diamonds to increase various things, from powering up your gun to increasing your character traits (such as “jump”, “agility”, etc.).

For the nostalgic gamers out there, this game has obviously been influenced by early Nintendo games. Everything from the graphics, sounds, and music makes this an awesome retro-platformer- congratulations Arkeus!

Get To Know Arkeus

Tell me about yourself- how many people are on your team? Where are you based?

My name is Lee Miller and I’m 23 years old. I live in Seattle, and I currently work as a solo developer on my projects.

How long have you been making games? What did you do before?

Currently game making is something I do in my free time (nights and weekends). I’ve been at it since middle school as it’s something I really enjoy doing. During the day I work as a software engineer on things completely unrelated to gaming, which creates a nice balance.

What was your inspiration for “Diamond Hollow II”?

My inspiration came from a simplistic climbing platformer I created for a 48 hour Ludum Dare competition. However, after releasing it I really wanted to expand it into something more than just a basic platformer. Drawing elements from some of my favorite series such as Zelda and Metroid, Diamond Hollow II grew into what it is today.

What types of games do you like to create the most? What types of games do you like to play the most?

I am absolutely in love with games that tie in RPG elements to their gameplay, and it’s something I love to do in my own games. However, rather than typical RPGs, I tend to prefer faster paced games such as platformers.

In bigger terms, I’m fascinated by large scale MMORPGs. They contain so many elements that appeal to me, particularly in regards to allowing me to compete against the entire world.

How long is your game creation cycle? What is your process?

I often come up with a large list of ideas that I want to work on, and jump back and forth between them, sometimes designing, or even prototyping many of them. Then, whichever one brings me the most joy in working on, I try to follow with through to the end. Sometimes, though, an idea comes at me so hard that it’s all I can think about, and I’ll often drop everything else to work on it. This often leads to many unfinished projects, but it keeps the development process fast and fun. Because it’s mostly weekends and some nights that I work on games (and I try to spend time on other things to overwhelm myself), it can take many months to get a project done.

Are there any game developers that you admire or consider “rock stars”?

In the world of big name developers, Blizzard and Bethesda Softworks are the two that stand out to me. More so than other developers, they don’t settle for anything less than amazing, and they never fail to deliver on that.

What is it about making a new game that you enjoy most?

The beginning of a project is always my favorite part. Starting with absolutely nothing and modelling it into a game excites me (and is another reason I often end up with many unfinished projects).

Do you have any hot projects you’re working on right now?

I’m currently juggling between four different games to determine which is going to become my next big project. Most my recent time has been going into designing and building some basic systems for a JRPG, and I believe that is the one I’ll be spending quite some time on. I’ve always wanted to make an epic RPG where I can create a deep story, so hopefully this one will stick and I’ll follow through with it until the end. Eventually though, I want to return to the world of Diamond Hollow and create a full-on metroidvania as a third entry in the series. :)

Thanks Arkeus, and good luck on you next game!

© Colin Cupp for MochiLand, 2011. | Permalink | No comment

Add to del.icio.us

Search blogs linking this post with Technorati

Want more on these topics ? Browse the archive of posts filed under Developer Spotlight, Flash Game Friday, Game Showcase, MochiLand Topics, Publisher Feed.

This week’s Flash Game Friday winner is Wonderputt by Damp Gnat!

Wonderputt. Is. Awesome. That pretty much sums it up. The enjoyment of playing this game comes from two directions: the gameplay of putting the ball into the hole(s), and also from the fact that your interacting with a work of art. The amount of polish in this game is just insane.

At first glance, you might think this is a simple game with a few holes of mini-golf. Then you start playing, and see beautifully animated meteors crash into the first hole to form the course. On the next hole, you realize that each hole is not as it seems as an alien spaceship controls the layout (and picks up a few cows). It may not look like it, but this is actually an 18-hole mini-golf course where animations transform and open up some of the unseen parts of the course.

If all of that weren’t enough, Wonderputt also has achievements and some nice social hooks that you can access from the game info screen. You can share your status, your score, time, individual hole score, and the number of collectables you found. Speaking of collectibles, these become available in “wonder” mode (which is unlocked once you have played the game in regular mode).

Wonderputt is a beautifully crafted game with great artwork, fluid animations, and great sound to boot. The extra game mode should make most players play at least twice, though I have personally played it approximately 20 times now. Go play this game, you’ll be glad you did. Congratulations Damp Gnat!

Get To Know Damp Gnat

Tell me about yourself- how many people are on your team? Where are you based?

I run an interactive arts & animation studio called Damp Gnat in Brighton UK, which consists of just me at present, although I closely collaborate with sound & web designers Stilton Studios and Redtone Media.

How long have you been making games? What did you do before?

I released my first online Flash game – Icycle in September 2009 (which took 4 months to make over 4 years) although my experience stretches back to a Commodore Amiga release (Odyssey) 16 years ago in collaboration with a school friend.  My college years led me into the animation industry where I worked on commercials, infomercials, music promos, series work and feature film intros as a drawn & 3D CG animator & compositor.  My role at Nexus Productions allowed me to have my fingers in all pies so these skills have been crucial to developing Flash games without a team of specialists.

What was your inspiration for “Wonderputt”? How did you come up with this design concept?

Wonderputt was actually built on the framework of Adverputt but this time I wanted a rich and animated environment, free of integrated brands.  So as it had to be a full static isometric screen, I naturally looked towards styles and illustrators that use this perspective to full effect.  Everything from old encyclopedia illustrations and their geographic cross sections, to bar chart statistics and air fix kit assembly info graphics.  Isometric view also allows for playful illusions with space and structure, so M.C.Escher was an obvious influence there.  The final look ended up like a fusion between the rich bustling cityscapes of Eboy and the sublime light & airy landscapes of Josh Keyes.

The real challenge in making Wonderputt was balancing playability with aesthetics.  Those two aspects of game design are constantly at war with each other.  It was very important to me that the game held together as an illustration at any one point during play.  The music was designed to be unobtrusive and to discretely set the mood.  References were from 70′s educational tv and nostalgic tracks that evoke the wonder of science.  Perhaps there’s a little homage/spoof in there too.

You can look back over the process in my development diary.

What types of games do you like to create the most? What types of games do you like to play the most?

My main motivation is to innovate at least one aspect of each game and shake up how games are perceived.  There are fair reasons developers tend to stick to pixel art and tile maps, such as advantages in performance but this does seem to be keeping flash games anchored to a retro medium.  I don’t think I have a preference in specialising in a particular type of game, just so long as each one poses a creative challenge and reinvents.

I tend to play Wii sports games with family & friends.  Otherwise its the Xbox360 and immersive games such as Assassin’s Creed, Red Dead, Portal etc.

How long is your game creation cycle? What is your process?

I seem to be putting one out a year.  Each project ranges between 4-6 months spread over durations between 1-4 years.  I really wish I could improve my turnover, but working alone holds me back a bit.

Are there any game developers that you admire or consider “rock stars”?

I’m an admirer of innovative auteurs of games such as Samorost, Windowsil, the Bridge Builders, Armadillo Run, Portal and Braid.  They’re all pushing the boundaries and offering unique interactive experiences.  The godfathers to me are developers such as David Braben, Peter Irvin and Jeremy Smith.

What is it about making a new game that you enjoy most?

I keep note books.  I write notes more than I draw.  This is probably an unhealthy thing for an artist but it seems to be the natural way I forge and incubate ideas.  Between this and prototyping a game has got to be the most enjoyable part of making a new game.  Results turn over quickly and the creation process is far more malleable than at the other end, the gruelling polish.  Releasing a game seems to bring stress and euphoria in equal measures :)

Do you have any hot projects you’re working on right now?

Icycle 2 is up next.  I have plans to really improve on the original in many aspects.  Hoping to release that early next year online and on iOS.  I’m extremely pleased with the port of the original, so I plan to release that together with the sequel.

Thanks Damp Gnat, we’re looking forward to Icycle 2!

© Colin Cupp for MochiLand, 2011. | Permalink | 6 comments

Add to del.icio.us

Search blogs linking this post with Technorati

Want more on these topics ? Browse the archive of posts filed under Developer Feed, Developer Spotlight, Flash Game Friday, MochiLand Topics, Publisher Feed.