Project1

标题: 如何靠脚本用角色图片做一个顺畅的动画? [打印本页]

---

作者: play337    时间: 2021-12-26 11:28
标题: 如何靠脚本用角色图片做一个顺畅的动画?
如何靠脚本用角色图片做一个顺畅的动画?



我测试了好多次... 下转.左转.右转.上转

系统一定是 1.2.3....3.2.1

你一转方向就变成 4.5.6.....6.5.4

所以如果我有12张图片...

要怎麽使用脚本...让图片顺起来呢?

(如果只有3张...就用踏步...但是有12张要顺起来就很头大了 >_< )

======================
其他尝试:
01.用内附的动画下去做
很顺...不过 他无法改每个桢的等待时间(动画速度他是固定的)
02.用插件PictureAnimation.js...他是以图片X.Y位置定位...所以一但地图大一点...他会飞走.

---

作者: rexuegg123    时间: 2021-12-26 13:43


你是要按1、2、3……11,12的顺序吗？
我游戏里有一个技能动画的显示方法，可能适合你。
它是以div元素的形式驱动的：
位置显示用的是相对于父级元素的top和left；
设置了动画完成的时间限制（毫秒），如整体时间为t, 大图有20张小图，则每张小图的显示时间为 t/20;
设置了小图显示比例，可以按照设置的百分比显示

---

作者: rexuegg123    时间: 2021-12-26 14:31

JAVASCRIPT 代码复制

let obj = 
{
  targetId:值为字符(表示父级元素id),
  time:值为数字(表示动画显示的整体时间,单位毫秒),
  picName:值为字符(大图名称及后缀),
  picSrc:值为字符（表示大图路径),
  width:值为数组(如[192,5],0号元素表示小图的宽，1号元素表示大图每排有几张小图),
  height:值为字符（表示大图路径及文件名称）,
  width:值为数组(如[192,5],0号元素表示小图的高，1号元素表示大图每列有几张小图),
  top:-20,
  left:-20,
  per:值为数字(表示显示比例)
}
 
function  帧动画显示 (obj) {
    let id   = obj.targetId+'_'+obj.picName;           
    let z    = '<div id="'+id+'"><img id="'+id+'_img"></div>';
    $('#'+obj.targetId).append(z);
    let div = document.getElementById(id);
    div.style.position   = 'absolute';
    div.style.top        = obj.top+'px';
    div.style.left       = obj.left+'px';
    div.style.width      = obj.width[0]*obj.per/100+'px';
    div.style.height     = obj.height[0]*obj.per/100+'px';        
    div.style.overflow        = 'hidden';
 
    var img = document.getElementById(id+'_img');
    img.style.position   = 'absolute';
    img.style.top        = '0px';
    img.style.left       = '0px';                
    img.style.width      = obj.width[0]*obj.width[1]*obj.per/100+'px';
    img.style.height     = obj.height[0]*obj.height[1]*obj.per/100+'px';
    img.src = obj.picSrc+obj.picName;//  '/img/……/num.png'
 
    var w = obj.width[0]*obj.per/100, h = obj.height[0]*obj.per/100;
    var wt = obj.width[1], ht = obj.height[1];
    var picnum  = wt*ht;  //横向张数*纵向张数
    var pickeep = obj.time/picnum;          
    var i=2;
    function AnimateOfSkill_demo () {
        if (i<picnum) {
            img.style.top   = -(i<=wt ? 0 : (Math.ceil(i/wt)-1)) * h + 'px';
            img.style.left  = -(i-(Math.ceil(i/wt)-1) * wt-1) * w + 'px';            
            i++;
            setTimeout(function(){ AnimateOfSkill_demo () },pickeep);
        } else {div.remove()};
    };
    setTimeout(function(){ AnimateOfSkill_demo () },pickeep);
}

let obj = 


{


  targetId:值为字符(表示父级元素id),


  time:值为数字(表示动画显示的整体时间,单位毫秒),


  picName:值为字符(大图名称及后缀),


  picSrc:值为字符（表示大图路径),


  width:值为数组(如[192,5],0号元素表示小图的宽，1号元素表示大图每排有几张小图),


  height:值为字符（表示大图路径及文件名称）,


  width:值为数组(如[192,5],0号元素表示小图的高，1号元素表示大图每列有几张小图),


  top:-20,


  left:-20,


  per:值为数字(表示显示比例)


}


 


