首页 > 其他分享 >rpg 优化开始界面

rpg 优化开始界面

时间:2022-11-02 10:03:23浏览次数:90  
标签:菜单 界面 Title Scene commandWindow rpg ._ prototype 优化

标题画面代表了游戏的脸面,必须好看。标题画面对应的类是Scene_Title,所以对于标题画面的修改可以通过重写Scene_Title中的相关方法来实现。

本文涉及的内容包括:

  1. 美化游戏标题
  2. 让背景动起来
  3. 自定义标题菜单
  4. 美化菜单

创建一个名为 LEARN_TitleMenu.js 的JavaScript文件,保存到 js/plugins 目录下,在RMMV的插件管理中安装该插件。

美化游戏标题

Scene_Title类中可以找到Scene_Title.prototype.createForeground方法,它用于创建标题画面的前景。在原始实现中,这个“前景”就是标题文字(简单的给文字加了描边效果)。我们可以在【数据库 - 系统 - 标题画面】选项中设置是否绘制标题名称。
  这里,我们重新实现createForeground方法,使用一个游戏logo图片来代替标题文字,相对于纯文字来说,图片可以包含图文效果,更高大上。实现代码:

Scene_Title.prototype.createForeground = function() {
    if ($dataSystem.optDrawTitle) {
        var gameLogo = ImageManager.loadBitmap("img/mndtitle/", "GameLogo");
        this._gameTitleSprite = new Sprite(gameLogo);
        this._gameTitleSprite.anchor = new Point(0.5, 0);
        this._gameTitleSprite.x = Graphics.width / 2;
        this._gameTitleSprite.y = 50;
        this.addChild(this._gameTitleSprite);
    }
};

这段代码将在画面显示一个Logo图片。我们的logo图片放到img/mndtitle目录下,名称为GameLogo.png,这张图片的内容是“武林外史”几个特效文字。if ($dataSystem.optDrawTitle)用于检测是否要绘制标题(这个就是前面说的在数据库中可以配置的选项)。因为mndtitle是个自定义目录,所以从该目录加载图片时要使用ImageManager.loadBitmap方法,参数指定文件夹位置和加载的图片名称。将这个图片放置在画面中间靠上的位置,如果你要放到正中间,可以使用this.centerSprite()方法。再一次提醒,如果你要用到图片的宽高尺寸来给图片设置坐标,那么设置方法应该放到Scene_Title.prototype.start中去做。最后效果如下。背景是MV自带素材,不是这里的重点;顶部的“武林外史”就是要展示的游戏logo兼游戏标题(随便网络找的一个素材,勿商用)。

  Screenshot1.png

 

让背景动起来

背景部分,如果只是想改成其它静态图,那么在“数据库”中更改就足够了,没必要自己重写。当然,如果你想,或者如果想实现动态背景,那么就需要修改Scene_Title.prototype.createBackground方法了。
  createBackground方法用于创建标题画面的背景。在这个方法的重写版本中,我们先创建一个用于显示背景的精灵,加载动态背景所需要的帧序列图片,然后在Scene_Title.prototype.update方法中按顺序用帧序列图片循环更新精灵的显示图片,从而实现背景的动态效果。先来看一下实现效果:

  Title.gif
  这个动态效果由三张图片组成(直接拿MV中的官方的标题图片 Devil.png 改的,旋转了一下怪物的二只爪子,做成了动画序列)。资源图片放到 img/mndtitle 目录下,名称按动画顺序依次为:TitleBack1.pngTitleBack2.pngTitleBack3.png
  下面是Scene_Title.prototype.createBackground的实现代码:

 

Scene_Title.prototype.createBackground = function() {
    this._animFrameImgs=[
        ImageManager.loadBitmap("img/mndtitle/", "TitleBack1"),
        ImageManager.loadBitmap("img/mndtitle/", "TitleBack2"),
        ImageManager.loadBitmap("img/mndtitle/", "TitleBack3")
    ];
    this._animFrames=[0,1,2,1];
    this._currFrame=0;
    this._animDelay=0.2;
    this._backSprite = new Sprite(this._animFrameImgs[0]);
    this.centerSprite(this._backSprite)
    this.addChild(this._backSprite);
};

