Project1

标题: 求问怎样实现主菜单鼠标移动变色 [打印本页]

---

作者: 宅子啦啦    时间: 2017-9-23 21:30
标题: 求问怎样实现主菜单鼠标移动变色
我用了这个代码 把主菜单改成图片，求问怎么能让鼠标移过去他就变颜色？？

JAVASCRIPT 代码复制

var _Scene_Title_create = Scene_Title.prototype.create;
Scene_Title.prototype.create = function () {
    _Scene_Title_create.call(this);
    this._commandWindow.visible = false;//不显示原始的文本菜单
    this._commandWindow.x=Graphics.width;//移到画面外去，否则虽然不显示仍能点击
    var btnimgs=["CmdStartGame", "CmdContinueGame", "CmdOptions"];
    var clicks=[
        function(){this.commandNewGame(); SoundManager.playOk();},
        function(){this.commandContinue(); SoundManager.playOk();},
        function(){this.commandOptions(); SoundManager.playOk();},
 
    ];
    this._cmdButtons=[];//所有图片菜单
    for(var i in btnimgs){
        var sprite=new Sprite_Button();
        sprite.width=184;
        sprite.height=53;
        sprite.bitmap=ImageManager.loadBitmap("img/mndtitle/", btnimgs[i]);
        //sprite.anchor=new Point(0.5,0.5);//不要设置，设置这个会出现菜单点不中的问题，不清楚原因。
        sprite.x=Graphics.width/2-92;
        sprite.y=360+60*i;
        sprite.setClickHandler(clicks[i].bind(this));
        this._cmdButtons.push(sprite);
        this.addChild(sprite);
    }
    this._cmdSelect=new Sprite(ImageManager.loadBitmap("img/mndtitle/", "CmdSelect"));//选中菜单的指示器
    this._cmdSelect.anchor=new Point(1,0);//因为按钮的anchor是默认的(0,0),这个指示器要放在按钮左侧，所以让它的anchor为(1,0)更容易定位
    this.addChild(this._cmdSelect);
};

var _Scene_Title_create = Scene_Title.prototype.create;


Scene_Title.prototype.create = function () {


    _Scene_Title_create.call(this);


    this._commandWindow.visible = false;//不显示原始的文本菜单


    this._commandWindow.x=Graphics.width;//移到画面外去，否则虽然不显示仍能点击


    var btnimgs=["CmdStartGame", "CmdContinueGame", "CmdOptions"];


    var clicks=[


        function(){this.commandNewGame(); SoundManager.playOk();},


        function(){this.commandContinue(); SoundManager.playOk();},


        function(){this.commandOptions(); SoundManager.playOk();},


 


    ];


    this._cmdButtons=[];//所有图片菜单


    for(var i in btnimgs){


        var sprite=new Sprite_Button();


        sprite.width=184;


        sprite.height=53;


        sprite.bitmap=ImageManager.loadBitmap("img/mndtitle/", btnimgs[i]);


        //sprite.anchor=new Point(0.5,0.5);//不要设置，设置这个会出现菜单点不中的问题，不清楚原因。


        sprite.x=Graphics.width/2-92;


        sprite.y=360+60*i;


        sprite.setClickHandler(clicks[i].bind(this));


        this._cmdButtons.push(sprite);


        this.addChild(sprite);


    }


    this._cmdSelect=new Sprite(ImageManager.loadBitmap("img/mndtitle/", "CmdSelect"));//选中菜单的指示器


    this._cmdSelect.anchor=new Point(1,0);//因为按钮的anchor是默认的(0,0),这个指示器要放在按钮左侧，所以让它的anchor为(1,0)更容易定位


    this.addChild(this._cmdSelect);


};

QQ截图20170923212850.jpg (9.8 KB, 下载次数: 15)

下载附件  保存到相册

2017-9-23 21:30 上传

---

作者: 在野月光    时间: 2017-9-24 00:07


