jianghe2nd/mota-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

new statusbnar

Browse Source
This commit is contained in:
ckcz123 2018-11-15 17:51:04 +08:00
parent 11af6673ee
commit 7cd492eccd
1 changed files with 14 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
docs/personalization.md
View File

@ -548,50 +548,47 @@ this.myfunc = function(x) {
通过这种，将脚本和自定义事件混用的方式，可以达到和RM中公共事件类似的效果，即一个调用触发一系列事件。 通过这种，将脚本和自定义事件混用的方式，可以达到和RM中公共事件类似的效果，即一个调用触发一系列事件。
<!--
## 自定义状态栏（新增显示项） ## 自定义状态栏（新增显示项）
在V2.2以后，我们可以自定义状态栏背景图（全塔属性 - statusLeftBackground）等等。 在V2.2以后，我们可以自定义状态栏背景图（全塔属性 - statusLeftBackground）等等。
但是，如果我们还想新增其他项目的显示，比如技能塔所需要的魔力值（气息），该怎么办？ 但是，如果我们还想新增其他项目的显示，比如攻速或者暴击，该怎么办？
需要进行如下几个操作： 需要进行如下几个操作：
1. 定义图标ID；比如魔力我就定义mana，气息可以简单的定义qixi；你也可以定义其他的ID，但是不能和已有的重复。这里以mana为例。 1. 定义ID；比如攻速我就定义speed，暴击可以简单的定义baoji；你也可以定义其他的ID，但是不能和已有的重复。这里以speed为例。
2. 在index.html的statusBar中（44行起），进行该状态栏项的定义。仿照其他几项，插在其应当显示的位置，注意替换掉相应的ID。 2. 在index.html的statusBar中（44行起），进行该状态栏项的定义。仿照其他几项，插在其应当显示的位置，注意替换掉相应的ID。
``` html ``` html
<div class="status" id="manaCol"> <div class="status" id="speedCol">
<img id="img-mana"> <img id="img-speed">
<p class='statusLabel' id='mana'></p> <p class='statusLabel' id='speed'></p>
</div> </div>
``` ```
3. 在editor.html中的statusBar（317行起），仿照第二点同样添加；这一项如果不进行则会地图编辑器报错。editor-mobile.html同理。 3. 在editor.html中的statusBar（323行起），仿照第二点同样添加；这一项如果不进行则会地图编辑器报错。editor-mobile.html同理。
4. 使用便捷PS工具，打开icons.png，新增一行并将魔力的图标P上去；记下其索引比如24（从0开始数）。 4. 使用便捷PS工具，打开icons.png，新增一行并将魔力的图标P上去；记下其索引比如30（从0开始数）。
5. 在main.js的this.statusBar中增加图片、图标和内容的定义。 5. 在main.js的this.statusBar中增加图片、图标和内容的定义。
``` js ``` js
this.statusBar = { this.statusBar = {
'images': { 'images': {
// ...其他略 // ...其他略
'mana': document.getElementById("img-mana"), // 图片的定义 'speed': document.getElementById("img-speed"), // 图片的定义
}, },
'icons': { 'icons': {
// ...其他略 // ...其他略
'mana': 24, // 图标的定义，这里对应的是icons.png中的索引 'speed': 24, // 图标的定义，这里对应的是icons.png中的索引
}, },
// ...其他略 // ...其他略
'mana': document.getElementById('mana'), // 显示内容（数据）的定义 'speed': document.getElementById('speed'), // 显示内容（数据）的定义
} }
``` ```
6. 显示内容的设置。在脚本编辑的updateStatusBar函数，可以对该状态栏显示内容进行设置，下面是几个例子。 6. 显示内容的设置。在脚本编辑的updateStatusBar函数，可以对该状态栏显示内容进行设置，下面是几个例子。
``` js ``` js
core.statusBar.mana.innerHTML = core.getFlag('mana', 0); // 设置其显示内容为flag:mana值。 // 设置其显示内容为status:speed值；需要在project/data.js中firstData的hero那里新增初始值`"speed": 0`。
core.statusBar.mana.innerHTML = core.getFlag('mana', 0) + '/' + core.getFlag('manaMax', 0); // 显示内容将类似 "32/60" 这样。 core.statusBar.speed.innerHTML = core.getStatus('speed');
core.statusBar.mana.style.fontStyle = 'normal'; // 这一行会取消斜体。如果是汉字（比如技能名）的话，斜体起来会非常难看，可以通过这一句取消。 // 设置其显示内容为flag:speed值，无需额外进行定义。
core.statusBar.speed.innerHTML = core.getFlag('speed', 0);
``` ```
-->
## 技能塔的支持 ## 技能塔的支持
其实，在HTML5上制作技能塔是完全可行的。 其实，在HTML5上制作技能塔是完全可行的。