首先依次加载三张背景图片存放到this._animFrameImgs中,this._animFrames是一个索引数组,表示一个动画序列,每个元素代表了在this._animFrameImgs数组中的图片索引,this._currFrame是动画序列中的当前帧,this._animDelay表示动画的二帧之间要求的时间间隔,this._backSprite是显示背景图片的精灵。
  因为createBackground方法的原始实现中创建了this._backSprite1this.__backSprite2,且在start方法中使用了这二个精灵,但我们现在重写的createBackground没有创建它们也没有去call原始方法,所以还要先重写Scene_Title.prototype.start方法,删除与_backSprite1_backSprite2有关的代码,如下:

Scene_Title.prototype.start = function() {
    Scene_Base.prototype.start.call(this);
    SceneManager.clearStack();
    //this.centerSprite(this._backSprite1);//删除
    //this.centerSprite(this._backSprite2);//删除
    this.playTitleMusic();
    this.startFadeIn(this.fadeSpeed(), false);
};

接下来是Scene_Title.prototype.update方法,在其中每隔this._animDelay的时间就按动画序列中的索引更新到下一张背景图片,代码如下。

var _Scene_Title_update = Scene_Title.prototype.update;
Scene_Title.prototype.update = function() {
    _Scene_Title_update.call(this);

    this._elapsedSinceLastUpdate = this._elapsedSinceLastUpdate || 0;
    if (this._elapsedSinceLastUpdate >= this._animDelay) {
        this._currFrame++;
        this._currFrame = this._currFrame % this._animFrames.length;
        var animFrameIndex = this._animFrames[this._currFrame];
        this._backSprite.bitmap = this._animFrameImgs[animFrameIndex];
        this._elapsedSinceLastUpdate = 0;
    }
    this._elapsedSinceLastUpdate += 1 / Graphics._fpsMeter.fps;
};

可以通过Graphics._fpsMeter.fps获取游戏当前的FPS,这里用1 / Graphics._fpsMeter.fps的方式粗略的表示二个update之间的时间间隔。this._elapsedSinceLastUpdate表示自上次更新背景图片以来流逝的游戏时间,在每次update都会累计一次,直到当流逝时间超过this._animDelay后,就开始绘制新一帧的图片,从而不断循环,实现动态背景的不断往复循环。
  当然,这里只是演示一个简单的动画效果,更多关于动画的技巧可以参考另一篇教程:【实例教程5】制作小游戏:坦克大战(上)

自定义标题菜单

默认标题画面只显示 开始游戏、继续游戏、设置 三个菜单命令,如果要增加其它的菜单,如:官方网站、致谢 等菜单,那么需要重写二个方法:Window_TitleCommand.prototype.makeCommandListScene_Title.prototype.createCommandWindow。前者用于在菜单画面创建菜单命令,后者用于将事件绑定到菜单。如果你读过之前的一篇教程:玩转菜单初级篇,应该就会猜到 Window_TitleCommand 对应的是标题界面中间偏下那个由白边框围成的菜单区域,菜单的显示由它创建,而事件处理由它所在的场景,也就是Scene_Title来绑定和处理。菜单绑定事件用setHandler,相关的实现也可以参考“玩转菜单初级篇”一文。最后实现代码如下:

var _Window_TitleCommand_makeCommandList = Window_TitleCommand.prototype.makeCommandList;
Window_TitleCommand.prototype.makeCommandList = function () {
    _Window_TitleCommand_makeCommandList.call(this);

    this.addCommand("官方网站", 'homepage');//增加一个新菜单,标识符为 homepage
};

var _Scene_Title_createCommandWindow = Scene_Title.prototype.createCommandWindow;
Scene_Title.prototype.createCommandWindow = function() {
    _Scene_Title_createCommandWindow.call(this);

    this._commandWindow.setHandler('homepage', this.commandHomepage.bind(this)); //将标识符为homepage的菜单绑定到commandHomepage方法
};

Scene_Title.prototype.commandHomepage = function() {
    this._commandWindow.activate();
    //打开url
    var cmd;
    if (process.platform === 'darwin') cmd = 'open';
    if (process.platform === 'win32') cmd = 'explorer.exe';
    if (process.platform === 'linux') cmd = 'xdg-open';
    var spawn = require('child_process').spawn;
    spawn(cmd, ["http://www.jianshu.com/nb/13204998"]);
};

