This Is A Custom Widget

This Sliding Bar can be switched on or off in theme options, and can take any widget you throw at it or even fill it with your custom HTML Code. Its perfect for grabbing the attention of your viewers. Choose between 1, 2, 3 or 4 columns, set the background color, widget divider color, activate transparency, a top border or fully disable it on desktop and mobile.

This Is A Custom Widget

This Sliding Bar can be switched on or off in theme options, and can take any widget you throw at it or even fill it with your custom HTML Code. Its perfect for grabbing the attention of your viewers. Choose between 1, 2, 3 or 4 columns, set the background color, widget divider color, activate transparency, a top border or fully disable it on desktop and mobile.

How to make Angry Birds – part 1

Home/Making angry birds, Technical/How to make Angry Birds – part 1

How to make Angry Birds – part 1

Submit to StumbleUpon Share

Hello and welcome back to my blog!

This time I'm going to try something new. There are many tutorials for various techniques and tricks on the web, but what you don't often see is one that takes you through the development of a game, step by step from start to finish.

This is what I'm going to attempt here. I hope that it will provide some missing insight into the components that actually make up a working game and how to go about developing them.

I'm going to assume the reader is familiar with the basics of game development and I'm going to concentrate on the art and programming. At the end of this tutorial you will be able create a demo similar to this:

Angry Birds

So, the game I'm going to be making is to be based on the extremely popular Angry Birds by Rovio, a AAA title which cost some $140k USD to make.

Angry Birds

Obviously, since its just me making this I will have to take a few short-cuts and will be concentrating on the core part of the game.

Cloning

Before I start I should mention that I do not condone the cloning of games in any way; what I'm doing in these tutorials is purely for educational purposes and I have no plans to release the game at the end of this.

Analysis

Ok, lets have a look at the requirements for a bare-bones version of the game:

Graphics

  • Background, mid-ground and foreground layers
  • Bird characters,
  • Pig characters,
  • Slingshot,
  • Rigid body pieces - materials: wood, stone, glass in rectangle, square and triangle shapes

Code

Camera

  • Panning
  • Parallax
  • Zoom
  • Object tracking

Collision detection

  • Possible requirement for advanced broad-phase
  • Various static and dynamic shapes - rectangles, triangles, circles
  • Object colliding call-back system

Physics

  • Very stable physics engine
  • Integrated object sleeping system

Editor

  • Some kind of editor to allow layout of levels and creation of graphics. I'm using Flash CS4 for all this.

The Beginning

The first thing I'm going to tackle from that list is to get the world set up so that there is a nice looking environment and to root the project in something solid looking.

I started with the podium that the birds gets launched from; its going to be a static object in the physics system and to keep things simple I'm going to compose all objects from primitive parts, so collision wise at least the podium will be made from some squares and triangles.

Podium

As you can see, it's covered with a repeating earth texture, so the first thing is to make this. Its actually quite easy to do:

Process

The first part is easy, just pick two vaguely earthy colours and paint one half of the texture in each colour, with a nice rough overlap in the midddle.

