Project1»广场 › 技术讨论 › RPG Maker MV 讨论区 › 如何靠脚本用角色图片做一个顺畅的动画? ...

如何靠脚本用角色图片做一个顺畅的动画?

查看数: 2667 | 评论数: 9 | 收藏 0

关灯 | 提示：支持键盘翻页<-左右->

帖子模式

play337

发布时间: 2021-12-26 11:28

正文摘要:

如何靠脚本用角色图片做一个顺畅的动画? 我测试了好多次... 下转.左转.右转.上转系统一定是 1.2.3....3.2.1 你一转方向就变成 4.5.6.....6.5.4 所以如果我有12张图片... 要怎麽使用脚本...让图片顺起来呢? ...

RyanYe 发表于 2021-12-26 18:46:38

这个我实现过，用Galv_MoveRouteExtras插件即可
我的DEMO里就有，那个球球蹦出来的金币，里面就有相关指令，直接复制即可

点评

play337

这个赞! 大感谢! 发表于 2021-12-26 19:56

rexuegg123 发表于 2021-12-26 17:29:02

本帖最后由 rexuegg123 于 2021-12-26 17:45 编辑

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);

点评

play337

>_< 发表于 2021-12-26 19:36

play337 发表于 2021-12-26 17:26:45

本帖最后由 play337 于 2021-12-26 17:27 编辑

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

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

还是不行 >_<

let obj =
{
targetId:"48",
time:500,
picName:"0000-check.png",
picSrc:"img/characters/",
width:[576,12],
height:[768,8],
top:20 ,
left:30 ,
per:50
};
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);
}

复制代码

Retsu 发表于 2021-12-26 17:26:14

https://rpg.blue/thread-408929-1-4.html
5楼

点评

play337

OK 了!!!!! 大感谢!!!!!!! 发表于 2021-12-26 17:36

rexuegg123 发表于 2021-12-26 17:04:47

本帖最后由 rexuegg123 于 2021-12-26 17:28 编辑

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 16:38:03

不清楚哪些'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;
给你看个效果：

原图：

点评

play337

能给个脚本范例吗? 发表于 2021-12-26 16:47

play337 发表于 2021-12-26 15:33:46

我用这样.... 结果还是不行...

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);


}

rexuegg123 发表于 2021-12-26 14:31:55

本帖最后由 rexuegg123 于 2021-12-26 14:36 编辑

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

错误: Invalid or unexpected token 发表于 2021-12-26 15:27

play337

要怎麽使用呢? 可以有个范例吗? 因为实在不知道要怎麽用.... 发表于 2021-12-26 15:18

rexuegg123 发表于 2021-12-26 13:43:41

本帖最后由 rexuegg123 于 2021-12-26 14:09 编辑

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

点评

play337

对阿! 用脚本指定他们一个一个慢慢地拨放! 顺顺的跑... 发表于 2021-12-26 14:05

帐号		自动登录	找回密码
密码			注册会员

如何靠脚本用角色图片做一个顺畅的动画?

正文摘要:

回复

点评

点评

点评

点评

点评

点评