这样,在游戏时点击标题画面的“官方网站”菜单后会打开本人在简书写的关于RMMV的文章专题首页。这里,this._commandWindow.activate();是重新激活当前游戏窗口,因为使用其它进程打开网页时会造成游戏窗口失焦。
  如果要删除菜单,更简单,只需要重写Window_TitleCommand.prototype.makeCommandList方法,删除不想看到的菜单即可,当然不要去call原始方法。

美化菜单

默认的菜单就是白边框围成的几个菜单文本,与目前的画面不太搭,所以现在的目标是用美化的图片来代替文本做成菜单。先看看完成效果:


  Final

四个菜单全部由图片做成,实际上它们是图片按钮Sprite_Button对象,本质上也是Sprite精灵,但能绑定方法能回应点击。像原始菜单一样,这些图片菜单可以用鼠标点击,也可以用方向键上下移动切换菜单,在当前选中的菜单前面会显示一个指示标记。
  要实现这个效果,首先要重写Scene_Title.prototype.create方法,这个方法用于初始化图片菜单的相关资源。实现代码:

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", "CmdHomepage"];
    var clicks=[
        function(){this.commandNewGame(); SoundManager.playOk();},
        function(){this.commandContinue(); SoundManager.playOk();},
        function(){this.commandOptions(); SoundManager.playOk();},
        function(){this.commandHomepage(); 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);
};

this._commandWindow.visible用于将原始的文本菜单隐藏掉,并将它放到画面外部,因为这个菜单即使不显示也能点击到,也能用上下方向键切换选择其菜单,不过,我们又不能删除它。当然,你可以重写Scene_Title.prototype.createCommandWindow方法,并只删除原始代码中的this.addWindow(this._commandWindow);,从而真的不让它出现,但那样你就得自己实现一些方法,比如:在游戏启动时原始的文本菜单会根据是否有存档自动选择 继续游戏 还是 开始游戏,可以用上下方向键切换不同的菜单,可以用确定键打开选中的菜单,如果不让它出现,那么这些功能就得自己去为图片菜单实现。所以,为了简单起见,我们让图片菜单与原始的文本菜单保持联动,每个图片菜单与原始的文本菜单一一对应。
  btnimgs是各个图片菜单的图片名称(也就是 img/mndtitle文件夹下与菜单相关的图片的名称),要按照原始文本菜单的顺序排列,以便使图片菜单与原始的文本菜单顺序是一致的。
  clicks是保存了各个菜单按钮要绑定的方法的一个数组,这个数组中,也是按顺序定义好各个图片菜单对应要绑定的方法。所有图片菜单都是一个Sprite_Button对象,这里注意,不要忘记设置它们的宽高,这会影响点击的热区,否则可能点在菜单上却没有反应。使用sprite.setClickHandler(clicks[i].bind(this));将图片菜单与对应的方法进行绑定。
  this._cmdButtons是存放图片按钮的数组,在update方法会用到。this._cmdSelect是个指示器,会显示在当前选中的菜单左侧。
  接下来就是要让选择指示器的显示在选中的菜单左侧,这个需要在Scene_Title.prototype.update中处理,在update方法中添加以下代码到最后(前文中已经重写了该方法,现在再添加代码进去):

    var btnSelect = this._cmdButtons[this._commandWindow.index()];
    this._cmdSelect.x = btnSelect.x;
    this._cmdSelect.y = btnSelect.y;

this._commandWindow.index()是用来获取原始的文本菜单中当前所选中的菜单索引,根据这个索引我们用this._cmdButtons[index]来从图片菜单数组中得到对应的图片菜单对象,然后将指示器放到它左侧。

补充:优化菜单点选方式

菜单的功能基本完成,但在运行过程中,我们发现它的工作方式与RMMV原始的方式不太一样。原始方式是:点击一个菜单时,如果该菜单不是当前选中的菜单,则只是选中它(在菜单上显示一个白色透明背景的方框,以呈高亮显示),让它成为当前选中的菜单;如果是当前选中的菜单,则直接进入该菜单功能。我们的菜单点击任何一个按钮,不论指示器在哪里,都会直接进入菜单功能。

  1. 如果要实现RMMV自带的原始点选方式,可以将clicks换成如下定义:
