站内搜索

搜索
热搜: 活动 交友 discuz

iFAction 世界需要你的想象力!

[原创] 【开源】改变鼠标样式-Web端MOD

8

主题

59

帖子

669

积分

iF村庄

Rank: 5Rank: 5

积分
669

摩点支持者内测用户

发表于 2020-5-31 15:48:07 | 显示全部楼层 |阅读模式
本帖最后由 MCCF 于 2020-7-27 20:46 编辑


改变鼠标样式-Web端

My English is bad, so there is no English version of this mod now.
一、一些废话 / There's nothing useful here!
众所周知我们的Moon姐咕咕咕了一个通过DLL实现的改变鼠标样式MOD。
As we all know, @moon has a mouse style mod which is realized by DLL.
由于是通过DLL实现所以显然只能兼容PC端。
Because it is implemented by DLL, it is obviously only compatible with PC.
但是考虑到Web端有CSS及DOM技术的加持,我们也可以实现一个这样的Web端MOD。
However, considering the support of CSS and DOM technology on the web side, we can also implement such a web side mod.
于是本MOD就产生了……而且做完居然比官方还早_(:з)∠)_
So this mod came into being.
二、使用说明 / Instructions
建议下载MOD后进入MOD界面逐个对应查看。
It is recommended to enter the mod interface to view one by one after downloading mod.
视频教学 / Video Tutorial
链接 / Link: https://www.bilibili.com/video/BV1dk4y167ja/
配置部分 / Configuration
中文
English
1. 基础功能
本MOD支持改变光标为图片,以及前端特有的使用系统光标样式(忙碌光标、禁用光标、拖拽光标等)的功能。下一版本还会支持光标动画和粒子特效。

2. 整体光标样式/图片
进入MOD并找到CursorWeb配置项,可以发现其中有cursorType及cursorPic两个配置项。这就是“整体光标”部分。

整体光标表示整个游戏画面内的鼠标光标,优先级低于触发器悬停时的额外光标样式。
其中,cursorType表示使用系统自带的样式,比如"pointer"表示手型光标,"crosshair"表示十字光标等等。一共有数十种可用样式,详情参见MDN文档中下方表格第二列的取值。

cursorPic也就是光标使用的图片路径了,注意需要有Graphics部分。另外,cursorType的优先级高于cursorPic,只有cursorType设置为""时才会试图使用cursorPic的值。

3. 触发器悬停时样式
也可以单独设置鼠标悬浮于某个触发器时所用的光标样式。
本MOD把一个cursorType和一个cursorPic的组合称为Pattern。这样,就可以通过指定某个Pattern的方式,快速地表示出设置的某种特定样式。

找到cursorPatterns配置项,其中被"{"和"}"大括号围起来的部分就是配置部分。默认附带了四个Pattern项目,每个项目配置的格式为"patternId": [cursorType,cursorPic]。

例如"hand": ["pointer",""]表示"hand"这个Pattern意味着将光标改为手型图标;"miss": ["","Graphics/System/miss.png"]表示"miss"意味着将光标样式改为一张图像。每个配置项后面必须有一个逗号,只有最后一项末尾的逗号可以省略。

最后,在触发器内的某一页的第一项设为一个注释,注释内容中新增一行changeMouseWeb|id,其中id替换成想使用的Pattern的ID。当这一页满足显示条件时,鼠标悬停该触发器就会自动变为那个Pattern所指定的样式了。

1. Basic Functions
This mod supports the function of changing the cursor to a picture and using the system cursor style (busy cursor, disable cursor, drag cursor, etc.) unique to the front end. The next release will also support cursor animation and particle effects.
2. Overall Cursor Style / Picture
Enter the mod and find the CursorWeb object. You can find two configuration items: cursorType and cursorPic. This is the "overall cursor" section.
The overall cursor represents the mouse cursor in the whole game screen, with priority lower than the extra cursor style when the trigger hovers.
Among them, cursorType refers to the system's own style, such as "pointer" for hand cursor, "crosshair" for cross cursor, etc. There are dozens of styles available. Please refer to the values in the second column of the table below MDN Document for details.
And the cursorPic is the image path used by the cursor. Please note that the "Graphics" part is needed. In addition, the priority of cursorType is higher than cursorPic, and the value of cursorPic will be used only when cursorType is set to "".
3. Style When Hovering Over Trigger
You can also independently set the cursor style used when hovering over a trigger.
In this mod, the combination of a cursorType and a cursorPic is called pattern. In this way, you can quickly express a specific style set by specifying a pattern.
Find the cursorPatterns configuration item. The part surrounded by "{" and "}" braces is the configuration part. There are four pattern items by default, and the format of each item configuration is "patternId": [cursorType, cursorPic].
For example, "hand": ["pointer", ""] means this "hand" pattern means to change the cursor to a hand icon; "miss": ["","Graphics/System/miss.png"] means this "miss" pattern means to change the cursor style to an image. Each configuration item must be followed by a comma, only the comma at the end of the last item can be omitted.
Finally, set the first item of a page in the trigger as a comment, and add a new line of changeMouseWeb|id in the comment content, where the id is replaced by the id of the pattern you want to use. When this page meets the display conditions, the trigger will automatically change to the style specified by the pattern when hovering.


2

主题

30

帖子

199

积分

iF平原

Rank: 4

积分
199

摩点支持者

发表于 2020-6-1 10:59:19 | 显示全部楼层
虽然可能用不上,但是。。。好样的,
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

联系我们
QQ群:977585123
iFAction下载
Windows客户端
反馈
意见建议
iFAction

iFAction

京ICP备15053274号-1

Powered by Discuz! X3.4 © 2001-2013 Comsenz Inc.