function  帧动画显示 (obj) {


    let id   = obj.targetId+'_'+obj.picName;           


    let z    = '<div id="'+id+'"><img id="'+id+'_img"></div>';


    $('#'+obj.targetId).append(z);


    let div = document.getElementById(id);


    div.style.position   = 'absolute';


    div.style.top        = obj.top+'px';


    div.style.left       = obj.left+'px';


    div.style.width      = obj.width[0]*obj.per/100+'px';


    div.style.height     = obj.height[0]*obj.per/100+'px';        


    div.style.overflow        = 'hidden';


 


    var img = document.getElementById(id+'_img');


    img.style.position   = 'absolute';


    img.style.top        = '0px';


    img.style.left       = '0px';                


    img.style.width      = obj.width[0]*obj.width[1]*obj.per/100+'px';


    img.style.height     = obj.height[0]*obj.height[1]*obj.per/100+'px';


    img.src = obj.picSrc+obj.picName;//  '/img/……/num.png'


 


    var w = obj.width[0]*obj.per/100, h = obj.height[0]*obj.per/100;


    var wt = obj.width[1], ht = obj.height[1];


    var picnum  = wt*ht;  //横向张数*纵向张数


    var pickeep = obj.time/picnum;          


    var i=2;


    function AnimateOfSkill_demo () {


        if (i<picnum) {


            img.style.top   = -(i<=wt ? 0 : (Math.ceil(i/wt)-1)) * h + 'px';


            img.style.left  = -(i-(Math.ceil(i/wt)-1) * wt-1) * w + 'px';            


            i++;


            setTimeout(function(){ AnimateOfSkill_demo () },pickeep);


        } else {div.remove()};


    };


    setTimeout(function(){ AnimateOfSkill_demo () },pickeep);


}

根据你的情况，看是否适合你。

---

作者: play337    时间: 2021-12-26 15:33
我用这样.... 结果还是不行...

JAVASCRIPT 代码复制

let obj = 
{
  targetId:48,
  time:60,
  picName:0000-check,
  picSrc:img/characters,
  width:[576,12],
  height:[768,8],
  top:-20,
  left:-20,
  per:100
}
 
function  帧动画显示 (obj) {
    let id   = obj.targetId+'_'+obj.picName;           
    let z    = '<div id="'+id+'"><img id="'+id+'_img"></div>';
    $('#'+obj.targetId).append(z);
    let div = document.getElementById(id);
    div.style.position   = 'absolute';
    div.style.top        = obj.top+'px';
    div.style.left       = obj.left+'px';
    div.style.width      = obj.width[0]*obj.per/100+'px';
    div.style.height     = obj.height[0]*obj.per/100+'px';        
    div.style.overflow        = 'hidden';
 
    var img = document.getElementById(id+'_img');
    img.style.position   = 'absolute';
    img.style.top        = '0px';
    img.style.left       = '0px';                
    img.style.width      = obj.width[0]*obj.width[1]*obj.per/100+'px';
    img.style.height     = obj.height[0]*obj.height[1]*obj.per/100+'px';
    img.src = obj.picSrc+obj.picName;//  '/img/……/num.png'
 
    var w = obj.width[0]*obj.per/100, h = obj.height[0]*obj.per/100;
    var wt = obj.width[1], ht = obj.height[1];
    var picnum  = wt*ht;  //横向张数*纵向张数
    var pickeep = obj.time/picnum;          
    var i=2;
    function AnimateOfSkill_demo () {
        if (i<picnum) {
            img.style.top   = -(i<=wt ? 0 : (Math.ceil(i/wt)-1)) * h + 'px';
            img.style.left  = -(i-(Math.ceil(i/wt)-1) * wt-1) * w + 'px';            
            i++;
            setTimeout(function(){ AnimateOfSkill_demo () },pickeep);
        } else {div.remove()};
    };
    setTimeout(function(){ AnimateOfSkill_demo () },pickeep);
}

let obj = 


{


  targetId:48,


  time:60,


  picName:0000-check,


  picSrc:img/characters,


  width:[576,12],


  height:[768,8],


  top:-20,


  left:-20,


  per:100


}


 


