public

Rpg Maker Developers Group

Simple enough for a child, powerful enough for a developer

2 Followers

Canvas Picture Animation

BMM Archive · July 15, 2026

Preserved forum archive. This topic stores the original first post and locally mirrored RPG Maker Web attachments when available. It is posted by the BMMPlay archive account, not by the original creator.

Original Source

  • Original title: Canvas Picture Animation
  • Original author: Jonforum
  • Original date: December 22, 2016
  • Source thread: https://forums.rpgmakerweb.com/threads/canvas-picture-animation.72574/
  • Source forum path: Game Development Engines > RPG Maker Javascript Plugins > JS Plugin Requests

Summary

hi everybody. I need a plugin to show picture animation in a canvas. But compatible with all @Galv plugin and the Bind Pictures To Map.

Archived First Post

hi everybody.
I need a plugin to show picture animation in a canvas.


But compatible with all @Galv plugin


and the Bind Pictures To Map.


Is a paid request.
I will Paid with paypal
And plugin Free to share after paid (no license)


plugin similar as 





example .


This picture


Protected download


need to render picture animation in canvas


/monthly_2016_11/aniamtion.gif.45f61c2e11ebec28cbd3500362c706c9.gif


Need bind the picture canvas possibility


and not conflict with galv plugin ([Galv's Character Frames], [Galv's Character Animations],[Galv's Picture Animations]) 


For now i make my own plugin but without canvas. But without canvas rendering is a little laggy and i lost some fps.

// avat super top PID 900&901
//0:ID,1:'File-name',2:Frames,3:IntervalStored?,4:x,5:y,6:ScaleX,7:LastID
BigAvatar = [
[8,'H1-IDLE-',0,0,100,650,100,0],
[9,'H2-IDLE-',0,0,220,765,100,0]
];


// BigAvatar[0] = H1, BigAvatar[1] = H2
function SetupBigAvatars(WhatToDo,WhatAvatar,Value) {
// renitialise le avatar selectionné ou le crée
if (WhatToDo == 'Reset') {
BigAvatar[WhatAvatar][0] = (WhatAvatar+8); // renitialise au id de base du jeux (AVATAR1= 8, avatar2 = 9)
BigAvatar[WhatAvatar][1] = 'H'+ (WhatAvatar+1) + '-IDLE-' ; // renitialise le file name
BigAvatar[WhatAvatar][2] = 0 ; // renitialise le frames actuel
}
else if (WhatToDo == 'ChangeID') {
BigAvatar[WhatAvatar][7] = BigAvatar[WhatAvatar][0]; // save the oldValurID
return Value;
}
else if (WhatToDo == 'SHOW') {
// initialise et affiche horsframe les avatar
$gameScreen.showPicture(BigAvatar[WhatAvatar][0], 'H'+ (WhatAvatar+1) +'-IDLE-0', 1, -250, 650, 100, 100, 255, 0);
$gameScreen.setPictureCallCommon(BigAvatar[WhatAvatar][0], 2, 1); //Call picture click
}
}



// Call pour animéles avatar en IDLE
function AnimationBigAvatars(WhatAvatar) {
// animation sur le Avatar sois 0 ou 1
if (WhatAvatar==0) { // animé le avatar 0 (AvtarH1)
BigAvatar[0][3] = setInterval(function() {
if (BigAvatar[0][2]>12) {BigAvatar[0][2]=0;} // reset si superieur au frames 12
$gameScreen.showPicture(BigAvatar[0][0], BigAvatar[0][1]+BigAvatar[0][2], 1, BigAvatar[0][4], BigAvatar[0][5], BigAvatar[0][6], 100, 255, 0);
BigAvatar[0][2]++;
}, 58);
}
else if (WhatAvatar==1) { // animé le avatar 1 (AvtarH2)
BigAvatar[1][3] = setInterval(function() {
if (BigAvatar[1][2]>12) {BigAvatar[1][2]=0;} // reset si superieur au frames 12
$gameScreen.showPicture(BigAvatar[1][0], BigAvatar[1][1]+BigAvatar[1][2], 1, BigAvatar[1][4], BigAvatar[1][5], BigAvatar[0][6], 100, 255, 0);
BigAvatar[1][2]++;
}, 58);
};
}


// Call Pour le Move des Avatars
function MoveBigAvatars(WhatAvatar,ax,ay,Time,ScalX) {
//clear animation actuel, avant de bougé
clearInterval(BigAvatar[WhatAvatar][3]);
BigAvatar[WhatAvatar][2]=12; // reset frames 0
//Check si lavatar a bougé existe, sinon faut le créer ( antibug Bougé un avatar exist pas)
//if (!($gameScreen.picture(BigAvatar[WhatAvatar][0]))) {$gameScreen.showPicture(BigAvatar[WhatAvatar][0], 'H'+ (WhatAvatar+1) +'-IDLE-talking-happy-10', 1, -250, 650, 100, 100, 255, 0)}
// affiche picture bour le move ( utilise temporairement les animation talk, on va devoir créer les animation -move-)
$gameScreen.showPicture(BigAvatar[WhatAvatar][0], 'H'+ (WhatAvatar+1) +'-IDLE-talking-happy-'+BigAvatar[WhatAvatar][2], 1, BigAvatar[WhatAvatar][4], BigAvatar[WhatAvatar][5], BigAvatar[WhatAvatar][6], 100, 255, 0);
if (BigAvatar[WhatAvatar][7]>0) { // If > 0 , veut dire que pas effacéancien image fantome.
$gameScreen.erasePicture(BigAvatar[WhatAvatar][7]); // efface image fantome
BigAvatar[WhatAvatar][7]=0;
}
//Bouge vers la bonne endroit Selement si defeni (null = pas bougé axe)
if (ax !== null) {BigAvatar[WhatAvatar][4] = ax;}
if (ay !== null) {BigAvatar[WhatAvatar][5] = ay;}
BigAvatar[WhatAvatar][6] = ScalX;
new IAVRA.ANIMATE.Tween($gameScreen.picture(BigAvatar[WhatAvatar][0]), { _x: BigAvatar[WhatAvatar][4],_y: BigAvatar[WhatAvatar][5] ,_scaleX:BigAvatar[WhatAvatar][6] }).easing(IAVRA.EASING.quart.out).duration(Time).start();
BigAvatar[WhatAvatar][3] = setTimeout(function(){ AnimationBigAvatars(WhatAvatar); }, (Time/60)*1000); //reprend animation auto apret deplacement
}

//0:ID,1:'File-name',2:Frames,3:IntervalStored?,4:x,5:y,6:ScaleX
//Choix des TalkType = 'happy-', 'hangry-', 'confu-'
function TalkBigAvatars(WhatAvatar,TalkType,Time) {
if (WhatAvatar == 0) { //Avatar1
BigAvatar[WhatAvatar][1] = 'H1-IDLE-talking-' + TalkType;
var AH1 = setTimeout(function(){ BigAvatar[WhatAvatar][1] = 'H1-IDLE-'; }, (Time/60)*1000);
}
else if (WhatAvatar == 1) {
BigAvatar[WhatAvatar][1] = 'H2-IDLE-talking-' + TalkType;
var AH2 = setTimeout(function(){ BigAvatar[WhatAvatar][1] = 'H2-IDLE-'; }, (Time/60)*1000);
}
}





i use setInterval to make $gameScreen.showPicture.
But this are not the good way for rendering animation,i read this topic.


https://www.html5rocks.com/en/tutorials/canvas/performance/


so i need a canvas render.

Tank you i lot 


Bids your prices please in (CAD,USD,EUR or RU

Downloads / Referenced Files

Log in to download

Log in, then follow the RPG Maker Developers Group to see these download links.

Log in to download

License / Terms Note

And plugin Free to share after paid (no license) plugin similar as  example . This picture

Referenced Images / Attachments

H1_animated_13_4.jpg
H1_animated_13_4.jpg
Creator Claims / Removal

If you are the original creator and want this listing reassigned, edited, or removed, join BMMPlay and contact the moderators with proof that matches the original RPG Maker Web profile, linked GitHub, itch.io page, or another public creator identity.

#rpg-maker-archive#js-requests

Replies (0)

No replies yet.

0 replies 1 view

Log in to reply.

User Avatar