Quick-cocos2d-x Beginner's Game tutorial (vi)---------------------game logic

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

In the previous chapter we introduced the auxiliary tools used in development and created the gamescene scene, and we will continue to Gamescene (Bai) (BI) in the next chapter. But before we start writing the code for the Gamescene scenario, let's first clarify the game's functionality and how it's implemented. This will help us to better understand and design the logic. The following conclusions are summed up:

1. In the gamescene scene, we will create a flying doll character, which is the only protagonist of the game. The game's initial state, the character has a full health, but over time, the health will continue to decrease. Here we can show how much it is and how to increase or decrease it in the form of a progress bar.
2. The game Gamescene scene has more than one layer of scrolling background, each layer of the background scrolling rate is different, so that can produce three-dimensional scrolling effect. The doll's position does not move, allowing the background to roll continuously, can produce the doll in the forward flight visual feeling.
3. During scrolling, there are occasional obstacles and bonuses that can increase health, and when a doll encounters an obstacle, the health is reduced and the health value increases when the reward is encountered.
4. When touching the screen, the doll will rise to a certain height, and when it does not touch the screen, it will drop down. When dropped to the floor, the corresponding health value will be deducted. So the player must maintain a certain balance between pressing and not pressing, on the one hand to avoid obstacles and touch the floor, on the other hand to try to eat a little more reward items, so that the doll to reach the end of the smooth.
5. In this scenario, we will use the physics engine to simulate the entire flying world, so that the flying problem (floating state) of the protagonist and the collision detection between it and the obstacle/reward are easy to achieve.

Background of the Gamescene

In order to produce a three-dimensional scrolling visual effect, we decided to use four layers of different backgrounds to achieve this effect (afraid of exhaustion, can be lazy). Of course, the concept here is different from the layer in the engine (CC. Layer), it's just an ordinary adverb.

• First of all, the bottom is a fixed background of the cloth screen;
• Secondly, I will add a background to the upper layer of the screen background, which will scroll to the left at a slower speed;
• Then, on the upper level of the foreground, we add a close-up background, which will scroll to the left at a faster speed;
• Finally, at the top, we'll place a background that scrolls to the left at a faster speed, and the obstacles and bonuses of the game will be on the background. So this background we're going to use the Tliedmap editor, which is created with a TMX file.

Scrambling into a knowledge point: the hierarchical relationship of elements in the game is determined by the Z-order attribute, and we can control the order of rendering between elements by setting the Z-order value of the element. By default, the Z-order of all elements is 0, so when the game element does not specify a Z-order value, the elements in the game are displayed in the order in which they are added. Therefore, when we add the game background or other elements, we should pay attention to their order of addition or Z-order value, do not appear occlusion phenomenon.

Create a Backgroundlayer background layer

To make the code structure clearer, next we will create a background layer for the Gamescene scene, and then add the above four-storey background to the layer.

So, we created a new layers folder under the Src/app directory, and then we created a new Backgroundlayer.lua file and saved it to the Src/app/layers directory.

Here's the code to create a blank Backgroundlayer layer:

12345678

BackgroundLayer = class("BackgroundLayer",function()    returndisplay.newLayer()end) function BackgroundLayer:ctor()end returnBackgroundLayer

The Display.newlayer () method can create and return a CC. Layer object.

Note: Because we will call the Backgroundlayer class in the other (Gamescene.lua) file, we did not define it as the local local class when we created the Backgroundlayer class, as we created the gamescene.

Add the background layer to the Gamescene scene

The Backgroundlayer.lua file is a separate module file, and if we want to reference it, we need to load it into the project.

Typically, loading files into a Quick project can be used in two ways:

1. With the Require () method, the method searches the specified directory and loads the file.
2. Through the import () method, this method is used to process require other modules in the same directory, plus the module name.

Their detailed usage is described in the API.

Here, we load the Backgroundlayer module with the Require method. Add the following function to the Myapp.lua:

1	require("app.layers.BackgroundLayer")

This introduces our definition of the Backgroundlayer class into the Quick project, and then we can refer to the Backgroundlayer module from anywhere.

Next, let's add the Backgroundlayer layer to the gamescene scene.

12345

function GameScene:ctor()    self.backgroundLayer = BackgroundLayer.new()        :addTo(self)end

Here the calling BackgroundLayer.new() method instantiates a Backgroundlayer object and adds it to the scene. In this way, there is a layer of blank backgroundlayer in the gamescene scene.

After the frame is finished, let's plug something into the layer container.

Add Background screen background

Back to the Backgroundlayer file, below we add a section of the following function to add the Backgroundlayer layer to the bottom of the screen background, here to add a fixed screen background like adding a normal elf.

123456

function BackgroundLayer:createBackgrounds()    -- 创建布幕背景    local bg = display.newSprite("image/bj1.jpg")        :pos(display.cx, display.cy)        :addTo(self, -4)end