function  帧动画显示 (obj) {


    let id   = obj.targetId+'_'+obj.picName;           


    let z    = '<div id="'+id+'"><img id="'+id+'_img"></div>';


    $('#'+obj.targetId).append(z);


    let div = document.getElementById(id);


    div.style.position   = 'absolute';


    div.style.top        = obj.top+'px';


    div.style.left       = obj.left+'px';


    div.style.width      = obj.width[0]*obj.per/100+'px';


    div.style.height     = obj.height[0]*obj.per/100+'px';        


    div.style.overflow        = 'hidden';


 


    var img = document.getElementById(id+'_img');


    img.style.position   = 'absolute';


    img.style.top        = '0px';


    img.style.left       = '0px';                


    img.style.width      = obj.width[0]*obj.width[1]*obj.per/100+'px';


    img.style.height     = obj.height[0]*obj.height[1]*obj.per/100+'px';


    img.src = obj.picSrc+obj.picName;//  '/img/……/num.png'


 


    var w = obj.width[0]*obj.per/100, h = obj.height[0]*obj.per/100;


    var wt = obj.width[1], ht = obj.height[1];


    var picnum  = wt*ht;  //横向张数*纵向张数


    var pickeep = obj.time/picnum;          


    var i=2;


    function AnimateOfSkill_demo () {


        if (i<picnum) {


            img.style.top   = -(i<=wt ? 0 : (Math.ceil(i/wt)-1)) * h + 'px';


            img.style.left  = -(i-(Math.ceil(i/wt)-1) * wt-1) * w + 'px';            


            i++;


            setTimeout(function(){ AnimateOfSkill_demo () },pickeep);


        } else {div.remove()};


    };


    setTimeout(function(){ AnimateOfSkill_demo () },pickeep);


}

---

作者: 在野月光族    时间: 2021-12-26 16:38
不清楚哪些'4.56...'是怎么得出来的。
常规应该是 0, 1, 2, 3。
其结果调用的公式是rpg_objects.js下，
Game_CharacterBase.prototype.updatePattern里面的
this._pattern = (this._pattern + 1) % this.maxPattern();
而maxPattern的默认值是 4。

然后，角色行走图的显示安排在rpg_sprites.js里面，
动作编排主要是 Sprite_Character.prototype.characterPatternX
就是踏步动画单方向时的动作样式划分。
另外一个叫 Sprite_Character.prototype.characterPatternY
是改变方向后计算下一组动作样式的位置。

所以如果按照楼主原图的是3X4分布来规划12张图片的顺序的话，
那就是在Sprite_Character.prototype.characterPatternX 自动执行切换到样式 3的时候，
插入一个方向的改变。也就是this._character.setDirection(方向代码)
不过这样，她原代码 return this._character.pattern(); 就需要屏蔽掉了，
因为这个pattern是经过处理的，我们需要未经处理的pattern。
所以得提取其原来的样板，也就是 this._character._pattern。
然后，这样改后，会出现一个问题，就是原版的踏步动画变样了。
而且character本身就是一个元件式设计，所以是牵一发而动全身，所有踏步都会变。
所以，改这里的话，建议做成分支。
设定条件把原版接进来，把不同样式分支出去。
这个，就只能楼主自己调试了。
另一方面，在Sprite_Character.prototype.characterPatternX下，
直接调用this._character._pattern，有个有趣的现象。
就是行走图会一直横向显示过去。
所以，以12张图为例，
我们把this._pattern = (this._pattern + 1) % this.maxPattern() 这一段改一下：
改成：this._pattern = (this._pattern + 1) % 12;
给你看个效果：

原图：

---

作者: rexuegg123    时间: 2021-12-26 17:04

play337 发表于 2021-12-26 15:33
我用这样.... 结果还是不行...

let obj =

let obj = {……}； 这句是  为帧动画显示  函数设置参数；
你的用法中：
1、targetId:48，这句，我重来没用数字作为网页元素的参数过，一般是字符，如"mdjfn"等…………如果你认为是本次动画显示的id就错了。它表示你这次动画要放入到那个元素中播放。比如：在战斗时，你需要在敌人身上播放一次动画，那这里就填敌人这个元素的id
2、time:60,这句，这里的时间单位是毫秒，你填60，表示60/1000秒，相对于你后面整个大图有12*8的小图数量，时间太短；
3、picName:0000-check,这里表示的时大图的文件名，如："check.png",含文件格式的后缀，并且是字符串，需要加引号 " "
4、picSrc:img/characters,这句也是字符串，它表示文件大图所在文件夹，如："img/characters/", 他的值最终会与picName的值相加，组成完整的文件路径
5、 width:[576,12],  height:[768,8], 这两句，填的时小图的宽和高，你这里一张小图宽高是576*768，并且有96张，我去，你把图搞这么大做什么？

