关闭

【用Cocos Creator给暗恋的女生写一个游戏(4)】——游戏主菜单

标签: 游戏Creatorcocos新手教程实战
1549人阅读 评论(0) 收藏 举报
分类:

既然是两个游戏,所以X想用两个主页面,最理想的就是用pageview,可是Creator还没支持,所以用一个差不多的模拟一下——ScrollView

新建一个ScrollView空节点,添加ScrollView组件,使其大小充满全屏,在content节点下添加两个单色的Sprite节点,分别取名为PageLeft和PageRight调整颜色大小如图

这里写图片描述

再改造一下变成下面的样子

这里写图片描述

给两个按钮分别添加点击事件(新建Menu脚本挂载在Canvas节点上)

Menu.js

cc.Class({
    extends: cc.Component,

    properties: {

    },

    // use this for initialization
    onLoad: function () {

    },

    onBtnPlay1: function(){
        cc.director.loadScene("RunGame");
    },

    onBtnPlay2: function(){
        cc.director.loadScene("JumpGame");
    },

});

现在非常简约风格的主菜单界面就做好了,但是太单调了,我们再添加一个小动画

我们在屏幕的左下角添加一个Sprite节点显示我们的主角,然后编辑一个自拍的动画

这里写图片描述

我们再制作以一个气泡对话的效果

这就要讲到游戏素材的经典部分了,注意听讲(敲黑板)

我们把准备好的气泡图片双击打开,可以看到有四条绿色的线可以移动,把它们移动到如下图的位置,标横线的部分可以横向伸缩,竖线部分可以纵向伸缩,中间的十字部分横纵都伸缩,而四个角画叉的部分不会收伸缩影响,制作完的气泡图片不论怎么放大,四个角的圆角以及左边的小尖就不会变形了(请那位说“早就知道了”的同学出去)

这里写图片描述

点击右上角的对号保存,然后把制作好的图片添加到Tips节点下,修改图片模式为sliced(九宫格),然后调整图片的size属性得到如图效果(一定要改size,不要改scale,scale不会考虑图片模式),还要记得挂载widge组件让Tips节点保持在屏幕的底边

这里写图片描述

修改Menu脚本

cc.Class({
    extends: cc.Component,

    properties: {

        tipsLabel:cc.Label,

        tipsText:{
            type:cc.String,
            default:[],

        }
    },

    onLoad: function () {
        let self = this;
        var show = function(){
            if(self.tipsText.length>0){
                var n = Math.round(Math.random()*(self.tipsText.length-1));//随机选择tipsText数组中的一个
                self.tipsLabel.string = self.tipsText[n];
            }
        }
        show();
        this.schedule(show,10);//每十秒更新一次Tips
    },

    onBtnPlay1: function(){
        cc.director.loadScene("RunGame");
    },

    onBtnPlay2: function(){
        cc.director.loadScene("JumpGame");
    },

});

在Tips节点下添加一个Label节点,并拖入Menu脚本,在属性面板可以任意添加Tips的文本,但尽量不要太长。。。

这里写图片描述

看一下效果

这里写图片描述

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:143492次
    • 积分:2179
    • 等级:
    • 排名:第18214名
    • 原创:71篇
    • 转载:8篇
    • 译文:0篇
    • 评论:167条
    最新评论