Published: 30 Apr 2012
By: Xianzhong Zhu
Download Sample Code

AngryBirds, as a strategy puzzle mobile game developed by Finnish computer game developer Rovio Mobile, has now become worldwide. In this series, from the viewpoint of a mobile developer, I want to try to find out some of the how-toes by developing a similar game named MWAngryBirds that runs on the Android operating system using the WiEngine SDK

Contents [hide]

The Create Android AngryBirds Game Using WiEngine SDK Series

  • Part 1 AngryBirds, as a strategy puzzle mobile game developed by Finnish computer game developer Rovio Mobile, has now become worldwide. In this series, from the viewpoint of a mobile developer, I want to try to find out some of the how-toes by developing a similar game named MWAngryBirds that runs on the Android operating system using the WiEngine SDK.
  • Part 2 Starting from this article I'm going to introduce how to compose the main UIs in creating the AngryBirds game.
  • Introduction

    AngryBirds, as a strategy puzzle mobile game developed by Finnish computer game developer Rovio Mobile, has now become worldwide. As a great successful game, first developed for Apple's iOS and then transplanted to other touch screen-based smart phones, there are far more worthy for us to dig into. In this series, from the viewpoint of a mobile developer, I want to try to find out some of the how-toes by developing a similar game named MWAngryBirds that runs on the Android operating system using the WiEngine SDK developed by the leading Chinese mobile game publisher Wiyun. To grasp the entire series of articles, you need to have sufficient prerequisite knowledge, such as general Android development tips, Box2D, and WiEngine SDK. Though, the good news is if you are an iPhone cocos2D developer and do not want to install WiEngine SDK, you can easily find that most of the concepts and organization of WiEngine are quite similar to cocos2D.

    NOTE

    The sample test environments in this series involve:

    1. Windows 7;

    2. .NET 4.0;

    3. Java SE Development Kit (jdk-6u24-windows-i586.exe);

    4. Eclipse Helios (eclipse-java-helios-SR2-win32.zip);

    5. Android SDK (android-sdk_r08-windows.zip);

    6. WiEngine SDK 3.8 (http://www.wiyun.com/wiki/DownloadSDK__en).

    What are Wiyun and WiEngine SDK

    Wiyun is an IT company, founded in 2009, headquartered in Beijing. WiEngine was released by Wiyun in May 2010, as the Android/iOS cross-platform game engine and in the form of free usage for any commercial or free applications and non-open source. WiEngine references to the most concepts in the famous engine cocos2d on the iPhone platform, so you will find many basic concepts in WiEngine are pretty similar to those in cocos2d. It is worth mentioning that there are plenty of samples and help documents shipped with WiEngine SDK helping beginners to quickly start.

    On the whole, WiEngine supports the following outstanding features and effects:

    • Support cross-platforms, such as Android, iOS, Mac OS X
    • Support Java development (non cross-platform) and the cross-platform C++ development
    • Scene management and switching effects
    • Pictures and Atlas, also support PVR format
    • Advanced 3D effects: lens, ripple, liquefy, and distortions, etc.
    • Particle system
    • Various kinds of actions support
    • Abundant interface components, from ordinary buttons, menus, to high-level CoverFlow and PageControl
    • Text rendering (ttf font, bitmap font, the system default font, long text automatically wrap)
    • Tile map (TGA, Array, TMX, etc.)
    • Parallax scrolling
    • Location tracking and feedback
    • System events (touch, multi-touch, accelerator, keyboard, etc.)
    • Physics engine (Chipmunk and Box2D)
    • Lua script
    • Memory file system
    • Sound engine: WiSound
    • AFC animation support (Motion Welder, SpriteX 3.9.4/2011, Arctic, AuroraGT)
    • Mapping filter
    • Persistence support (Preference, sqlite3)
    • Augmented Reality (OpenCV)
    • A variety of screen adaptive modes: density adaptation, the basic size adaptation
    • Resource protection mechanism

    In the next section we are going to glance over the main concepts and the general architecture in creating a WiEngine SDK based mobile game.

    Main Concepts and Architecture Flow for a Game

    This section will introduce the main related concepts of WiEngine. Note that if you understand cocos2d, you will have a better understanding of this section.

    1. Coordinate system

    Android's default coordinate system is: the original point is in the upper left corner, with x and y-axis positive to the right and down. In contrast, the OpenGL coordinate system is: the original point is in the lower left corner, with x and y-axis positive to the right and up. WiEngine uses OpenGL coordinate system, so remember when you set some coordinates be sure to make them relative to the lower left corner.

    2. Scene

    Regardless of applications or games they are all composed of many interfaces, jumping between the interfaces forms the operational processes in these applications or games. In WiEngine, all these interfaces are called scenes. A typical game can be divided into three scenes, a load interface, a menu interface, and a game main interface. WiEngine provide Scene object, supporting scene switch between the various effects.

    3. Node

    Node is the top-level concept in WiEngine, which represents something in a game. Scene is a subclass of Node. The Node class is the parent class of a lot of gadgets, such as menus, sprites, mapping, and so on. The nodes can contain child nodes, so they can form a tree structure. When the game is drawn the operation starts from the root until all the nodes are drawn completely, so that a frame is rendered.

    For more info about Node please refer to the help documents.

    4. Director

    Director is quite like that in cocos2D. Director is defined in a singleton form. Whether at the end or the beginning of a game it needs to call the Director's corresponding initialization or destruction methods. Director provides some methods to manage scenes, such as runWithScene, pushScene, replaceScene, through these APIs developers can achieve the effects of switching from one scene to another.

    Moreover, developers can obtain or set some system information through the Director, such as adjusting the OpenGL settings, getting the screen size. In a word, the Director serves as a bridge between the developers and WiEngine.

    5. Layer

    Layer is also a subclass of the Node, it can be used as a child node of the scene, added to the scene. So the scene can also have multiple layers. We can display different layers as needed. Of course, you can also not use layers, all this being up to you.

    6. Sprite

    In WiEngine Sprite mainly represents an image related resource, such as a character loaded from a PNG image. Sprite is a subclass of the Node, so Sprite has some of the characteristics of the nodes should have. There is also a special Sprite named AtlasSprite, which provide strong support for abstracting small scraps of pictures out of a big image, which is a typical solution in most large games. For more details concerning AtlasSprite, you can refer to the SDK materials.

    7. Action

    A game often needs animations or interactive operations. WiEngine provides a common framework for Action for this demand. Action shows how to do an effect, while the node is the carrier of the effect. Through the Node.runAction() method an Action can be executed on any node. Action bears many subclasses, each of which corresponds to an action or special effects, and more actions can also be combined together to form a new effect, for example, both the rotation and scaling.

    Next, let's first look at the architecture and main flow chart in WiEngine and WiEngine based game applications.

    Figure 1: WiEngine framework diagram overview

    WiEngine framework diagram overview

    Next, we are going to give a skeleton description of a WiEngine-based application life cycle flow chart, which describes the relationships among the three objects: the Activity life cycle, the Surface life cycle, and the trigger time of IDirectorLifecycleListener, as depicted in Figure 2 below.

    Figure 2: WiEngine lifecycle overview

    WiEngine lifecycle overview

    Note in the lower right part of the figure I put the WiEngine mark which is required in any WiEngine based products. To deeply grasp the idea in the figure, you'd better look into the shipped samples.

    WiEngine Skeleton Project

    In this section, I'm going to first introduce to you the skeleton project in creating a WiEngine SDK based Android game, so that you can keep up with what I'll talk about in subsequent articles. Here is the complete outline code for such an application.

    On the whole, there are the following points worthy for your attention:

    1. The game main activity should be inherited from the interface IDirectorLifecycleListener which is responsible for listening to the whole lifecycle of the game application by providing corresponding methods.

    2. You should refer to the necessary libraries, such wiskia, xml2 and wiengine, while others can be neglected according to the factual applications.

    3. In the method onCreate of the activity, you should often add a lifecycle listener to the activity by invoking the method addLifecycleListener of the Director instance. And also, to facilitate debugging the application, the method setDisplayFPS(true) is suggested to be called to show the factual refresh frequency per second for the developers to better application performance. In final release of your product, however, it should be removed.

    4. In the methods of the activity, the associated methods, such as pause, resume, end, of the Director instance should also be called. In most cases, you need do nothing special but to obey this rule (as indicated above).

    5. The scene FirstScene is the only Scene that runs in the above sample. The reason why we add and run the scene in the onSurfaceChanged function has been explained thoroughly in the in-between comments.

    Besides the above, we should also note that in the onCreate method we've also set up an instance of GLSurfaceView for the director instance because WiEngine also uses OpenGL as the render.

    Next, let's look at how the game is constructed.

    Here, we create a simple and only one Scene that holds a simple Label at the center of the mobile screen. For more details concerning the WiEngine gadgets, you can refer to the various samples shipped with WiEngine SDK.

    Next, let's look at another simple sample associated with the Box2D stuff, which may be the real interesting things that start to attract you in this article.

    An Elementary Box2D Sample Using WiEngine SDK

    First all, let's take a look at one of the running-time snapshots in this sample, as shown in Figure 3.

    Figure 3: A simple ball is falling to the ground

    A simple ball is falling to the ground

    In this sample, we create a simple springy rigid ball falling from the sky to the ground. As designed, you can drag the ball all around to see the basic physical collision phenomena as you would see in other Box2D product. In addition, the FPS is shown at the lower left corner, which is quite acceptable. A fact is to run Box2D game in an Android virtual machine is pretty unacceptable, so to create Box2D games you are highly recommended to debug it via your real mobile.

    The behind code is also simple, as shown below.

    There are still some things to stress. First, Box2D is designed as a Node (named wyBox2D) in WiEngine to simplify the related operations. Without explicit specification, the original point of Box2D is same as the WiEngine (which uses OpenGL coordinate system), which is in the lower left corner. Once we specify the original point of Box2D, all the other objects in the Box2D world should refer to it.

    Second, before you put other Box2D objects you should add Box2D as a node of the target layer. After that, you can set up other Box2D stuff and establish their relationships as you do in other platforms-supported Box2D engines. In the above case, we use a helper function pixel2Meter of Box2D to convert pixel to meter in 2D world; another helper function meter2Pixel of Box2D does the converse thing.

    Third, WiEngine only wraps Box2D up in a simple degree as shown above.

    Last but not the least is the scheduler introduced in WiEngine, which is used to launch a specified task together with a timer (you can define it explicitly or using the default one). In particular, WiEngine introduces a class TargetSelector working together with the scheduler, which largely enhances the flexibility of the scheduler.

    NOTE:

    If you are familiar with Objective C you are sure to know selector which, through a string, describes a method. WiEngine refers to this concept to provide the similar function as the selector in Objective C. For more related details, please refer to the WiEngine help documents.

    In the above case, we called schedule by passing an instance of TargetSelector to schedule the function update that is defined in the super class Box2DLayer (as depicted below). Note here we have to pass it a float type of argument with the value 0f to specify the interval time (since we cannot decide the time yet we simply give it the value 0f) to schedule the update function. In fact, the method update serves the similar role as the game loop.

    Well now, let's look at how the super class Box2DLayer is defined.

    The most attractive point should be the interface IQueryCallback which defines merely one method named reportFixture. In the above case, it works together with the method queryAABB of the World instance. Note by invoking the method queryAABB the corresponding method reportFixture will be triggered asynchronously. This is why the statement if (mFixturePointer != 0) that follows the method queryAABB invocation comes into being. In most cases, this technique is used to exactly locate the finger touched location (which is further used to get the object in a pile of complex Box2D objects) on the screen.

    The second thing attracting your eyes may be MouseJoint. In fact, in most of the latest touch screen-based mobile games, MouseJoint plays an important role. Here, besides the above two methods, the other four ones, wyTouchesBegan, wyTouchesMoved, wyTouchesCancelled, and wyTouchesEnded should be taken into consideration together to interact with the mouse joint.

    As WiEngine SDK material implies, to create cross-platform mobile game based upon WiEngine the developers have to use C++ rather than Java. And, on the other hand, the Java version is in fact a simple encapsulation of the C++ version, so you should appropriately comprehend statements such as Fixture f = Fixture.from(fixturePointer);.

    The last thing to note is the ground Body. In defining MouseJointDef, we specify the first body (BodyA) to be the ground, while specify the second body (BodyB) to be the target object itself. There are not other arguments required to be supplemented to the ground body.

    For the complete source code, you can refer to the downloadable project accompanying this file.

    Till now, we've just scratched the surface of the splendid Box2D goodies. So, to follow up with the whole series, you should beforehand have a good understanding with the Box2D knowledge.

    Next, let's shift our mind to one of the really interesting topics in this series – how to create the parabolic movement when the player drags the bird in the catapult and then release it.

    AngryBirds Game Case 1 – Bird Parabolic Movement

    This story is too lengthy; we are going to divide it into several pieces to facilitate discussion.

    Snapshots

    First of all, let's look at the final results of this sample (still in its infancy), as shown in Figure 4 and 5, respectively. At the very beginning, one of the birds (represented using the red ball) sits in the catapult and waits to be launched out.

    Figure 4: The bird waits to be launched

    The bird waits to be launched

    When you drag the red ball (simulating the fly bird), it will fly along a parabolic path toward where its rivals (the pigs) hide. Figure 5 indicates another running time snapshot - the bird is just flying.

    Figure 5: The bird is just flying

    The bird is just flying

    Note, till now, when the ball falls down to the ground (the grass) it does simple physical movement as a common Box2D object does. So, there are a lot to do to achieve all the vivid details as in the real game; these will be explored and shown in the subsequent articles.

    Using ParallaxNode and TiledSprite to compose the main game UI

    Now, let's focus up how the main game user interface is created with the help of WiEngine ParallaxNode and TiledSprite. If you are an iPhone cocos2D developer, you are sure to be familiar with their similarities. For you to clearly see the skeleton architecture I've omitted all irrelevant stuff.

    As is shown above, we let ParallaxNode contain two gadgets, the red circle (bird) Sprite and the background TiledSprite. Here, I'm not going to delve into Sprite and TiledSprite since they are beyond the main topic. The usage of ParallaxNode is quite similar to CCParallaxNode in cocos2D, with which we can achieve the target of rolling the screen.

    If you played the AngryBirds game you know all that. However, there is indeed a difficulty herein because all the operations are using finger touches and dragging – you not only drag the screen to let it scroll but also drag the bird in the catapult to send it out. How to solve this contradiction needs us to use our brains. In this case, we should tell apart the dragging points – the bird or the other point on the screen. In fact, there is a simple sample covering the basic usage of ParallaxNode in WiEngine SDK, so you can only pay attention to the part after else. Another point deserving your attention is if(node.getOffsetX()>-s.width/3). Here I've only provide a rough case supposing our game background is (1+1/3) widths of the screen – in the later final product I'll give to you a more accurate solution.

    OK, with the game main screen UI architecture problem solved, we can next focus upon the bird related things now.

    Letting the bird fly along the parabolic route

    Most players are sure to be lured by the beautiful parabolic movement of the flying bird. In fact, this action is easy to be implemented using Box2D engine. Joyfully, Box2D is encapsulated and embedded as a sub engine in WiEngine SDK, so we can use our Box2D skills on the fly to achieve most physical actions of any rigid objects as the macroscopic world can show.

    To let the bird fly along a parabolic path, there are at least the following points to be taken into consideration:

    1. There are two mouse joints to be created. The main usage of the mouse joint is to drive a point on a 2D body towards the current position of the cursor. However, the first mouse joint mMouseJoint0, in our case only plays the action of tying the bird to the catapult. So, once the bird is dragged the wyTouchesBegan function will be triggered and the first mouse joint mMouseJoint0 ends its mission and should be destroyed and further be replaced by the second mouse joint named mMouseJoint.

    Listing 1: Define the first mouse joint to tie the bird to the catapult

    The following code illustrates how to destroy the first mouse joint and create the new one in the function wyTouchesBegan.

    Listing 2: Destroy the first mouse joint and create the new one

    2. To locate what object is touched the method queryAABB of World can no more be used. And accordingly, the related function reportFixture of IQueryCallback will not be used, either. This reason may be that we've used the ParallaxNode solution. In fact, it is not difficult to find that another possible solution – ScrollableLayer in WiEngine cannot support the two pairs of functions, either. Instead, we used if(bird.hitTest(loc.x, loc.y)) (as shown in the above code) to locate the bird position –this is due to the characteristics of the good encapsulation of the Node structure.

    3. Figure out necessary arguments for the parabolic movement, which is achieved mainly in the methods wyTouchesMoved and wyTouchesEnded.

    Listing 3: Relocate the bird’s position and limit the maximum dragging distance

    Now, in the method wyTouchesEnded, we really figure out the needed arguments.

    Listing 4: Prepare arguments for the parabolic fly

    Solving the initial angle and then use it to solve the linear velocity needs some triangle and geometry knowledge. Here, we're not to explain it. However, the formula of calculating the bird's linear velocity applies to any angular dragging calculation.

    Obviously, there are still more to study to achieve a real case game. All the other related tips will be explored in the subsequent articles.

    Summary

    In this first article, I've introduced four things: the main functions of the WiEngine SDK; how to integrate the famous Box2D engine into a WiEngine based game; a tiny yet complete skeleton of a WiEngine based game application; the main principle of the parabolic movement in the AngryBirds game. Starting from the next article, we are going to introduce how to construct the main UIs using WiEngine tools before the real AngryBirds game starts.

    The Create Android AngryBirds Game Using WiEngine SDK Series

  • Part 1 AngryBirds, as a strategy puzzle mobile game developed by Finnish computer game developer Rovio Mobile, has now become worldwide. In this series, from the viewpoint of a mobile developer, I want to try to find out some of the how-toes by developing a similar game named MWAngryBirds that runs on the Android operating system using the WiEngine SDK.
  • Part 2 Starting from this article I'm going to introduce how to compose the main UIs in creating the AngryBirds game.
  • <<  Previous Article Continue reading and see our next or previous articles Next Article >>

    About Xianzhong Zhu

    I'm a college teacher and also a freelance developer and writer from WeiFang China, with more than fourteen years of experience in design, and development of various kinds of products and applications on Windows platform. My expertise is in Visual C++/Basic/C#, SQL Server 2000/2005/2008, PHP+MyS...

    This author has published 81 articles on DotNetSlackers. View other articles or the complete profile here.

    Other articles in this category


    Integrate Lua into Your Android Games
    In this article, we will show interests in the interoperations between Lua and Java, especially in t...
    Create Android AngryBirds Game Using WiEngine SDK -Part 2
    Starting from this article I'm going to introduce how to compose the main UIs in creating the AngryB...
    Windows Phone Fast Application Switching and Page State
    An overview of fast application switching and page state in Windows Phone.
    Create Android AngryBirds Game Using WiEngine SDK -Part 3
    In the second part of this series, I introduced how to create most of the gadgets in the prelude scr...
    Take a Test Application in Windows Phone 7
    In this article we would see how to make a Test application, what I mean is an application where a u...
    Top
     
     
     

    Please login to rate or to leave a comment.