是什么能够两小时写出《flppybird》游戏--绘制背景和UI控件

我们首先找到《flppybird》游戏的图片资源，结果发现全部在一张图上。
图片资源！

1 。 绘制背景，我采用最简单的静态图片，下面是脚本代码。
代码参照http://blog.csdn.net/my_word/article/details/43984439

效果 点击我效果哦

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

create(//创建背景图片
{
    type:"sprite";//创建类型为精灵
    Height: 100%;//创建为满屏
    Width: 100%;
    Zorder:-5;
    Texture: "imageBird";
    Texcoord:{0/1024,0/1024,285/1024,510/1024};
});

2.创建UI
我们先创建开始UI，效果 记得点效果哦

代码有一个技巧就是在点击该精灵后要做一系列的操作我先隐藏着

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

create(//创建开始的精灵
{
    type:"sprite";
    Blend: "alpha";
    Texture: "imageBird";
    CenterX:50%;//设置中心点位置
    CenterY:50%;
    X:50%;//设置位置
    Y:60%;
    IsHitTest: true;//开启鼠标拾取检测
    Height: 30%;//设置大小
    Width: 40%;
    Texcoord:{585/1024,165/1024,115/1024,110/1024};//纹理的坐标
    Name:"startUI";
    IsClick:=> {//单击精灵所触发的事件
         //todo
         //clear("startUI");//删除自己
   };
});

3.我们创建一个显示数字的精灵
我们引用官方的数字精灵，仅仅是替换了图片。

clear();
//批量读取图片num0.png-num9.png
LoadImage("numsImg",":/Samples/Images/numbers.png");
// 引用数值精灵模板脚本
numberSprite=include(":/Samples/Templates/NumberSpriteTemplate.ais");

// 设置数值精灵模板字符映射表
numberSprite.maps=
{
    {"0","numsImg",{0/10,0,1/10,1}};//0字符映射为 num0Img图片
    {"1","numsImg",{1/10,0,1/10,1}};//1字符映射为 num1Img图片
    {"2","numsImg",{2/10,0,1/10,1}};//2字符映射为 num2Img图片
    {"3","numsImg",{3/10,0,1/10,1}};//3字符映射为 num3Img图片
    {"4","numsImg",{4/10,0,1/10,1}};//4字符映射为 num4Img图片
    {"5","numsImg",{5/10,0,1/10,1}};//5字符映射为 num5Img图片
    {"6","numsImg",{6/10,0,1/10,1}};//6字符映射为 num6Img图片
    {"7","numsImg",{7/10,0,1/10,1}};//7字符映射为 num7Img图片
    {"8","numsImg",{8/10,0,1/10,1}};//8字符映射为 num8Img图片
    {"9","numsImg",{9/10,0,1/10,1}};//9字符映射为 num9Img图片
};
// 启动精灵显示
num1={x:0,y:0,width:100,height:60,show:true}::numberSprite;
num1.number<:{0,9999,10000};
//num1.number=100;

num2={x:50%,y:100%,width:20%,height:20%,centerY:100%,centerX:50%,show:true}::numberSprite;
num2.text="121";

哈哈这样是不是很方便，到现在flppybird的背景和UI控件祥光技术就讲到这里，接下我我会和大家一起分享制作小鸟的动画。