var clicks=[
  function(){if(this._commandWindow.index()!=0){this._commandWindow.select(0);}else{this._commandWindow.processOk();} },
  function(){if(this._commandWindow.index()!=1){this._commandWindow.select(1);}else{this._commandWindow.processOk();} },
  function(){if(this._commandWindow.index()!=2){this._commandWindow.select(2);}else{this._commandWindow.processOk();} },
  function(){if(this._commandWindow.index()!=3){this._commandWindow.select(3);}else{this._commandWindow.processOk();} }        
];

这种方式其实还不是很好,对于一个非当前选中的菜单,需要双击才能进入菜单功能,个人认为更好的方式是下面这种:

  1. 点击任何一个菜单(不论它是否为当前选中的菜单),指示器都会指向它,并直接进入菜单的功能,要实现这种方式,更简单:
var clicks=[
  function(){ this._commandWindow.select(0); this._commandWindow.processOk(); },
  function(){ this._commandWindow.select(1); this._commandWindow.processOk(); },
  function(){ this._commandWindow.select(2); this._commandWindow.processOk(); },
  function(){ this._commandWindow.select(3); this._commandWindow.processOk(); }
]


作者:鳗驼螺
链接:https://www.jianshu.com/p/527a82a2fd6a
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

标签:菜单,界面,Title,Scene,commandWindow,rpg,._,prototype,优化
From: https://www.cnblogs.com/renhaoran/p/16850038.html

相关文章

  • 界面组件DevExpress WPF v22.1 - 全新升级数据分析功能
    DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有着强大互动功能的XAML基础应用程序,这些应用程序专......
  • Java实现优化版【快速排序】+四度优化详解
    参考书目:《大话数据结构》一:快速排序1.基本思想:通过一趟排序将待排序记录分割成独立的两部分,其中一部分记录的关键字均比另一部分记录的关键字小,则可分别对这两部分记录继续......
  • 优化-图片懒加载
    我们开发商城项目的时候,商品图片会有很多如果在进入页面一下子就加载很多图片资源的话,会导致进入页面会很慢我们今天说到的图片懒加载,是一个优化层面的主要会有哪些优......
  • 11Jmeter之优化jenkins上html报告格式
    问题:当在jenkins上查看HTML报告时,发现报告格式不美观!  解决一:临时解决方法1、进入Manage Jenkins->Scriptconsole,输入如下命令并进行执行。System.setPropert......
  • Qt执行耗时操作导致界面卡顿的三种解决办法
    1.问题描述Qt界面程序开发中,会遇到执行耗时操作时,导致界面卡顿。原因是界面主线程是单线程,如果在UI主线程中执行耗时操作,例如点击按钮,响应函数去数据库查询数据,数据量比较......
  • Semi-join使用条件,派生表优化 (3)—mysql基于规则优化(四十六)
    前面说了子查询里有no/any/all不能用limit,groupby,orderby等,他会被查询优化器优化掉,子查询可能会物化转成内连接semi-join查询,物化就是会吧子查询看做一个表,如果数据太大,超......
  • 子查询注意事项&semi-join(2)—mysql基于规则优化(四十五)
    前面说了mysql会吧一些冗余的sql语句查询优化重写,比如多于的括号,比如有的外连接其实跟内连接类似,可以优化查询表的顺序。子查询又分为相关和不相关子查询,如果子查询过滤条件......
  • 为什么要做网站SEO优化?
    1.系统性的网络营销,是第一步,SEO推广是基础百度系是不是核心就是SEO和竞价呢?淘宝系是不是就是淘宝SEO和淘宝直通车(竞价)呢?在58,赶集,猪八家是不是也是花钱做排名呢?(竞价)对,互联网......
  • 最长不下降子序列(线段树优化dp)
    最长不下降子序列题目大意:给定一个长度为N的整数序列:A\(_{1}\),A\(_{2}\),⋅⋅⋅,A\(_{N}\)。现在你有一次机会,将其中连续的K个数修改成任意一个相同值。请你计......
  • nginx高并发优化之系统内核参数优化
    一、内核参数优化设置vi/etc/sysctl.conffs.file-max=655360net.ipv4.ip_forward=0net.ipv4.conf.default.rp_filter=1net.ipv4.conf.default.accept_source_route=......