[Python Gaming Programming Studies] 6. Getting Started with Cocos2d

Alegruz
2017-09-22
조회수 1719

We have learned how to use tkinter module to create a simple breakout game. However, tkinter module isn't specifically made for game programming. Thus, we are going to study about Cocos2d from now on.


Cocos2d is a framework for building 2D games, demos, and other graphical/interactive applications. You can check out the docs of the framework below.

 http://python.cocos2d.org/doc.html


Basically, it makes game development much easier than just using tkinter or from scratch. So, let's try installing this stuff first.


Turn on the command prompt and type:

pip install cocos2d

]

After the installation, try to check the version of your cocos2d.

python -c "import cocos; print(cocos.version)"

Now, we know that the cocos2d is ready to roll, let's try to learn some basics of Cocos2d.


There are 5 main compartments of Cocos2d. Scenes, Director, Layers, Sprites, and Events.


Before starting with them, let's discuss a class object called CocosNodes.


Cocosnode is the main element. Anything that gets drawn or contains things that get drawn is a CocosNode. The most popular CocosNode are cocos.scene.Scene, cocos.layer.base_layers.Layer and cocos.sprite.Sprite.

The main features of a CocosNode are:


A scene, implemented with the Scene object, is a more or less dependent piece of the app workflow.  Some people may call them “screens” or “stages”. Your app can have many scenes, but only one of them is active at a given time.


For example, you could have a game with the following scenes: Intro, Menu, Level 1, Cutscene 1, Level 2, Winning cutscene, losing cutscene, High scores screen.


You can define every one of these scenes more or less as separate apps; there is a bit of glue between them containing the logic for connecting scenes (the intro goes to the menu when interrupted or finishing, Level 1 can lead you to the cutscene 1 if finished or to the losing cutscene if you lose, etc.).

../_images/scenes.png

A scene is described in cocos2d as a tree of CocosNodes where the root is a Scene node, the nearest descendants usually are Layers, and they hold and organize individual elements.

There is also a family of Scene subclasses called transitions (implemented with the TransitionScene object) which allow you to make transitions between two scenes (fade out/in, slide from a side, etc).

Since scenes are the subclass of CocosNode, they can be transformed manually or by using actions.


The director is the component which takes care of going back and forth between scenes.

The director is a shared (singleton) object. It knows which scene is currently active, and it handles a stack of scenes to allow things like “scene calls” (pausing a Scene and putting it on hold w hile other enters, and then returning to the original). The push, replacement or end of the current scene is made by the director.

The director is also responsible for initializing the main window.


Layers help you organize the scene in the back to front axis, for example

  • Background: a fixed draw of landscape
  • Far: decorative trees and birds
  • Middle: platforms
  • Near: player, enemies, coins
  • HUD: Heads Up Display to show game stats like life, energy


You can think layers as (usually) transparent sheets where the children are drawn, and the scene as the stack of sheets.

../_images/layers.png

In non MVC (model - view - controller) design style, some code related to nodes interaction tends to float in the layer holding the entities, providing higher functional units. For example, Menu is a Layer subclass that knows how to layout and animate items, read user inputs and do control flow.

Layers are the ones defining appearance and behavior, so most of your programming time will be spent coding Layer subclasses that do what you need.

The Layer is where you define event handlers. Events are propagated to layers (from front to back) until some layer catches the event and accepts it.


A cocos2d’ sprite is like any other computer sprite. It is a 2D image that can be moved, rotated, scaled, animated, etc.

Sprites (implemented using the Sprite class) can have other sprites as children. When a parent is transformed, all its children are transformed as well.

Since sprites are subclass of CocosNode, they can be transformed manually or by using actions.


We are not going to talk about Events right now. We will the first 4 compartments. Using this knowledge, let's try to program draw a simple Hello, World! using Cocos2d.


First of all, we have to call the module to the file.


import cocos


The first thing to create is the director.


cocos.director.director.init(caption = 'Hello, World!')


Then, we need a scene that is going to be run by the director.


scene = cocos.scene.Scene(Layer Object)

cocos.director.director.run(scene)


For the scene needs a layer that has to be drawn, We are going to make the MainLayer class. This class must be inherited by cocos.layer.Layer

CocosNode.


class MainLayer(cocos.layer.Layer):

     def __init__(self):

         super(MainLayer, self).__init__()


Let's create a label that indicates the text, font, font size, and the anchor coordinate, or the origin of the text.


self.label = cocos.text.Label(
    'Hello, World!',
    font_name = 'Times New Roman',
    font_size = 32,
    anchor_x = 'center',
    anchor_y = 'center'
)


We will give the label a position, and then add it to the layer.


self.label.position = (320, 240)
self.add(self.label)


Now, we can declare the layer object,


layer = MainLayer()


We now have begun our journey into the real game programming world.


import cocos

class MainLayer(cocos.layer.Layer):
    def __init__(self):
        super(MainLayer, self).__init__()
        self.label = cocos.text.Label(
            'Hello, World!',
            font_name = 'Times New Roman',
            font_size = 32,
            anchor_x = 'center',
            anchor_y = 'center'
        )
        self.label.position = (320, 240)
        self.add(self.label)

if __name__ == '__main__':
    cocos.director.director.init(caption = 'Hello, World!')
    layer = MainLayer()
    scene = cocos.scene.Scene(layer)
    cocos.director.director.run(scene)

1 0