设为首页收藏本站|繁體中文

开启辅助访问

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

发新帖

查看: 2678|回复: 16

上一主题

下一主题

[有事请教] 如何靠脚本用角色图片做一个顺畅的动画?


12 星屑	回复本帖可获得 4 星屑奖励! 每人限 1 次

梦石: 0
星屑: 7667
在线时间: 1437 小时
注册时间: 2018-12-16
帖子: 2026

发消息

电梯直达

跳转到指定楼层

1楼

发表于 2021-12-26 11:28:15 | 只看该作者 |只看大图回帖奖励

回帖奖励

|倒序浏览 |阅读模式

加入我们，或者，欢迎回来。

您需要登录才可以下载或查看，没有帐号？注册会员

x

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

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

系统一定是 1.2.3....3.2.1

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

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

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

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

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

收藏0 分享

回复

使用道具举报

梦石: 0
星屑: 7089
在线时间: 722 小时
注册时间: 2021-3-5
帖子: 821

发消息

来自 10楼

发表于 2021-12-26 18:46:38 | 只看该作者

回帖奖励 +4 星屑

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

点评

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

【实时战斗ARPG插件】AABS中文版

回复支持反对

使用道具举报

梦石: 0
星屑: 2346
在线时间: 168 小时
注册时间: 2017-4-25
帖子: 219

发消息

2楼

发表于 2021-12-26 13:43:41 | 只看该作者

回帖奖励 +4 星屑

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

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

点评

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

回复支持反对

使用道具举报

梦石: 0
星屑: 2346
在线时间: 168 小时
注册时间: 2017-4-25
帖子: 219

发消息

3楼

发表于 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);


}

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

点评

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

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

回复支持反对

使用道具举报

梦石: 0
星屑: 7667
在线时间: 1437 小时
注册时间: 2018-12-16
帖子: 2026

发消息

4楼

楼主| 发表于 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);


}

回复支持反对

使用道具举报

在野月光族

梦石: 0
星屑: 3053
在线时间: 318 小时
注册时间: 2015-4-30
帖子: 92

发消息

5楼

发表于 2021-12-26 16:38:03 | 只看该作者

回帖奖励 +4 星屑

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

原图：

点评

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

回复支持反对

使用道具举报

梦石: 0
星屑: 2346
在线时间: 168 小时
注册时间: 2017-4-25
帖子: 219

发消息

6楼

发表于 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, 下载次数: 29)

回复支持反对

使用道具举报

梦石: 0
星屑: 3136
在线时间: 1444 小时
注册时间: 2019-11-28
帖子: 160

发消息

7楼

发表于 2021-12-26 17:26:14 | 只看该作者

回帖奖励 +4 星屑

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

点评

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

回复支持反对

使用道具举报

梦石: 0
星屑: 7667
在线时间: 1437 小时
注册时间: 2018-12-16
帖子: 2026

发消息

8楼

楼主| 发表于 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);
}

复制代码

回复支持反对

使用道具举报

梦石: 0
星屑: 2346
在线时间: 168 小时
注册时间: 2017-4-25
帖子: 219

发消息

9楼

发表于 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);

点评

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

回复支持反对

使用道具举报

发新帖

站长信箱：[email protected]|手机版|小黑屋|无图版|Project1游戏制作

GMT+8, 2024-11-18 11:33

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表