分享
给游戏添点“料”——在Cocos2d-x里添加图片角色
admin SU @ 2025-7-19 11:00:23

给游戏添点“料”——在Cocos2d-x里添加图片角色

小朋友们，上节课我们学会了给游戏换背景颜色，是不是很有成就感？这节课我们要给游戏加个更有趣的“小伙伴”——图片角色！就像给空荡荡的房间摆上一个可爱的玩偶，让游戏一下子热闹起来～我们会一步步学习怎么把图片放进游戏，还能让它动起来哦！

一、准备“小伙伴”——图片素材怎么放？

首先，我们得给游戏准备一张图片，就像给玩偶准备“衣服”一样。可以是自己画的小动物、卡通人物，或者从网上找一张简单的图片（记得找老师或家长帮忙哦）。

图片准备小要求：

图片格式最好是png或jpg（这两种格式Cocos2d-x最喜欢啦）
图片不要太大，比如边长200-500像素就够了（太大了游戏会“累”哦）

把图片放进游戏“仓库”：

找到项目里的Resources文件夹（还记得吗？这是“素材库”），路径比如D:\Projects\MyCocosGame\Resources
直接把准备好的图片复制进去，比如我们放一张叫cat.png的小猫图片（名字最好用英文，别带空格哦）

二、代码里“召唤”图片——让角色出现在游戏里

接下来我们要写代码，让图片显示在游戏窗口里。打开HelloWorldScene.cpp文件（“动作说明书”），找到init()函数（场景启动开关），在里面加几行“召唤咒语”～

步骤：在`init()`函数里添加代码

先看一下原来的init()函数里有什么（简化版）：

bool HelloWorld::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    
    // 背景颜色设置（上节课改的）
    auto layer = LayerColor::create(Color4B::WHITE); // 比如现在是白色背景
    this->addChild(layer);
    
    // 显示HelloWorld文字
    auto label = Label::createWithSystemFont("Hello World", "Arial", 24);
    label->setPosition(visibleSize.width/2, visibleSize.height/2); // 放在屏幕中间
    this->addChild(label); // 把文字加到场景里
    
    return true;
}

现在我们要加一段显示图片的代码，就像这样（重点看注释哦）：

bool HelloWorld::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    
    // 获取屏幕大小（方便定位图片）
    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();
    
    // 背景颜色设置
    auto layer = LayerColor::create(Color4B::WHITE);
    this->addChild(layer);
    
    // 显示HelloWorld文字
    auto label = Label::createWithSystemFont("Hello World", "Arial", 24);
    label->setPosition(visibleSize.width/2, visibleSize.height/2);
    this->addChild(label);
    
    // 👇 新添加的代码：显示小猫图片 👇
    // 1. 创建图片精灵（可以理解为“召唤图片角色”）
    // "cat.png"是我们放进Resources的图片名字，必须一模一样！
    auto catSprite = Sprite::create("cat.png");
    
    // 2. 设置图片位置（放在屏幕左下角往上一点）
    // visibleSize.width/4 表示屏幕宽度的1/4处（左边）
    // visibleSize.height/4 表示屏幕高度的1/4处（下边）
    catSprite->setPosition(Vec2(visibleSize.width/4, visibleSize.height/4));
    
    // 3. 把图片加到场景里（就像把玩偶放在桌子上）
    this->addChild(catSprite);
    
    return true;
}

代码解释小课堂：

Sprite::create("cat.png")：Sprite是Cocos2d-x里的“图片精灵”工具，这句话就是“用cat.png这张图创建一个精灵”
setPosition(Vec2(x, y))：Vec2是“坐标工具”，x是左右位置，y是上下位置（屏幕左下角是x=0,y=0）
this->addChild(...)：“把这个东西放进当前场景”，如果不加这句，图片就会“藏起来”看不到哦

三、让角色“动起来”——给图片加个简单动画

