是什么能够两小时写出《flppybird》游戏--制作小鸟的动画

最新推荐文章于 2019-04-08 21:37:00 发布

原创最新推荐文章于 2019-04-08 21:37:00 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#游戏开发

游戏开发专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用几张图片循环播放的原理来制作精灵动画。通过具体的代码示例，展示了如何加载图片资源、定义精灵属性及动画帧，实现小鸟的飞行动画效果。

制作小鸟的动画其实就是用几张图片循环的播放原理。官方有些教程就是教怎样制作精灵动画的。视频链接效果
这里写图片描述

clear();//清空资源缓存
LoadImage("logoImg",":/Samples/Images/fire.png");//读取图片资源
Create(
{
    type:"sprite";//精灵类型
    texture:"logoImg";//纹理图片资源名
    blend:"alpha";//设置为透明
    x:50%;//显示坐标x(50%表示屏幕中心)
    y:50%;//显示坐标y(50%表示屏幕中心)
    width:32;//显示宽度32像素
    height:64;//显示高度64像素
    CenterX:50%;//中心点坐标x(50%表示图中心)
    CenterY:100%;//中心点坐标y(50%表示图中心)
    Simpler:"point";//采用像素采样显示(没有自动模糊效果)
    Frames://每帧的图像定义
    {
        //frame：帧序列 texcoord：图片的区域范围{x,y,width,height}
         {frame:0,texcoord:{0/3,0,1/3,1}};
         {frame:1,texcoord:{1/3,0,1/3,1}};
         {frame:2,texcoord:{2/3,0,1/3,1}};
    };
    Actions:
    {
        //action：动画名称 data：{第几帧,延迟毫秒数,...}
        {action:"stop",data:{0,1000}};
        {action:"play",data:{0,120,1,120,2,120}};
    };
    Action:"play";//当前动画为play
});//显示精灵

让我们来制作小鸟吧! 效果
这里写图片描述

LoadImage("imageBird", ":/blog/游戏博客/flppybird/image/bird.png");

birdSprite=//构建小鸟集合
{
    type:"sprite";//设置为精灵
    Width: 15%;//设置宽度为屏幕的15%
    Height: 5%;//设置高度
    Zorder:10;//设置深度 值越大越先显示
    name:"birdSprite";//设置名字
    X:20%;//设置位置
    Y:50%;
    isplay:true;//设置动画一定要设置为true
    CenterX: 50%;//设置中心点
    CenterY: 50%;
    Texture: "imageBird";//设置纹理
    Blend: "alpha";//设置混合
    Frames://设置动画为
    {
        {Frame:0, Texcoord:{225/1024,758/1024,45/1024,30/1024}, Texture:"imageBird"};//第一帧
        {Frame:1, Texcoord:{225/1024,810/1024,45/1024,30/1024}, Texture:"imageBird"};//第二帧
        {Frame:2, Texcoord:{225/1024,862/1024,45/1024,30/1024}, Texture:"imageBird"};//第三帧
    };
    Actions://设置动作
    {
        {Action:"active",Data:{0,250,1,220,2,250}};//飞的动作
        {Action:"died",Data:{0,250}};//死亡的动作
    };
    Frame:0;
    Action:"active";//默认为飞的动作    
};
create(birdSprite);//创建小鸟的精灵显示出来