526互联

cocos2d-x 3.17 精灵

发布时间 2023-06-09 00:23:39作者: laolang2016

精灵素材

https://github.com/leewyatt/FXGL_Tank

直接用图像创建

  1. 图片路径在 cocos 项目的 Resources/res 目录下
  2. Sprite::create 参数不需要加 /
  3. 两张图片的地址
    https://github.com/leewyatt/FXGL_Tank/blob/main/src/main/resources/assets/textures/tank/H1U.png
    https://github.com/leewyatt/FXGL_Tank/blob/main/src/main/resources/assets/levels/maptitles.png
// 使用整个图片
auto s1 = Sprite::create("tank/H1U.png");
s1->setPosition(Vec2(200, 200));
this->addChild(s1, 1);
// 此时精灵的大小就是图片的大小
log("w:%f,h:%f", s1->getContentSize().width, s1->getContentSize().height);

// 使用矩形
auto s2 = Sprite::create("tank/H1U.png", Rect(0, 0, 20, 20));
s2->setPosition(Vec2(250, 200));
this->addChild(s2, 1);
// 此时精灵的大小就是指定矩形的大小
log("w:%f,h:%f", s2->getContentSize().width, s2->getContentSize().height);

auto brick = Sprite::create("tank/maptitles.png", Rect(0, 0, 24, 24));
brick->setPosition(Vec2(280, 200));
this->addChild(brick, 1);

auto water = Sprite::create("tank/maptitles.png", Rect(24, 0, 24, 24));
water->setPosition(Vec2(310, 200));
this->addChild(water, 1);

auto snow = Sprite::create("tank/maptitles.png", Rect(48, 0, 24, 24));
snow->setPosition(Vec2(340, 200));
this->addChild(snow, 1);

auto stone = Sprite::create("tank/maptitles.png", Rect(72, 0, 24, 24));
stone->setPosition(Vec2(370, 200));
this->addChild(stone, 1);

auto tree = Sprite::create("tank/maptitles.png", Rect(96, 0, 24, 24));
tree->setPosition(Vec2(400, 200));
this->addChild(tree, 1);

效果如下

image

使用图集

文件列表
https://github.com/leewyatt/FXGL_Tank/tree/main/src/main/resources/assets/textures/map/brick.png
https://github.com/leewyatt/FXGL_Tank/tree/main/src/main/resources/assets/textures/map/sea.png
https://github.com/leewyatt/FXGL_Tank/tree/main/src/main/resources/assets/textures/map/snow.png
https://github.com/leewyatt/FXGL_Tank/tree/main/src/main/resources/assets/textures/map/greens.png
https://github.com/leewyatt/FXGL_Tank/tree/main/src/main/resources/assets/textures/map/stone.png

Texture Packer 下载
https://blog.csdn.net/u013654125/article/details/80676715

Texture Packer 设置
image

auto spritecache = SpriteFrameCache::getInstance();
spritecache->addSpriteFramesWithFile("sprite_packer/map.plist", "sprite_packer/map.png");

auto brick = Sprite::createWithSpriteFrameName("brick.png");
brick->setPosition(Vec2(280, 200));
this->addChild(brick, 1);

auto water = Sprite::createWithSpriteFrameName("sea.png");
water->setPosition(Vec2(310, 200));
this->addChild(water, 1);

auto snow = Sprite::createWithSpriteFrameName("snow.png");
snow->setPosition(Vec2(340, 200));
this->addChild(snow, 1);

auto stone = Sprite::createWithSpriteFrameName("stone.png");
stone->setPosition(Vec2(370, 200));
this->addChild(stone, 1);

auto tree = Sprite::createWithSpriteFrameName("greens.png");
tree->setPosition(Vec2(400, 200));
this->addChild(tree, 1);

效果如下
image