[Cocos2d-X] Cocos2d-X Tutorial

Scenes (CCScene) (cảnh)

The SpriteDragger object simply creates a blank CCScene and then adds a Layer (subclass of CCLayer) object as a child.

bool SpriteDragger::applicationDidFinishLaunching()
{
   // create a generic scene
   CCScene* scene = CCScene::create();
   
   // add the layer
   Layer* layer = new Layer;
   scene->addChild(layer, 1);
   layer->release(); // addChild() retained so we release
   
   // run the first scene
   CCDirector::sharedDirector()->runWithScene(scene);
   
   return true;
}

So what are scenes and layers?

Scenes define different modes (chế độ) of your game. The main menu is one scene, the actual (thực tế) game play is another. Cocos2d-X makes it really easy to run, swap, push, pop and transition (quá trình chuyển đổi)between scenes.

Every Cocos2d-X app needs at least one scene. As we've already covered(bao phủ), SpriteDraggerX's scene is created in SpriteDragger.cpp.

Scenes are invisible nodes in Cocos2d-X. You can't actually see a scene, but you can see most of its children, like sprites, buttons, backgrounds, etc.

Layers (CCLayer)

Layers are another type of invisible Cocos2d-X node. You can have multiple layers in a scene, though for the most part you'll only need one layer.(mặc dù phần lớn bạn sẽ chỉ cần một lớp.)

Are you familiar with the concept of layers in graphic editing software such as Photoshop? CCLayer objects stack together in a similar way, like sheets of glass. The highest z order is on top.(Giống như tấm kính. Thứ tự z cao nhất là trên đầu trang.)

Layers are unique in that they have the ability to accept input. You just let Cocos2d-X know that you want the layer to receive input by calling this->setTouchEnabled(true). The layer will then receiveccTouchesBegan(), ccTouchesMoved() and ccTouchesEnded() messages.

Nodes (CCNode)

Layers, as well as scenes and sprites and everything else in Cocos2d-X, derive(bắt nguồn) from nodes (CCNode).

Nodes give every element in Cocos2d-X a common functionality. All nodes have a position, for example, which can be set in order to move the node. Nodes also have anchor points, cameras, z order, rotation, scaling, flipping, skewing and basic on/off visibility.

A node has one possible parent and many possible children. This organizes all Cocos2d-X elements into a hierarchy(hệ thống phân cấp). The scene is at the top of the hierarchy, then comes the layer, then sprites, backgrounds, etc.

Since a node's position is relative to its parent, moving a parent node (such as a layer) moves all of the children nodes as well. This helps to simplify the mathematics for your game. A complex system can be thought of in smaller, more simple chunks.

You can think of nodes like the leaves, branches, and root of a tree. The root is a scene. The branches and leaves are layers and nodes.

(Bạn có thể nghĩ rằng các nút như lá, cành, rễ của cây. Gốc là một cảnh. các cành và lá là lớp và các nút..)

Creating the Background & Sprite

Getting back to the Layer object created by SpriteDragger, we have the following code in the constructor:

Layer::Layer()
{
   // enable touches so we can drag
   this->setTouchEnabled(true);

   // create white background
   this->colorLayer = new CCLayerColor;
   this->colorLayer->initWithColor(ccc4(255, 255, 255, 255));
   this->addChild(this->colorLayer, 1);

   // create sprite
   CCSize iSize = CCDirector::sharedDirector()->getWinSize();
   this->sprite = new CCSprite;
   this->sprite->initWithFile("Sprite.png");
   this->sprite->setPosition(ccp(iSize.width/2.0f, iSize.height/2.0f));
   
   // nudge the anchor point upward because of the shadow
   this->sprite->setAnchorPoint(ccp(0.5f, 0.55f));
   
   // add the sprite to this layer
   this->addChild(this->sprite, 2);
}

The white background color layer is created and added with a z order of 1. This puts the background low in the z order.

The sprite (our beloved yellow sphere) is then created and positioned in the middle of the screen. It is given a z order of 2 so that it is higher than the background.

Anchor Points//Chưa Dịch

The sprite is also given an anchor point which nudges the sprite upward.

You can think of an anchor point like the nail which sticks a piece of rectangular wood onto a wall. After nailing the rectangle to the wall, you can spin it around on the nail. Imagine moving the nail to a different position within the wood. You can still rotate the rectangle, but it will rotate around a different center point.

Each one of your nodes is like a piece of rectangular wood and the anchor points are the nails which stick them to the wall. In the below graphic, the green dots are the nails and the guy in the suit is the piece of wood.

Cocos2d’s SpriteTest app rotating sprites clockwise around individual anchor points

Sprites are given a default anchor point of (0.5, 0.5), which represents the center of the sprite. To move the anchor point to the lower left of the sprite, you use an anchor point of (0.0, 0.0). The upper right is (1.0, 1.0).

We give our sprite’s anchor point a slight nudge upward (0.5, 0.55) because our sprite has a shadow beneath it. This compensates for the non-symmetrical nature of our sprite file. It essentially puts our nail right through the center of our sprite’s sphere, even though it has a portion of shadow beneath it.

Touching the Sprite

Nudging the anchor point also enables our touch math (which involves the radius of the sphere) to work flawlessly. (Phân tầng các điểm neo cũng cho phép tính toán chạm (trong đó bao gồm bán kính của hình cầu) để làm việc hoàn hảo.)

You’ll notice that you can only tap the circular part of the sprite to drag it. Tapping the white space around the sprite does not allow you to drag, even though there are transparent pixels in Sprite.png that are technically being tapped.

Layer's isTouchingSprite() function simply calculates the distance between the touch point and the sprite's position and treats that distance like a radius. If the radius is less than 100 pixels then the sprite is being touched.

bool Layer::isTouchingSprite(CCTouch* touch)
{
   // this works by calculating the distance between the sprite's
   // center and the touch point, then seeing if that distance is
   // less than the sprite's radius
   float distance = ccpDistance(this->sprite->getPosition(),
      this->touchToPoint(touch));
   return( distance < 100.0f );
}

This decision of whether or not the sprite is being touched happens in ccTouchesBegan(). If the sprite is being touched, then a touch offset member variable is saved. This allows theccTouchesMoved() function to move the sprite (or not, if the touch offset is invalid). It also allows the ccTouchesEnded() function to drop the sprite and animate it.

Cocos2d-X Actions

When you let go of the sprite, you’ll see it animates a little bit by growing and shrinking. We accomplish(thực hiện) this with Cocos2D-X actions.

Actions are an easy way to kick off a bunch of transformations, animations or events. Because Cocos2d-X handles all the timing and updating of the action, it is completely hassle-free. You just run the action and forget all about it...........(Hành động là một cách dễ dàng để khởi động một loạt các biến đổi, hình ảnh động hoặc các sự kiện. Vì cocos2d-X xử lý tất cả các thời gian và cập nhật của hành động, nó là hoàn toàn phức tạp. Bạn chỉ cần chạy các hành động và quên tất cả về nó.)

You can CCSequence actions so they happen one after the other. You can CCSpawn actions so they all happen at once. You can CCScaleBy, CCFadeBy, CCRotateBy and a whole lot more. You can even call functions with CCCallFunc.

Here’s the code that animates our sprite when the touch is ended:

// stop any existing actions and reset the scale
this->sprite->stopAllActions();
this->sprite->setScale(1.0f);

// animate letting go of the sprite
this->sprite->runAction(CCSequence::create(
   CCScaleBy::create(0.125f, 1.111f),
   CCScaleBy::create(0.125f, 0.9f),
   nullptr
   ));

Nguồn : http://paralaxer.com/cocos2d-x-tutorial/