Cocos2d-x 使用 TexturePacker制作一个英雄,老外写的

Cocos2d-x 使用 TexturePacker制作一个英雄,老外写的,第1张

概述Create spritesheet Have you seen this sort of image before? The first time I saw this I thought this is created using Photoshop, and I also have no idea how to use this BIG image in the game. Until… I Create Spritesheet

Have you seen this sort of image before? The first time I saw this I thought this is created using Photoshop,and I also have no IDea how to use thisBIGimage in the game.

Until… I started to look in the game development,I only kNow that this is actually created bySpritesheetprogram/app.

Here I will be usingTexturePacker.

Why? I have seen many game tutorials are talking about this,I trIEd it and found that it is very easy to use.

How to use demo

First of all,I’m going to do this in Cocos2d-x engine,so selectCocos2dhere.

Now,drag images to theBox

Here I drag 3 bird images,and you can see the left pane,there arehero_01.png,hero_02.png,244)">hero_03.png,these are the original file name.

Once you’ve done,selectPublish sprite sheet

It will prompt you twice,one is to save the pList file contains the Meta data of the original images such asframe,244)">offset,244)">rotated,etc. It may sound complicated,but no worry,Cocos2d-x will handle it.

The second prompt is to save the merged image.

And you’ve done.

Use in Cocos2d-x

file structure

InAppDelegate.cppapplicationDIDFinishLaunching()method,add

// 1. fix the resolution glvIEw->setDesignResolutionSize(@H_404_78@320, @H_404_78@480, ResolutionPolicy::EXACT_FIT); director->setContentScaleFactor(@H_404_78@1);  // 2. add search path for images std::vector<string> searchPaths;  searchPaths.push_back("images"); fileUtils::getInstance()->setSearchPaths(searchPaths);  // 3. add sprite frame SpriteFrameCache::addSpriteFramesWithfile("hero.pList", "hero.png"); "images.pList",152)!important">"images.png"); 
I’m a iPhone user,thus I fix the resolution to320 x 480for simplicity In this case,I put the sprite sheet underimagesdirectory,thus I add the search pathimagestofileUtils Add sprite sheet to cache Create a sprite object (bird in this case)

I just name itHero. EditHero.h

#ifndef __HERO_SCENE_H__ #define __HERO_SCENE_H__  #include "cocos2d.h"  class Hero : public cocos2d::Sprite { public:  Hero();  private:  RepeatForever *moving(); };  #endif // __HERO_SCENE_H__ 

andHero.cpp

#include "Hero.h" #include "GameScene.h"  USING_NS_CC;  Hero::Hero() {  // 1. load a default image  initWithSpriteFramename("hero_01.png");   // 2. run the move action  this->runAction(moving()); }  RepeatForever* moving() {  // 3. repeat the frame  int numFrame = @H_404_78@3;   Vector<SpriteFrame *> frames;  SpriteFrameCache *frameCache = getInstance();   char file[@H_404_78@100] = {@H_404_78@0};   for (i = @H_404_78@0; i < numFrame; i++) {  sprintf(file,152)!important">"hero_%02d.png",210)!important">i+@H_404_78@1);  SpriteFrame *frame = frameCache->getSpriteFrameByname(file);  frames.pushBack(frame);  }   Animation *animation = Animation::createWithSpriteFrames(frames, 0.3);  Animate *animate = Animate::create(animation);   repeat = RepeatForever::animate);  return repeat; } 
Load an image for the Hero(a.k.a bird)by default during object instantiation Make the bird fly by running the move action As we kNow that there are 3 images onhero.pList,thus fix it to 3. Then add all these 3 images(get from sprite frame cache)to an array,and then repeat it forever. Add hero to GameScene

EditGameScene.cpp,under theinit()method,add the code below right beforereturnstatement

Hero *hero = new Hero(); hero->setposition(Point(visibleSize.wIDth / @H_404_78@2,210)!important">height / @H_404_78@2)); addChild(hero); 

This is to instantiate aHeroobject,set the position to center of screen then add to current scene.

Run it and you will get the animated bird,see screenshot below.

Done.

总结

以上是内存溢出为你收集整理的Cocos2d-x 使用 TexturePacker制作一个英雄老外写的全部内容,希望文章能够帮你解决Cocos2d-x 使用 TexturePacker制作一个英雄,老外写的所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1005237.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-22
下一篇 2022-05-22

发表评论

登录后才能评论

评论列表(0条)

保存