You can specify the Z-order value of the game element in the AddTo method, and in this tutorial we set the Z-order of the screen background to 4 to make sure it is at the bottom of the scene (and of course, this ensures that there is no element smaller than the Z-order value in the background of the screen).

Long/close-up background with cyclic scrolling

The foreground and close-up backgrounds share a common feature, and they all move to the left at a certain speed. So here we take the perspective of the background as an example, explain the implementation of their process.

First, we add two images that can be stitched together to represent a scrolling perspective background image.
BackgroundLayer:createBackgrounds()Add the following code to the method to include the Vista background map:

12345678910

-- 创建远景背景local bg1 = display.newSprite("image/b2.png")    :align(display.BOTTOM_LEFT, display.left , display.bottom + 10)    :addTo(self, -3)local bg2 = display.newSprite("image/b2.png")    :align(display.BOTTOM_LEFT, display.left + bg1:getContentSize().width, display.bottom + 10)    :addTo(self, -3)table.insert(self.distanceBg, bg1) -- 把创建的bg1插入到了 self.distanceBg 中table.insert(self.distanceBg, bg2) -- 把创建的bg2插入到了 self.distanceBg 中

Where SELF.DISTANCEBG is the value of a table type, the definition of which we put in the ctor function.

1	self.distanceBg = {}

To achieve a scrolling background, it is necessary to constantly change the background image map of the horizontal axis, and constantly refresh the position. So we have defined a function scrollbackgrounds () with a scrolling background.

123456789101112

function BackgroundLayer:scrollBackgrounds(dt)    if self.distanceBg[2]:getPositionX() <= 0 then        self.distanceBg[1]:setPositionX(0)    end    local x1 = self.distanceBg[1]:getPositionX() - 50*dt -- 50*dt 相当于速度    local x2 = x1 + self.distanceBg[1]:getContentSize().width     self.distanceBg[1]:setPositionX(x1)    self.distanceBg[2]:setPositionX(x2)end

The function of the above is to let self.distanceBg[1] self.distanceBg[2] the X-coordinate of the same move to the left (DT is the time interval, the interval between two frames) units, self.distanceBg[2] immediately self.distanceBg[1] behind.

After that, you need to add a method that continually executes the scrollbackgrounds () function to ensure that the perspective background moves to the left. Children's shoes with cocos2d-x you should be aware that cocos2d-x can perform some of the actions you need to refresh each frame by reloading the update function. In the Quick framework, we call this event a frame event, which means the event that is executed every time the frame is refreshed.

Frame events are often used in games to update the data in the game. Below we will add this frame event to the ctor () function to update the coordinates of the background map. The code is as follows:

/tbody>

1234567891011

function backgroundlayer:ctor ()     SELF.DISTANCEBG = {}     Code class= "CPP Plain" >SELF.NEARBYBG = {}     SELF.TILEDMAPBG = {}      self:createbackgrounds ()      self:addnodeeventlistener (CC. Node_enter_frame_event, Handler (self, self.scrollbackgrounds))     self:scheduleupdate ()  end

Where the Addnodeeventlistener method is used to register the frame event, the Scheduleupdate method enables the frame event, and the frame event is triggered only after the scheduleupdate is called.

At this point we add a close-up background in the same way (making it larger each time it moves), and when you run the game, the background of the roll cycle moves on the screen.

Note: The above is not circular.

The upper-level TMX background

There is also an important scrolling item in the background layer, which is the background of the TMX type that holds the obstacles and rewards.

As we have already mentioned in the previous chapters, the Tiledmap editor can stitch a single tile into a complete map, and its final product is the TMX file. Here we also do not think of how complex it is, in fact, the rendering is a broken picture. There is no significant difference between the image sprite and the png,jpg.

So the principle of scrolling is similar to the principle of a far/close background scrolling, except that it does not loop. We can use more than one TMX file to scroll, and the game ends when the last TMX file is exactly displayed. This allows for subsequent collision detection, so we only use one TMX file for scrolling.

The code to load the TMX file is as follows, and the location added is still in the Createbackgrounds method.

123	self.map = cc.TMXTiledMap:create("image/map.tmx")    :align(display.BOTTOM_LEFT, display.left, display.bottom)    :addTo(self, -1)

The code to scroll the map file is as follows:

123456

ifself.map:getPositionX()  <= display.width - self.map:getContentSize().width then    self:unscheduleUpdate()  -- 禁用帧事件，停止整个背景层滚动endlocal x5 = self.map:getPositionX() - 130*dtself.map:setPositionX(x5)

Well, this week's tutorial is finished, and here our TMX file is temporarily created under a casual, next chapter we will explain in detail how to make a TMX file.

In addition, we will upload the resources of the game in the next chapter after we have made a good production of the TMX file.

Quick-cocos2d-x Beginner's Game tutorial (vi)---------------------game logic