移动变色？什么意思？
如果只是想分配鼠标移入移出时的变化，
那么TouchInput._onMouseMove抄一下再改一下就是了。
比如(仅供参考)：

JAVASCRIPT 代码复制

Scene_Title.prototype.initialize = function() {
        Scene_Base.prototype.initialize.call(this);
        document.addEventListener('mousemove', this.onMouseMove.bind(this));        // <<< 添加
};
 
Scene_Title.prototype.onMouseMove = function(event) {                //   <<< 新建
         var x = Graphics.pageToCanvasX(event.pageX);
        var y = Graphics.pageToCanvasY(event.pageY);
        if(SceneManager._scene.constructor == Scene_Title){
                this.onMove(x, y);
        }
};
 
Scene_Title.prototype.onMove = function(x, y) {                //  <<< 新建
        var 按钮 = [];
        按钮[0] = {'左边': 20, '右边': 100, '顶边': 20, '底边': 40};        // 假设的按钮边界指标 A
        按钮[1] = {'左边': 20, '右边': 100, '顶边': 40, '底边': 60};        // 假设的按钮边界指标 B
        按钮[2] = {'左边': 20, '右边': 100, '顶边': 60, '底边': 80};        // 假设的按钮边界指标 C
 
        switch(true){
                case this.inButton(x, y, 按钮[0]) :
                        console.log('鼠标移入了【按钮A】');
                        // 接下来要做的事...
                break;
                case this.inButton(x, y, 按钮[1]) :
                        console.log('鼠标移入了【按钮B】');
                        // 接下来要做的事...
                break;
                case this.inButton(x, y, 按钮[2]) :
                        console.log('鼠标移入了【按钮C】');
                        // 接下来要做的事...
                break;
                default:
                        console.log('鼠标移出，还原...？');
                        // 接下来要做的事...
                break;
        };
};
 
Scene_Title.prototype.inButton = function(x,  y, 按钮) {                // <<< 新建
        return x > 按钮.左边 && x < 按钮.右边 && y  > 按钮.顶边 && y < 按钮.底边;
};

Scene_Title.prototype.initialize = function() {


        Scene_Base.prototype.initialize.call(this);


        document.addEventListener('mousemove', this.onMouseMove.bind(this));        // <<< 添加


};


 


Scene_Title.prototype.onMouseMove = function(event) {                //   <<< 新建


         var x = Graphics.pageToCanvasX(event.pageX);


        var y = Graphics.pageToCanvasY(event.pageY);


        if(SceneManager._scene.constructor == Scene_Title){


                this.onMove(x, y);


        }


};


 


Scene_Title.prototype.onMove = function(x, y) {                //  <<< 新建


        var 按钮 = [];


        按钮[0] = {'左边': 20, '右边': 100, '顶边': 20, '底边': 40};        // 假设的按钮边界指标 A


        按钮[1] = {'左边': 20, '右边': 100, '顶边': 40, '底边': 60};        // 假设的按钮边界指标 B


        按钮[2] = {'左边': 20, '右边': 100, '顶边': 60, '底边': 80};        // 假设的按钮边界指标 C


 


        switch(true){


                case this.inButton(x, y, 按钮[0]) :


                        console.log('鼠标移入了【按钮A】');


                        // 接下来要做的事...


                break;


                case this.inButton(x, y, 按钮[1]) :


                        console.log('鼠标移入了【按钮B】');


                        // 接下来要做的事...


                break;


                case this.inButton(x, y, 按钮[2]) :


                        console.log('鼠标移入了【按钮C】');


                        // 接下来要做的事...


                break;


                default:


                        console.log('鼠标移出，还原...？');


                        // 接下来要做的事...


                break;


        };


};


 


Scene_Title.prototype.inButton = function(x,  y, 按钮) {                // <<< 新建


        return x > 按钮.左边 && x < 按钮.右边 && y  > 按钮.顶边 && y < 按钮.底边;


};

---

欢迎光临 Project1 (https://rpg.blue/)

Powered by Discuz! X3.1