Quick-cocos2d-x Beginner's Game tutorial (iv)---------------development (add background, Title, Action, button)

Quick-cocos2d-x Beginner's Game tutorial (iv)

We have already explained the framework and code structure of quick, and then we will formally enter into the development of the game in the beginning of this chapter. Of course, in the course of development, if we encounter the knowledge points and concepts worth mentioning, we will give you a detailed explanation.

Haha, the content of this chapter I add it for---development, because we will first to implement some basic content. This chapter will implement the effect as shown in the following:

Menu scene

From the knowledge points explained in the previous section, we know that a mainscene scene has been created by default in each new Quick project, so we will use this ready-made scenario to change it into the game scenario we need.

Our game will be a simple game, so don't need to be too complicated. As a matter of course, the first run of the game scene is generally a menu scene, so this section of our goal is to build a menu scene, in this scenario, we will add the necessary nodes and controls.

Below a bit of basic knowledge, already understand Cocos2d-x basic concept of children's shoes can be rounded, do not listen to my nonsense. But if you know nothing about cocos2d-x and want to learn more about these concepts, you can refer to the "Basic concepts in Cocos2d-x" article. Here we also only briefly say:
Cocos2d-x (Quick) is a tree-based game engine that abstracts the various parts of the game into a series of concepts such as directors, nodes, scenes, layers, sprites, and so on, so you can think of the Cocos2d-x game as a movie. Like movies, every moment in the Cocos2d-x game has a scene running independently, we can complete the whole game process by switching different scenes, and the management of scene switching is performed by the director.
A game can have several different game scenarios, each of which can contain several different layers (or other nodes), each of which can have any game node (usually sprites, but can also be layers, menus, text, and so on). The basic architecture is as follows:

Now is not very understanding and no relationship, because the novice are in the actual use of the process slowly understand, slowly accumulated experience.

The menu scene is just a simple game scene for us, let's start by adding the Game object in the menu scene!

Add a background Sprite

First, let's add a background map to the game, the size of the background resource as determined by the second chapter of resolution adaptation, 1136 X 640.

When adding a game resource, we must copy all of the image resources, including the background, to the Res directory (which will not be referenced elsewhere). Of course, in order to distinguish with the possible font files, sound files and other game resources, you can also like me, first in the Res directory to create a new folder called image, and then copy the resources into this res/image directory.

After copying the resources, we can modify the code to add a background image. So, next open the Mainscene.lua file, delete the extra code that created the "Hello World" text in its Ctor method, and add a new piece of code to add the background image:

123	display.newSprite("image/main.jpg")    :pos(display.cx, display.cy)    :addTo(self)

In the above code, we created a Sprite object using the Display.newsprite () method and added the object to the corresponding position in the mainscene scene.

After that, save the modified Lua file, then switch to the Player emulator of our project, press and hold the hotkey Command + R (press F5 under Windows) to refresh the Player emulator, and you will immediately see the game scene with the background image added. As shown in the following:

Verifying resolution adaptation Results

It is important to note that, under the View menu of the Player emulator, we have dozens of common device resolutions available, and we can switch to different resolutions at will, so that we test how the game will look at different resolutions.

You can try to choose some, but you will find that no matter how we choose, our screen is always covered by the background image and will not have any black edges. This also verifies that our previous resolution adaptation was successful.

Add a title and let it move up and down

Next we'll add the title of the game, which will be the same as the one shown in the opening--it will keep shaking up and down.
To add such an effect, we also need to add the following snippet of code to the ctor method:

12345678

local title = Display.newsprite ( Code class= "CPP Plain")          Code class= "CPP plain" >:p OS (DISPLAY.CX/2 * 3, display.cy)           :addto (self)  local Move1 = cc. Moveby:create (0.5, CC.P (0, ten)) local move2 = cc. Moveby:create (0.5, CC.P (0, -10)) local sequenceaction = cc. Sequence:create (move1, move2) transition.execute (title, CC. Repeatforever:create (sequenceaction))

Here, we first add a sprite image to the scene, positioned at the coordinates (DISPLAY.CX/2 * 3, display.cy). Immediately after that, we let the title Elf perform a series of action effects.
Where the Transition.execute (target, action, args) method is used to perform an action effect that adds various additional features to the original single action. The parameters represent:

• Target: Display object (CC. Node)
• Action: Action Object
• Args:table Parameter Table Object

In our code, the action parameter is a composite action that we build ourselves, which is an action that keeps moving up and down forever. Where we used 3 types of action to create it:

• Cc. Moveby: This action causes the node to uniform motion from the current coordinate point to a position where a certain vector is relative offset. The two parameters of its create function represent the time required to move to the specified position and the distance (offset) of the movement, so move1 represents moving 10 pixels on the positive axis of the Y axis within 0.5 seconds, and move2 means moving 10 pixels in the negative direction of the Y axis within 0.5 seconds.
• Cc. Sequence: This action allows us to combine a series of actions and execute them sequentially. In the example above, we created a sequence of move1, move2 actions, the sequenceaction action will be executed first move1, and so on move1, and then immediately execute move2. In this way, the node performing the action will eventually return to its original position.
• Cc. RepeatForever: This action is an infinitely repetitive action. cc.RepeatForever:create( SequenceAction )represents an action that creates an infinite loop to perform sequenceaction.

After you save the file and refresh the player, you'll see a title bar that keeps moving:

Add button

Let's continue with the Add button, whose code looks like this:

123456

cc.ui.uipushbutton. new ({normal =      :onbuttonclicked (function ()           print ( Code class= "CPP Plain")      End)      :p os (DISPLAY.CX/2, display.cy)      :addto (self)

There are three different button controls in quick: UIPushButton (Button control), Uicheckboxbutton (Checkbutton control), and Uicheckboxbuttongroup (Checkbutton Group control).

Where UIPushButton is the most commonly used button control, it inherits from UIButton, and we can create UIPushButton through the cc.ui.UIPushButton.new (images, options) method. The parameter images is the table type, which represents the picture under each button state (normal, pressed, disabled), options is an optional parameter, and the Tabl E type contains settings such as whether to scale9 scale, offset flipx, flipy value, and so on.

The OnButtonClicked method is used to listen for a button's click event, and the code in the method is called when the button is clicked. As in the example above, when we click the button, the "Start" field is printed in the console window. Similar to the OnButtonClicked method are:

• Onbuttonpressed (CALLBACK): Press event for the Listener button
• Onbuttonrelease (CALLBACK): Release event for the Listener button
• Onbuttonstatechanged (callback): Status Change event for the listener button

Refresh the player and the effect will come out.

OK, so far, the goal of this chapter is even achieved, the next chapter we will create another game scene, please look forward to!!

Quick-cocos2d-x Beginner's Game tutorial (iv)---------------development (add background, Title, Action, button)