On one we learned how to control the wizard by command of the keyboard, then this section of the content should like to understand more, because keyboard commands and mouse commands have many similarities, but did not handle the concept of MFC programming difficult to understand.
We follow four modules that interact are discussed:
Signal conventions: to set the mouse click area;
signal monitoring: get the current state of the mouse click (left or right, or press the pop-up, click on the position);
signal input; signal response.
To help you better understand the wizard class, this time to do a little more complex, true to the button effect: when the mouse button is pressed out, release the button becomes large, while a trigger event, as shown below:
He quickly picked up the keyboard with me
1. Create Wizard - Art of Drawing
First, we find Zhang map as a button, usually found on the Internet map is too large, and there is no circular diagram (with a square button ugly do it), so it is necessary to build it with the PS, not the self-pixel generally located in the 50 x 50-150x150 preferably, I used the following is a 50x50 bit of FIG.
Because you want to know the exact pixel location where the wizard to set the mouse to click on the range, so this time we should have planned to create a wizard can not blinded.
/*:
*
* @plugindesc 鼠标控制精灵演示插件
* @
* @author 进入盛夏之门
*
* @param uiPath
* @desc 按钮位图的存放路径
* @default img/pictures
*
*/
//常规工作——设置命名空间
//当需要管理多个命名空间时，使用作者名缩写+子空间名更加规范
var JRSXZM = JRSXZM || {};
JRSXZM.MouseControl = {};
JRSXZM.MouseControl.parameters = PluginManager.parameters('MouseControl');
//以上为常规的工作，可无视
//=======================
//用复制式重写定义一个简单的精灵类
//我们对系统提供的精灵类进行复制，创建一个"myButtonSprites"
function myButtonSprites() {
this.initialize.apply(this, arguments);
}
myButtonSprites.prototype = Object.create(Sprite.prototype);
myButtonSprites.prototype.constructor = myButtonSprites;
myButtonSprites.prototype.initialize = function () {
Sprite.prototype.initialize.call(this);
this.setFrame(0, 0, 100, 100);
this.createAll(); // 默认一开始就创建精灵
};
//写构造精灵的函数
myButtonSprites.prototype.createAll = function () {
//下面是用插件变量来储存图片路径，如果插件变量未定义，默认找'img/pictures/'文件夹
//注意每条路径间都要以/相连，下面得语句实际上是读取'img/pictures/Button’路径，不能缺少/
this._button = new Sprite(ImageManager.loadBitmap(JRSXZM.MouseControl.parameters['uiPath'] + '/' || 'img/pictures/', "Button", true));
//坐标起点设为原点或者不设默认为原点
this._button.anchor.x = this._button.anchor.y = 0;
this._button.setFrame(-10, -10, 60, 60);
var pressCount = 0;//定义一个计数变量，后边要用
this.addChild(this._button);
};
//在构造窗口时唯一构造精灵
JRSXZM.MouseControl.SUBcreateAllWindows = Scene_Map.prototype.createAllWindows;
Scene_Map.prototype.createAllWindows = function () {
JRSXZM.MouseControl.SUBcreateAllWindows.call(this);
this.myButton = new myButtonSprites();
this.addChild(this.myButton);
};
FIG two attachment help us understand the relationship between the position of the sprite with the code
in the code above functions as a positioning function for elf setFrame two functions.
myButtonSprites setFrame constructor configured for a large frame 100 * 100 (black box), the first two parameters of its sub-set 0,0 wizard start coordinate.
this._button.setFrame (-10, -10, 60, 60); sprite bitmap are set our range of motion (blue boxes) which (0,0) starts from the drawing start coordinate parent sprite provided, the -10 refers to a sprite bitmap used (that is, the button) is set to the start coordinates (10, 10) on the scope of this spirit will orange blue box is located.
In summary, we now know that this button coordinates, can be the next step. (More about sprite position attribute, see my article wizard class (sprite) properties, methods and interpretation of the whole prototype chain )
2. Signal convention - TouchInput class
Although the signal convention is the first step in the information exchange, but we have to find the rules agreed ah, you know the rules of the agreement, we have to find someone capable of processing function of the signal input, which is responsible for signal monitoring function.
We thought that since there is a spirit called "wizard button" (Sprite_Button), then you can see what we can find from it, a look, really gave us found it, there is a seemingly function is to monitor the mouse events.
Inquisitive, let's look up the most relevant TouchInput.isTriggered (if triggered) in which the function is defined, you can find:
in rpg_core.js find the definition of this function, check whether the left mouse button or the touch screen is pressed (Tips: RM developed in the project can also be applied to a mobile terminal).
But the question is whether this monitor mouse click function has been found, to monitor the position of the mouse click function not found, but that's okay, we already know from TouchInput went to the class above, then open our beloved F1 help documentation found TouchInput It attributes x and y coordinates of the mouse click!
With this property, they know the coordinates of the button, the next step is the signal agreed upon, we add this function myButtonSprites inside the class:
//判断鼠标点击位置（信号约定），给出bool型返回值
myButtonSprites.prototype.touchButton = function () {
//用tx，ty记录鼠标点击的范围
var tx = TouchInput.x, ty = TouchInput.y;
//获取按钮左上角的坐标，注意，这个x其实是获得
//按钮所在矩形区域坐标，所以需要加上10修正
var bx = this._button.x+10;
var by = this._button.y+10;
//如果鼠标点击落在按钮所在矩形区域，返回真
return tx > bx && tx < (bx + 50) && ty > by && ty < (by + 50);
};
But since it is the round button, click on the appropriate scope of a circular or more, then give me a round click on the agreed scope of functions, with the more advanced:
//圆形点击范围如何设置
myButtonSprites.prototype.touchButton = function () {
//用tx，ty记录鼠标点击的范围
var tx = TouchInput.x, ty = TouchInput.y;
//定义圆心坐标
var corex = this._button.x+10+25;//我们已知按钮半径为25
var corey = this._button.y+10+25;
//Math.pow为JavaScript自带的乘幂运算函数
return (Math.pow((tx - corex), 2) + Math.pow((ty - corey), 2))<=625;
};
3. Signal response - $ gameMessage.add delay effects and functions
We have already said our goal, there is a press took up the special effects when you want click a button, this process takes a few frames of animation, with the realization of the following three functions that you create.
//按钮特效函数
myButtonSprites.prototype.pressEffect = function () {
//按钮缩小为原来的0.8倍
this._button.scale.x = this._button.scale.y=0.8;
//设置该变量（在创建_button时定义）为10，意味着10帧之后按钮恢复
this.pressCount = 10;
}
//自建一个按钮刷新函数，每一帧减去相应变量
//注意，该函数要放在系统给的刷新函数中才可以实现每帧调用一次，该函数放在
//myButtonSprites.prototype.update中调用
myButtonSprites.prototype.updatePress = function () {
// 如果this.pressCount为0，跳出
if (!this.pressCount) return;
//如果this.pressCount不为0，每刷新一次（每帧刷新一次）减一
this.pressCount -= 1;
!this.pressCount && this.pressEnd(); //如果_pressCount为0，则使用pressEnd函数
}
//按钮特效结束的函数
myButtonSprites.prototype.pressEnd = function () {
//按钮恢复原大小
this._button.scale.x = this._button.scale.y=1;
}
Note that updatePress () function does not refresh itself, can put it in each frame refresh function (myButtonSprites.prototype.update ()) call can only be achieved under.
Message response function of my lazy direct pop up a dialog box on the line with the system provided $ gameMessage.add () function can be achieved, but large projects it is recommended to use a replicated copy rewrite its own pop-up dialog box function uses, this function can be written directly in the message monitoring module.
4. Message Monitoring
Elf refresh every time, once the message monitor, and keyboard events as:
//重写按钮刷新的函数，每次刷新都进行一次监测
myButtonSprites.prototype.update = function () {
Sprite.prototype.update.call(this); //无限执行刷新
this.updateTouch(); //判断是否按钮点下
this.updatePress(); //实现this.pressCount每帧减一
};
//监测鼠标是否点在指定位置，如果是，调用响应函数
myButtonSprites.prototype.updateTouch = function () {
//如果鼠标左键没有点下或者点下的位置不在指定范围，直接退出
if (!TouchInput.isTriggered() || !this.touchButton()) return;
//如果符合条件，触发消息响应函数
this.pressEffect(); //按钮按下的特效
$gameMessage.add("你已经点下按钮"); //弹出对话框
};
It means: each frame refresh button, point to monitor whether the mouse in the specified location, and if so, call response function
First with TouchInput.isTriggered before we find () function to determine whether the mouse at the point, and then touchButton () to determine whether the area clicked convention area, then trigger a response, use the mouse to trigger event success!
The above code is that all the required code, if there are places read do not understand can go back and look at the contents of Chapter VII: keyboard instruction
Codeword is not easy, I feel pretty good also requested to write smoothly thumbs support it, your encouragement is my motivation to continue writing and, if the error is also welcome that.
