Project1

标题: 基于DOM层的光标指针替换方案 [打印本页]
作者: 清澈淌漾    时间: 2023-11-10 10:04
标题: 基于DOM层的光标指针替换方案
JAVASCRIPT 代码复制
  1. 在CSS里清理掉body的光标
  2.  
  3. body {
  4.     -moz-user-select: none;
  5.     -webkit-user-select: none;
  6.     -ms-user-select: none;
  7.     user-select: none;
  8.     cursor: none;
  9.     overflow: hidden;



JAVASCRIPT 代码复制
  1. 在index中加入div标记  
  2. <div id="cursor"></div>



JAVASCRIPT 代码复制
  1. 添加DOM的样式
  2. #cursor{
  3.     background-image: url(../img/ui/鼠标.png);
  4.     position:absolute;
  5.     z-index:200;
  6.     top:50%;
  7.     left:50%;
  8.     width:32px;
  9.     height:32px;
  10.     background-size: 100%;
  11.     animation: size 1s  infinite;
  12. }
  13.  
  14. @keyframes size {
  15.     0% {
  16.         transform:scale(1);
  17.     }
  18.     50% {
  19.         transform:scale(0.9);
  20.     }
  21.     100% {
  22.         transform:scale(1);
  23.     }
  24. }


JAVASCRIPT 代码复制
  1. 添加监听
  2.  
  3. LIM.cursor=document.getElementById("cursor")
  4. /////光标
  5.  
  6.  
  7. TouchInput._onMouseMove = function(event) {
  8.     const x = Graphics.pageToCanvasX(event.pageX);
  9.     const y = Graphics.pageToCanvasY(event.pageY);
  10.     LIM.cursor.style.left =event.pageX + "px"
  11.     LIM.cursor.style.top = event.pageY + "px"
  12.  
  13.     if (this._mousePressed) {
  14.         this._onMove(x, y);
  15.     } else if (Graphics.isInsideCanvas(x, y)) {
  16.         this._onHover(x, y);
  17.     }
  18. };



尝试过在Scene_Base创建时加一个鼠标精灵，这样就能让鼠标和游戏缩放同步，但是总有各种BUG。
有大佬有现成的方案吗
作者: shiroin    时间: 2023-11-10 14:22
只是替换光标的话，有一个推荐的插件…但它是用图片替换的，不知道能不能给你带来一些参考…

MousePointerExtend.zip

4.12 KB, 下载次数: 13
作者: 背棺走的骷髅    时间: 2023-11-13 14:36
我刚接触基础不久，添加监听第十行的等于号后少了空对观察方便点，我不知道这样对后期的影响有多少
我是从VisualBasic那边转来的，对JS了解不深



欢迎光临 Project1 (https://rpg.blue/) Powered by Discuz! X3.1