光放着不动有点无聊，我们来让小猫动起来吧！比如让它慢慢变大，就像玩偶突然“长大”了一样～

在刚才添加的图片代码后面，再加一段动画代码：

// 👇 让小猫慢慢变大 👇
// 1. 创建一个“缩放动作”：2秒内从原来的1倍大小变成2倍（变大）
auto scaleUp = ScaleTo::create(2.0f, 2.0f); // 2.0f是时间（秒），2.0f是缩放倍数

// 2. 再创建一个“缩放动作”：2秒内从2倍变回1倍（变小）
auto scaleDown = ScaleTo::create(2.0f, 1.0f);

// 3. 把两个动作连起来，让它们重复做（永远循环）
auto repeat = RepeatForever::create(Sequence::create(scaleUp, scaleDown, nullptr));

// 4. 让小猫执行这个动作
catSprite->runAction(repeat);

动画代码小解释：

ScaleTo::create(时间, 倍数)：“缩放工具”，时间越长动作越慢，倍数大于1是变大，小于1是变小
Sequence::create(动作1, 动作2, nullptr)：“排队工具”，让动作按顺序执行（最后一定要加nullptr哦）
RepeatForever::create(...)：“循环工具”，让动作一直重复，就像永动机一样
runAction(...)：“执行动作”，告诉角色“快开始动起来吧”

四、完整代码回顾（带注释）

把上面的代码合起来，init()函数就变成这样啦：

bool HelloWorld::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    
    // 获取屏幕大小（后面定位要用）
    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();
    
    // 设置背景为白色
    auto layer = LayerColor::create(Color4B::WHITE);
    this->addChild(layer);
    
    // 显示文字
    auto label = Label::createWithSystemFont("我的游戏有小猫！", "Arial", 30);
    label->setPosition(visibleSize.width/2, visibleSize.height - 50); // 屏幕上方中间
    this->addChild(label);
    
    // 1. 创建小猫图片精灵
    auto catSprite = Sprite::create("cat.png");
    // 2. 设置位置（屏幕中间偏左）
    catSprite->setPosition(Vec2(visibleSize.width/4, visibleSize.height/2));
    // 3. 加入场景
    this->addChild(catSprite);
    
    // 4. 给小猫加缩放动画
    auto scaleUp = ScaleTo::create(2.0f, 2.0f); // 2秒变大到2倍
    auto scaleDown = ScaleTo::create(2.0f, 1.0f); // 2秒变小到1倍
    auto repeat = RepeatForever::create(Sequence::create(scaleUp, scaleDown, nullptr));
    catSprite->runAction(repeat);
    
    return true;
}

五、运行游戏看看效果

点击Visual Studio顶部的“本地Windows调试器”（绿色三角形），等一会儿游戏就会打开：

白色背景上会有一行“我的游戏有小猫！”的文字
屏幕中间偏左会出现我们的cat.png图片
小猫会慢慢变大，再慢慢变小，一直重复～

如果没看到图片，先检查这几点：

图片名字是不是和代码里的"cat.png"完全一样（包括大小写哦）
图片是不是真的放进了Resources文件夹里
代码里有没有this->addChild(catSprite);这一行

六、小任务：给角色换个动作

试着让小猫做其他动作，比如旋转或移动：

旋转动作：auto rotate = RotateBy::create(2.0f, 360.0f);（2秒转一圈）
移动动作：auto move = MoveTo::create(3.0f, Vec2(visibleSize.width*3/4, visibleSize.height/2));（3秒从左边移到右边）

把缩放动作换成上面的动作，看看小猫会变成什么样～也可以像搭积木一样，把旋转、移动、缩放动作都连起来哦！

下节课预告

这节课我们学会了给游戏加图片，还让它动了起来，真棒！下节课我们要给游戏加个“小按钮”，就像给玩具装个开关，点击按钮可以让角色做新的动作，比如点击后小猫开始跳舞～是不是很期待？我们下节课见！

目前还没有评论...