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

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

图片资源！



1 。 绘制背景，我采用最简单的静态图片，下面是脚本代码。

代码参照/article/11477371.html

效果 点击我效果哦

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控件祥光技术就讲到这里，接下我我会和大家一起分享制作小鸟的动画。