例子：
let obj={targetId:"name", time:500, picName:"nufju.png",picSrc:"img/characters/",width:[192,5], height:[192,2], top:20 ,left:30 , per:50 };

64fd96fe28b049d5a7448cd95e59fb9.png (999.67 KB, 下载次数: 22)

下载附件  保存到相册

2021-12-26 17:26 上传

---

作者: Retsu    时间: 2021-12-26 17:26
https://rpg.blue/thread-408929-1-4.html
5楼

---

作者: play337    时间: 2021-12-26 17:26


targetId:"48",  (事件ID)
time:500,
picName:"0000-check.png",
picSrc:"img/characters/",
width:[576,12], (图大大的好管理)
height:[768,8], (图大大的好管理)
top:20 ,
left:30 ,
per:50

====================
我再改了一下...

还是不行 >_<

1. let obj =
   
2. {
   
3. targetId:"48",
   
4. time:500,
   
5. picName:"0000-check.png",
   
6. picSrc:"img/characters/",
   
7. width:[576,12],
   
8. height:[768,8],
   
9. top:20 ,
   
10. left:30 ,
    
11. per:50
    
12. };
    
13. 
    
14. 
    
15. function  帧动画显示 (obj) {
    
16.     let id   = obj.targetId+'_'+obj.picName;           
    
17.     let z    = '<div id="'+id+'"><img id="'+id+'_img"></div>';
    
18.     $('#'+obj.targetId).append(z);
    
19.     let div = document.getElementById(id);
    
20.     div.style.position   = 'absolute';
    
21.     div.style.top        = obj.top+'px';
    
22.     div.style.left       = obj.left+'px';
    
23.     div.style.width      = obj.width[0]*obj.per/100+'px';
    
24.     div.style.height     = obj.height[0]*obj.per/100+'px';        
    
25.     div.style.overflow        = 'hidden';
    
26. 
    
27.     var img = document.getElementById(id+'_img');
    
28.     img.style.position   = 'absolute';
    
29.     img.style.top        = '0px';
    
30.     img.style.left       = '0px';               
    
31.     img.style.width      = obj.width[0]*obj.width[1]*obj.per/100+'px';
    
32.     img.style.height     = obj.height[0]*obj.height[1]*obj.per/100+'px';
    
33.     img.src = obj.picSrc+obj.picName;//  '/img/……/num.png'
    
34. 
    
35.     var w = obj.width[0]*obj.per/100, h = obj.height[0]*obj.per/100;
    
36.     var wt = obj.width[1], ht = obj.height[1];
    
37.     var picnum  = wt*ht;  //横向张数*纵向张数
    
38.     var pickeep = obj.time/picnum;         
    
39.     var i=2;
    
40.     function AnimateOfSkill_demo () {
    
41.         if (i<picnum) {
    
42.             img.style.top   = -(i<=wt ? 0 : (Math.ceil(i/wt)-1)) * h + 'px';
    
43.             img.style.left  = -(i-(Math.ceil(i/wt)-1) * wt-1) * w + 'px';            
    
44.             i++;
    
45.             setTimeout(function(){ AnimateOfSkill_demo () },pickeep);
    
46.         } else {div.remove()};
    
47.     };
    
48.     setTimeout(function(){ AnimateOfSkill_demo () },pickeep);
    
49. }

复制代码

---

作者: rexuegg123    时间: 2021-12-26 17:29

play337 发表于 2021-12-26 17:26
targetId:"48",  (事件ID)
time:500,
picName:"0000-check.png",

关键是targetId不是事件id,是你要在其身上显示动画的对象的id
let obj={targetId:"噗噗5",time:1600,picName:"ranshao.png",picSrc:"img/FTskill/",width:[300,8],height:[300,10],top:-130,left:-115,per:100 };
帧动画显示 (obj);

---

作者: RyanYe    时间: 2021-12-26 18:46
这个我实现过，用Galv_MoveRouteExtras插件即可
我的DEMO里就有，那个球球蹦出来的金币，里面就有相关指令，直接复制即可

---

欢迎光临 Project1 (https://rpg.blue/)

Powered by Discuz! X3.1