基于DOM层的光标指针替换方案

じ☆ve冰风

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标记  
   

复制代码

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.     }elseif(Graphics.isInsideCanvas(x, y)){
    
16.         this._onHover(x, y);
    
17.     }
    
18. };

复制代码

尝试过在Scene_Base创建时加一个鼠标精灵，这样就能让鼠标和游戏缩放同步，但是总有各种BUG。
有大佬有现成的方案吗
             本帖来自P1论坛作者清澈淌漾，因Project1站服务器在国外有时候访问缓慢不方便作者交流学习，经联系P1站长fux2同意署名转载一起分享游戏制作经验，共同为国内独立游戏作者共同创造良好交流环境，原文地址：https://rpg. blue/forum.php?mod=viewthread&tid=494777  若有侵权，发帖作者可联系底部站长QQ在线咨询功能删除，谢谢。