Then, offset the image by half the width and height (I used photoshop's offset filter) to get the image in the middle. Then you can rough up the middle edge as you did in the first image. Once you're done you'll have a nice infinitely repeatable texture.

In order to actually apply this texture to an arbitrary object in Flash, you import the image onto the stage, then right click and and choose 'Break apart'. Then you can use the eye-dropper tool to pick that texture as a fill texture which you can then apply to any shape with the paint bucket.

Infinite repeats

Because we're making all collision objects from primitive shapes, we need to decide what basic shapes we're going to be using. I chose these for the podium:

Podium shapes

These can be rotated, duplicated and placed to form the podium shape:

Podium composed

So, when actually creating the shape for the visible part of the podium, its important to follow the exact same shape that you could compose only using the primitive collision shapes in various different configurations.

This will start to become very useful later when we try to integrate the physics system with the graphics.

Foreground

The foreground consists of another tiling shape; the soil. This was made from a rectangle, and lots of ovals in Flash, just repeated and placed. Its important to make sure it tiles so pay attention at the edges and use grid snap.

Foreground

Mid-ground

Yet another tiling shape, this time rolling hills with a few far off plants; nothing out of the ordinary here, just make sure it tiles. You'll want to make this one wider than the screen - I made mine roughly twice as wide:

Mid-ground

Background

Yes, you guessed it, tiling shapes again - this one is roughly one screen in size:

Background

Exporting

All these layers have been set to export for action-script in the Flash IDE; I've appended every name with Fla so that I can tell in code which classes are from Flash and which are my own.

Everything should now be exported as a .swc which you can enable in File->Publish Settings->Flash->Export SWC.

Then you can import this SWC into your project in your favourite flash code compiler; I'm using Amythyst because I cannot live without Visual Studio.

Putting it together

Of course, the idea with all these separate layers is that the code will place and animate them separately to give a parallax effect as the camera pans/zooms around the world.

Dimensions

I picked a screen size of 640x360 (wide-screen), and a world size of 2560x720 (four screens wide by two screens high). And I've centred the world at 0,0.

The Camera

Having a good camera class is fundamental to any game, particularly this one which requires lots of smooth pans and zooms.

At the very least it should provide functions for converting coordinates between world space and screen space and visa versa.

Because there are three layers of parallax at work, the camera needs to be able to position each one as it pans around the scene, so its constructor takes them as parameters:

public function Camera(background:MovieClip, midground:MovieClip, foreground:MovieClip, bird:Bird)
{
...
}

The bird parameter is just a dummy at the moment which represents the focal point for the camera - it contains accessors for position so the camera can know where in the world it is.

In order to get the camera to centre on the bird no matter where the bird is on screen we need to do a little bit of maths; forming what is known as the world to screen matrix, so called because it transforms points in world space into screen space.

public function Update( dt:Number ) : void
{
	m_worldToScreen = new Matrix();
 
	m_worldToScreen.translate( -m_bird.m_Pos.x, -m_bird.m_Pos.m_y );
	m_worldToScreen.scale( m_scale.m_x, m_scale.m_y );
	m_worldToScreen.translate( Constants.kScreenDimensions.m_x/2, Constants.kScreenDimensions.m_y/2 );
 
	m_foreground.transform.matrix = m_worldToScreen;
 
	// for screen->world matrix
	m_screenToWorld = m_worldToScreen.clone();
	m_screenToWorld.invert();
}

What's going on in the above function is: first the camera is centred on the bird, then any zoom is applied and finally we add on the centre of the screen to make sure the bird is in the centre (remember, 0,0 is the top left of the screen, not the centre).

We then take this matrix and apply it as the transform for the foreground geometry, so in actual fact the geometry moves around the camera, not the other way around - which is a bit difficult to get your head around at first.

The first translate in the above snippet is easier to understand with this in mind - 0,0 is the destination for the world geometry, coming from the position of the bird and 0-m_bird.m_Pos is the vector which achieves that.

Then I take a copy of this matrix and invert it so that I can do the opposite transform whenever I need to convert a point in screen-space to world-space.

To get the parallax effect on the back and mid-ground layers, I do a similar piece of maths for each layer (each layer getting its own world->screen matrix), the only change is that I divide the x translation by the layer's z-depth, which causes them to move at different speeds.

All this will work fine, but it won't prevent the camera from leaving the bounds of the world. In order to do that we need to understand the camera's relationship with the world.

So, lets take a look at the world, the camera and their relationship:

Figure 1

Figure 1 shows the entire extents of the world and also one possible location for the camera. Note that the camera has the dimensions of the screen.

In this configuration, the camera is actually showing a view which is partially outside the world, which should not be allowed to happen. In order to fix this problem we need to know exactly how far outside the camera is.

Figure 2

Figure 2 shows the measurements we need to correct this problem (the red arrows) and also shows in green, the camera's position after it has been corrected.

public function Update( dt:Number ) : void
{
	//
	// clamp camera to only show map
	//
 
	var translate:Vector2 = m_bird.m_Pos.m_Neg;
 
	var screenHalfExtents:Vector2 = new Vector2(Constants.kScreenDimensions.m_x/2, Constants.kScreenDimensions.m_y/2).Div(new Vector2(m_scale.m_x, m_scale.m_y));
	var mapExtents:Vector2 = Constants.kWorldAabb.m_HalfExtents.MulScalar( 2 );
 
	var topLeft:Vector2 = m_bird.m_Pos.Sub(screenHalfExtents);
	var bottomRight:Vector2 = m_bird.m_Pos.Add(screenHalfExtents);
 
	var correctLeft:Number = Math.min(topLeft.m_x+Constants.kWorldAabb.m_HalfExtents.m_x, 0);
	var correctTop:Number = Math.min(topLeft.m_y+Constants.kWorldAabb.m_HalfExtents.m_y, 0);
 
	var correctRight:Number = Math.min(Constants.kWorldAabb.m_HalfExtents.m_x-bottomRight.m_x, 0);
	var correctBottom:Number = Math.min(Constants.kWorldAabb.m_HalfExtents.m_y-bottomRight.m_y, 0);
 
	translate.m_x += correctLeft - correctRight;
	translate.m_y += correctTop - correctBottom;
 
        ...
}

The above is the code which calculates the red arrowed regions shown in Figure 2, and applies any corrections needed to the initial translation of the camera.

There is one caveat to watch out for: the foreground layer is a child of the main MovieClip which makes up the game - this is essential because otherwise the camera would only be translating the foreground shape and not everything in the world, which would be all bad. However, because the camera is translating the main MovieClip, the mid and background layers cannot be children of it. Instead, they must be children of the stage; this allows them to be translated independently to give the correct effect.

Create a tile strip

This is relatively simple, you just divide the width of the world by the width of a tile to get the number of repetitions, set the starting point and then just instance the correct MovieClip:

private function CreateTileStrip( start:Vector2, type:Class ):MovieClip
{
	var obj:* = new type();
	var mc:MovieClip = MovieClip( obj );
	var tileRoot:MovieClip = new MovieClip( );
 
	var worldWidth:Number = Constants.kWorldAabb.m_HalfExtents.m_x*2;
	var numTiles:int = (worldWidth/mc.width) + 1;
 
	for ( var i:int = 0; i<numTiles; i++)
	{
		var x:Number = i*(mc.width-1);
 
		mc.x = x + start.m_x;
		mc.y = start.m_y-mc.height;
 
		tileRoot.addChild( mc );
 
		obj = new type();
		mc = MovieClip( obj );
	}
 
	return tileRoot;
}

And you call it like this:

m_backgroundLayer = CreateTileStrip( bottomLeft, BackgroundTileFla );
m_midgroundLayer = CreateTileStrip( bottomLeft, MidgroundTileFla );
m_foregroundLayer = CreateTileStrip( bottomLeft, ForegroundTileFla );

I was actually pleasantly surprised how easy it was to pass a class as a type in actionscript, much easier than in c# or c++ and it really makes it simple to tile any shape that you export from the Flash IDE.

The demo

Ok, so here is the demo so far:

It demonstrates a continuous loop of zooming and panning, three layers of parallax and will not allow the camera to move outside of the world.

The source

As ever, please if you like this article buy the source code (and in this case assets as well) so that I can produce more of this series; your contribution makes a real difference!

It will include all the code which produced the demo above and in addition, all the artwork as well, which you will need Flash CS4 to edit. You are free to use this however you like, even in commercial applications - the only thing I ask is that you don't give it wholesale to anyone else.

After purchasing, you will be redirected to a page where you can download the source immediately.

USD 4.99

Subscribers can access the source here

Continue reading part 2 here

Have fun,

Cheers, Paul.

Submit to StumbleUpon Share
By | 2017-05-25T17:55:27+00:00 May 12th, 2011|Making angry birds, Technical|89 Comments

About the Author:

A games industry veteran of ten years, seven of which spent at Sony Computer Entertainment Europe, he has had key technical roles on triple-A titles like the Bafta Award Winning Little Big Planet (PSP), 24: The Game (PS2), special effects work on Heavenly Sword (PS3), some in-show graphics on the BBC’s version of Robot Wars, the TV show, as well as a few more obscure projects.   Now joint CEO of Wildbunny, he is able to give himself hiccups simply by coughing.   1NobNQ88UoYePFi5QbibuRJP3TtLhh65Jp

89 Comments

  1. Nick Cowen (Nickenstein) May 13, 2011 at 5:14 am - Reply

    This is awesome! 😀

  2. Javier May 13, 2011 at 1:17 pm - Reply

    Thanks!!!!!!!

    Peruvian Represent! 🙂

  3. Caroline May 13, 2011 at 2:45 pm - Reply

    Hello,

    It is really nice to see the computer graphics matrix theory applied in action! The parallax is a nice, effect, thanks for showing how easy it is to achieve with some basic Matrix arithmetic.

    I have a nit pick regarding the last function:

    var numTiles:int = (worldWidth/mc.width) + 1;

    If by chance mc.width evenly divides worldWidth you will end up creating an extra tile. That’s not a real problem here, but it’s not the best way to go about dividing. I would go with:

    if(worldWidth % mc.width==0)
    numTiles = worldWidth/mc.width;
    else
    numTiles = worldWidth/mc.width +1;

    Greetings from fellow AS programmer,
    Caroline

    • Paul Firth May 13, 2011 at 2:47 pm - Reply

      Ah, yes! Good spot Caroline, thanks 🙂

  4. onedayitwillmake May 13, 2011 at 10:57 pm - Reply

    Excellent article, and /articles/

    Off topic question but where is that 140k cost from? How did it cost that much to make that game when they’re using Box2D and that game is basically the Box2d demo?

    • Paul Firth May 13, 2011 at 11:17 pm - Reply

      Thanks! 🙂

      I have literally no idea – I’m betting a lot of that is marketing spend, and maybe there were a lot of failed prototypes?

      I didn’t realise they were using box2d, that’s interesting! 🙂

      Cheers, Paul.

    • foljs October 16, 2011 at 12:51 am - Reply

      “Basically the Box2d demo”?

      Last time I checked the Box2D demos looked like this:
      http://box2d.org/screenshots.html

      Not exactly salable material.

      And it’s just the physics engine. You need all the other handling code too. And you need graphics. And you need to pay your graphic designer and your coders to finish it and debug it and polish it.

  5. Mike Vargas May 14, 2011 at 12:24 am - Reply

    I haven’t had a chance to read through this in its entirety but this is an awesome idea and it looks like a great tutorial. Keep up the good work!

    • Paul Firth May 14, 2011 at 11:16 am - Reply

      Thanks Mike! 🙂

  6. Dave May 25, 2011 at 1:42 am - Reply

    would there be part two? I just downloaded your files. Cool tutorial.

    • Paul Firth May 25, 2011 at 9:41 am - Reply

      Hi Dave,

      Yes, part two is on the way 🙂

      Cheers, Paul.

      • Dave May 25, 2011 at 11:23 am - Reply

        that’s awesome. ive been looking for this kind of tutorial over the internet. when will be the next tutorial. im willing to pay 🙂

        • Paul Firth May 25, 2011 at 1:33 pm - Reply

          Hopefully the end of this week/beginning of next 🙂

          • Dave June 7, 2011 at 12:32 pm

            Hey. It’s almost a month. Is the part 2 coming soon? I’m so excited.

          • Paul Firth June 7, 2011 at 2:36 pm

            Sorry Dave – I had some bugs and features to work out 🙂 I’m literally writing the pt2 article as we speak 🙂

          • Dave June 8, 2011 at 2:39 pm

            cool! is this it? or there’s more?

          • Paul Firth June 8, 2011 at 3:14 pm

            Depends if enough people buy it 🙂 This one took a long time to make, so it needs to pay for itself!

  7. Doug May 27, 2011 at 2:57 am - Reply

    Have you thought of using Box2d Flash for the Physics?

    • Paul Firth May 27, 2011 at 9:26 am - Reply

      Hi Doug,

      That would be the totally logical choice in the real world – but then again, physics is what I do (or did do anyway) so I think I can probably cover some of the things you don’t often see talked about by writing it myself in the hope it will help others… Lets see how it turns out! 🙂

      Cheers, Paul.

  8. Virtue June 3, 2011 at 6:06 pm - Reply

    — Quote —
    I was actually pleasantly surprised how easy it was to pass a class as a type in actionscript, much easier than in c# or c++ and it really makes it simple to tile any shape that you export from the Flash IDE.
    — End Quote —

    This is not true at all, in c++ you can use templates and in c# you can use both generics and Type parameter passing.
    Having used either templates or generics () you have gained precious compiler time error checking. You can’t do this in flash.

    • Paul Firth June 3, 2011 at 6:20 pm - Reply

      Its perfectly true – flash handles the actual passing of a type much more cleanly than c# and certainly c++ doesn’t have anything like that.

      If you use Type in c# you start dealing with the pain of reflection, flash is more elegant.

      You lose the type checking, this is true, but flash isn’t a strongly typed language anyway for better or worse (worse in my opinion) 🙂

      • Virtue June 3, 2011 at 7:50 pm - Reply


        private function CreateTileStrip( start:Vector2, type:Class ):MovieClip
        {
        var obj:* = new type();
        var mc:MovieClip = MovieClip( obj );
        ...
        }

        C# equivalent:
        1.

        private MovieClip CreateTileStrip(Vector2 start) where T : MovieClip, new(){
        T mc = new T();
        ...
        }

        This is the cleanest way possible, with compile time error checking.

        2.

        private MovieClip CreateTileStrip(Vector2 start, Type type){
        MovieClip mc = (MovieClip)Activator.CreateInstance(type);
        ...
        }

        This is equivalent of the flash code, runtime error checking only.

        In C++ you can write something similiar to #1 using templates.

        • Virtue June 3, 2011 at 7:52 pm - Reply

          Hmm is this HTML formatted, because it didn’t display the “less than” and “greater than” after CreateTileStrip.
          CreateTileStrip<T>

        • Paul Firth June 3, 2011 at 8:33 pm - Reply

          Yes, you’re right; its certainly true as you’ve demonstrated there – the c# version is equivalent to the AS3 version.

          There is one thing you can’t do, though in c#, which is to store the class type as a variable and then pass it to CreateTileStrip(). Now, I know i’m not doing that in this example, but I have used that pattern before – and its this which is neater in AS3, IMO 🙂

          • Virtue June 4, 2011 at 9:25 pm

            Of course you can do it:)
            Type useMeLater = typeof(MovieClip);

            CreateTileStrip(vector, useMeLater);

          • Paul Firth June 5, 2011 at 8:52 pm

            Ah yes, but you can’t write:

            Type useMeLater = typeof(MovieClip);
            CreateTileStrip<useMeLater>(vector);

            which is whats required isn’t it?

            Cheers, Paul.

          • Virtue June 6, 2011 at 5:20 pm

            That is true, but it makes sense that you can’t do it.
            Compiler just can’t guess whether useMeLater in CreateTileStrip<useMeLater>(vector) is of type MovieClip at compile time.
            For example this is used a lot in functional programming:
            Function1<T, S>(…){
            Function2&ltT>(…);
            Function3<S>(…);
            }
            As my friend says you can code without worries of making a mistake, because it would not compile.
            Though in my opinion not using it makes the code sometimes more readable.

          • Paul Firth June 6, 2011 at 7:31 pm

            The trouble is, if you need to use that pattern in c# you’re forced to use reflection which is a pain IMO… Don’t get me wrong, I much prefer the type safety of c# over actionscript, but I do find the fact that AS3 has a Class variable type to be a more elegant way of dealing with dynamic types than reflection in c# 🙂 However, if I’m able to use generics I always try to do that in c#.

            Cheers, Paul.

          • Virtue June 7, 2011 at 8:43 pm

            Reflection can be really slow at times, especially when you parse through class properties/members.
            I’ve learned to accept it for you can do nice things with it, like Attribute tags:

            public class Document{
            [NameBinding("name")]
            public string Name { get; set; }
            [NameBinding("address")]
            public string Address { get; set; }
            ...
            }

            Now when you reflect the class you can match the property with the correct field in document(e.g. word).
            Makes things really pretty.

  9. […] Members ← How to make Angry Birds – part 1 […]

  10. Semana de E3 | ~/jose152 June 8, 2011 at 7:54 am - Reply

    […] Como crear Angry Birds: /blog/2011/05/12/how-to-make-angry-birds-part-1/ […]

  11. Web design forum June 8, 2011 at 9:08 am - Reply

    What language are you using to make this?

    • Paul Firth June 8, 2011 at 10:13 am - Reply

      Hi there,

      I’m coding in flash 🙂

      Cheers, Paul.

  12. Rin June 8, 2011 at 5:01 pm - Reply

    This is so cool. Thanks for doing this, the flash community is suffering so bad right now, especially because of Evil Apple, that this effort is greatly appreciated. It reminds me of why i decided to learn Actionscript in the first place, simply because of great developers like you sharing their knowledge with everyone. You sir, are the Man 🙂

    • Paul Firth June 8, 2011 at 6:02 pm - Reply

      Hey no problem 🙂 Glad you enjoyed it!

  13. […] to make Angry Birds tutorialsThis and this are the two of the greatest game programming tutorials I have ever read.A must read for […]

  14. […] How to make Angry Birds – part 1 | Paul's blog@Wildbunny (tags: programming tutorial design howto tutorials) […]

  15. […] How to make a Angry Birds – part 1 Comparte esta entrada: […]

  16. […] How to make Angry Birds – part 1 | Paul’s blog@Wildbunny (wildbunny.co.uk) […]

  17. marq July 6, 2011 at 9:37 pm - Reply

    hi,

    I purchased part 1 of this and I am trying to convert your code to use with the Corona SDK, would you ever consider converting this to Corona?

    • Paul Firth July 6, 2011 at 9:56 pm - Reply

      Hi Marq,

      I’ve no idea what Corona is! … Ok , just googled it! 🙂

      Ok, as it stands the answer is no because I simply don’t have the time to get into mobile development right now… All my time is taken up with my flash work 🙂

      Cheers, Paul.

  18. ??????? » [Web] ???? July 11, 2011 at 4:26 pm - Reply

    […] How to make Angry Birds – part 1 […]

  19. […] How to make Angry Birds – part 1 | Paul’s blog@Wildbunny /blog/2011/05/12/how-to-make-angry-birds-part-1/ […]

  20. George August 15, 2011 at 1:39 am - Reply

    Paul,
    Great tutorial. I’m new to all of this, so I’m trying to really understand all the methods you used to create such a demo? My question is other tutorials I’ve come across use box2d, looking over your tutorial I’ve been trying to see what version you are using but do not see you mention anything? Either that or I must be missing it? Also, part two you are selling the code for 49.99 and here it’s 4.99? Does part two include the code from here as well?
    Sorry, I would really love to learn how to do this kind of coding and have one to many questions since my teacher has no clue on what or how to do this sort of stuff.
    George =)

    • Paul Firth August 15, 2011 at 9:29 am - Reply

      Hi George,

      I’m not using box2d – I made my own custom physics engine just for this demo, to show programmers what it takes to write your own solution 🙂

      Cheers, Paul.

  21. Angry Birds Flash September 17, 2011 at 5:46 am - Reply

    Hi,
    Thanks for sharing valuable blog article post and it provides fantastic online game for everyone on PC.
    Angry Birds Flash

  22. Chris October 4, 2011 at 4:47 pm - Reply

    Do you have any idea on how to make a level selection screen? If so can you help us?

    • Paul Firth October 4, 2011 at 6:50 pm - Reply

      I would make a template for the level icon in the flash ide and then programatically display and array of them on screen with the appropriate level name and just stick an onClick handler on each one so you can tell which one was chosen 🙂

  23. aprenderingles October 16, 2011 at 11:36 pm - Reply

    I do not know much English, but i want to make this game!!
    thanks for the tutorial !

  24. […] birds tutorial How to make Angry Birds – part 1 | Paul's blog@Wildbunny Guessing not many people here do work in Flash, but if anyone is, there might be a useful tutorial […]

  25. […] affordable, fun entertainment for the whole family. Visit http://www.selectsoft.com to learn more.San Mateo, CA (PRWEB) July 27, 2011 Quick, name that game: Fling crazy ammunition to destroy the wal… creators of Angry Birds have said their massive mobile hit drew inspiration from other games. One […]

  26. […] camera system I used here is much the same as the one I’ve described previously in this article, so I won’t repeat […]

  27. Mike January 4, 2012 at 9:49 am - Reply

    Hey can you make a video for this ?
    Pleeeasee..

  28. […] How to make Angry Birds – part 1 How to make Angry Birds – part 2 […]

  29. Development by sarajin - Pearltrees January 11, 2012 at 7:22 am - Reply

    […] This time I’m going to try something new. There are many tutorials for various techniques and tricks on the web, but what you don’t often see is one that takes you through the development of a game, step by step from start to finish. This is what I’m going to attempt here. I hope that it will provide some missing insight into the components that actually make up a working game and how to go about developing them. Hello and welcome back to my blog! How to make Angry Birds – part 1 | Paul's blog@Wildbunny […]

  30. […] purchasing, you will be redirected to a page where you can download the source immediately.?source:wildbunny? ???? QQ?? ???? ??? […]

  31. ??????????????????1? | ???? January 17, 2012 at 8:28 am - Reply

    […] purchasing, you will be redirected to a page where you can download the source immediately.?source:wildbunny? ???? 2012?1?17? | ??? ????? « […]

  32. Alexis March 1, 2012 at 11:59 am - Reply

    Hi Paul,
    bought your source code, looks great! However, experiencing some troubles with compiling from Flash Develop (I use Flash CS4). Do you think you could post some short tutorial/instructions how to compile properly your source code in Flash Develop? Appreciate it! Get no errors, but compiled swf does not work – static, guessing something wrong with paths/references..

    • Paul Firth March 1, 2012 at 12:02 pm - Reply

      Hi Alexis,

      Things to check: are the class-paths set correctly in CS4 when you exported the .swc?

      Did you get any warnings when compiling in FlashDevelop?

      Very strange to have no errors at all, and then a blank window…

      Cheers, Paul.

  33. Alexis March 1, 2012 at 6:57 pm - Reply

    Ok, thanks. Checked all paths. When build/compiled från FD get 4 errors (playing with pt1): src\Code\AngryBirds.as:17: 1046: Type was not found or was not a compile-time constant: PodiumFla, 1180: Call to a possibly undefined method PodiumFla, etc

    Project structure as:
    AngryBirds/bin + lib + scr,
    scr/Assets.fla,
    src/Code/…as files,
    lib/Assets.swc as library asset

    in Flash CS4: classpath as Code.AngryBirds
    What I am doing wrong?

    • Paul Firth March 2, 2012 at 9:25 am - Reply

      Hi Alexis,

      Have you tried to compile the project as it came without first exporting from CS4? That will tell us if the problem is CS4 or with the actual FlashDevelop project…

      Cheers, Paul.

      • Alexis March 2, 2012 at 11:41 am - Reply

        Hi Paul,
        yes, of course – the same error in pt1.. but, I got pt2 working- cool! However, for some reason, the last level (nr3) is always in the stage after compiling, so I have double of everything 🙂 Why? Strange, I’m going to keep debugging, but it works at least..

        • Paul Firth March 2, 2012 at 12:08 pm - Reply

          Ok, so the project pt1 fails to compile as it first came?

          Hmmm, I’ve never seen a problem with double of everything before – is this fresh out of the box, as it were, or has it been modified and exported from CS4?

          Cheers, Paul.

          • Alexis March 2, 2012 at 12:44 pm

            Ok, got it working completely! Even made some new levels to test – amazing work Paul! Thank you once again. The problem was a MovieClip on a stage in the ‘out of the box’ .fla file, removed it and everyhting works smoothly, even without FD. I just exported directly from CS4 and all changes visible right away..

          • Paul Firth March 2, 2012 at 1:04 pm

            Great, glad you got it working 🙂 Sorry you were having problems!

  34. Startups | Pearltrees March 6, 2012 at 9:30 pm - Reply

    […] How to make Angry Birds – part 1 | Paul's blog@Wildbunny I started with the podium that the birds gets launched from; its going to be a static object in the physics system and to keep things simple I’m going to compose all objects from primitive parts, so collision wise at least the podium will be made from some squares and triangles. The first thing I’m going to tackle from that list is to get the world set up so that there is a nice looking environment and to root the project in something solid looking. Podium […]

  35. pimplepaars March 9, 2012 at 1:52 pm - Reply

    hey im trying to make a game in gamemaker, sort of an angry birds game. but with pokemons in stead of birds could you tell me how to start?

    • Paul Firth March 12, 2012 at 3:09 pm - Reply

      Hi there,

      Sorry, gamemaker is not something I’m familiar with – I suggest a quick google for some related tutorials? 🙂

      Cheers, Paul.

  36. Alexis March 18, 2012 at 5:32 pm - Reply

    Hi Paul,
    working with your scripts for some time now – amazing work men!
    Question: is it possible to make dynamic triangles as well (may be even octagons)? Seems like it narrowed to 2-3 files where it has to be specified or is it more complex task? Thanks for any tips on that!

  37. riz April 15, 2012 at 6:29 pm - Reply

    Hello Paul…nice tutorial…do u have email or Skype? Thanks.

    • Paul Firth April 15, 2012 at 6:35 pm - Reply

      Hi, click ‘Contact me’ on the menu bar 🙂

  38. soheila May 31, 2012 at 6:19 pm - Reply

    hi paul!
    how are u?!
    plzzz help me…!!!!!i need to the angry birds source code in java or c++ completely!plz send me very very….. soon.
    thanks so much!

    • Paul Firth May 31, 2012 at 6:51 pm - Reply

      Hi Soheila,

      Unfortunately I do not have the source code in java or c++, its only available in AS3, sorry! 🙂

      Cheers, Paul.

  39. ertugrul June 4, 2012 at 12:16 am - Reply

    Hello.. Good works.. And i have a question.. If we want to make this game for android, what must we do? Can we make it in Flash, too?

    • Paul Firth June 4, 2012 at 12:30 pm - Reply

      Hi,

      Yes, you can use flash via adobe air on andriod 🙂

      Cheers, Paul.

  40. Jose June 4, 2012 at 11:42 pm - Reply

    Hello Paul, I have a problem trying to implement zooming at the game..please could you give me some ideas how to implement that?….
    Nice Work!

    • Paul Firth June 5, 2012 at 12:11 am - Reply

      If you have the source code accompanying this article simply change the value of m_scale inside Camera.as 🙂

      Cheers, Paul.

  41. Henry McLaughlin June 20, 2012 at 2:34 am - Reply

    I would like to buy the source, so I tried to register for your site (thank you very much for this tutorial). But I haven’t received a confirmation e-mail and it won’t let me login.

    Is there something on your site you need to occasionally give a kick?

    Thanks again!

  42. Willian August 25, 2012 at 10:55 pm - Reply

    Paul Firth Hello, my name is William and I am your big fan, I really want to buy that source more I’m Brazilian, I do not have the U.S. currency.
    Please, pass me the source code, I beg you, Please!
    please!
    please!
    please!
    please!
    please!
    please!

    • Paul Firth August 26, 2012 at 11:34 pm - Reply

      Hi there,

      PayPal converts automatically from your native currency into USD – you don’t need a paypal account you just need a credit card 🙂

      Cheers, Paul.

  43. Willian Dutras September 1, 2012 at 4:39 pm - Reply

    What should I buy, to $ 49.99 or $ 4.99 for?
    I await response …

    • Paul Firth September 2, 2012 at 12:15 am - Reply

      Sorry, I don’t understand the question?

  44. Willian Dutras September 2, 2012 at 1:58 am - Reply

    Which code should I buy, the first costing $ 4.99 or the second source code, which costs $ 49.99

    • Paul Firth September 2, 2012 at 11:34 am - Reply

      Depends what you’re after – the 2nd code contains all of the 1st, so no need to buy pt1 if you buy pt2 🙂

  45. spandana July 11, 2013 at 4:36 pm - Reply

    hey i’m planing 2 do mini project on this game is it possible if so can you please send me the program 2 my mail id how 2 write the program in ‘c’ or c++ language…

    • Paul Firth July 11, 2013 at 4:53 pm - Reply

      Sorry, it’s only in AS3 🙂

  46. rm July 19, 2013 at 9:01 pm - Reply

    Hello,

    I was wondering is this the same way they created Angry Birds? I am barely learning how things are created, could you tell me what are all the things they used to create the game? Thanks so much.

    • Paul Firth July 23, 2013 at 9:33 am - Reply

      Hi there,

      Rovio used Box2d to create the original game.

      Cheers, Paul.

  47. I would make a template for the level icon in the flash ide and then programatically display and array of them on screen with the appropriate level name and just stick an onClick handler on each one so you can tell which one was chosen 🙂

Leave A Comment