Next的博客

新手程序员

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

既然是两个游戏,所以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的文本,但尽量不要太长。。。

这里写图片描述

看一下效果

这里写图片描述

阅读更多
版权声明:本文为博主原创文章,转载请保留原文链接blog.csdn.net/potato47 https://blog.csdn.net/potato47/article/details/52348852
个人分类: Cocos Creator
上一篇【用Cocos Creator给暗恋的女生写一个游戏(3)】——游戏加载界面
下一篇【用Cocos Creator给暗恋的女生写一个游戏(5)】——(Run Game)场景搭建
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