白鹭引擎项目实战-赛车游戏（三）

开始界面比较简单，都是图片资源.

2.游戏开始界面

2.1 创建皮肤基于eui.Component组件，宽度480，高度800，取名gameStartSkin

2.2 拖拽素材进行布局，同时对应的素材设置对应的ID

最终效果图

gameStart.png

3.游戏进行中界面

3.1创建皮肤基于eui.Component组件，宽度480，高度800，取名gamePlayingSkin

gamePlayingCreate.png

3.2 拖拽准备好的背景图到设计面板，然后在属性栏设置位置x:0,y:0;然后取名为bg

gameBg1.png

3.3 把在小车，起跑线，车灯按照3.2中的操作，设置位置和ID

3.4 设置distanceBg，参考3.2的操作步骤，设置对应的属性值。

distanceBg.png

3.5 设置timeBg，参考3.2的操作步骤，设置对应的属性值。

timeBg.png

3.6 拷贝一份bg，设置ID为bg1，位置x:0,y:-800。

gameBg2.png

3.7 拖拽BitmapLabel组件，然后设置坐标，设置ID为distanceNum。

distanceNum.png

3.8 拖拽BitmapLabel组件，然后设置坐标，设置ID为timeNum。

timeNum.png

4.游戏结束界面

4.1创建皮肤基于eui.Component组件，宽度480，高度800，取名gameOverSkin

4.2拖拽Button组件到设计区域，然后用快捷方式创建Button皮肤，然后设置位置和ID

gameOverPlayAgainBtn.png
4.3拖拽一个group组件，同时拖拽一个背景素材到group组件内部，然后设置位置和ID.这里没有设置约束,主要是准备在逻辑中做一个
向下滑动的效果。 gameOverResultGroup.png

4.4拖拽结果素材到设计区域，设置位置和ID，这里取名ID为result，在逻辑代码中判断是成功了还是失败了。然后替换资源，这里可以理解为只是
一个零时的替代资源。

gameOverResult.png

页面到这里基本已经结束了。下一节，主要讲解皮肤和逻辑类的使用。