Project: Framedisplay for [U] version

[MCG]

Nothing in javascript is ever guaranteed, and that's especially true for timers. They'll fire when they'll fire. Also, you aren't pre-loading the frame images, so loading times could mess/are messing with the timing, too. Load times with local files shouldn't be an issue, but you never know. A good thing to do is to keep tract of your deltas between frames (really, between your setInterval fires), and then use that value to frame skip or wait if necessary. Here is like a really basic guide with some code snippets. Not the best solution, but that's what you give up for having frame control and running in any web browser. As a fall back, you could just have a GIF/aPNG that ran at the proper 60 fps for the 1x speed, and transition to the animated jpgs when people want to use the controls/change speed etc. (btw, can you set FPS in gifs? I don't really know. Maybe that's why the speed looks off for Sangoku)

Anyways, this looks like a good start! I've been wanting to write up something like this for a while (to learn how to use canvas to animate, play around with timers, etc.) but I've been really busy at work so I never got around to it. For the transparency, you could probably just use css opacity on the hitbox image and let the client handle the mixing between the non-hitbox and hitbox images. This assumes that characters are positioned in the exact same spot on the two images, though.

Thanks. I'll look this up. I think the biggest disadvantage is going to be performance.

I did some tests for transparency and it's working but it's even more sluggish at higher speed. x0.25 and x0.33 it's decent. I'll tweak it a bit and have normal mode, hitbox mode and both modes.

 

[Sangoku]

I will most likely do Falcon myself, but if I decide not to, I'll let you guys know. I've only written down attack duration for Yoshi, Fox, and Falcon. I will double check on the frame count before I post it, because I used a different method back then.

Lol I'm a bit surprised at the change of pace here xD. Tbh I wasn't sure if this project would ever be completed. I will take a look at kirby's down B. So what I will do today is some frame counting and double checking what I've already written down. If things go well, then I will be able to record Falcon this week.

Edit: Decided to finish pikachu's framecount for you. It took me ~35 mins (would have been much less if I wasn't carefully checking things). One thing I couldn't do was Up B, which fortunately you already did. I got different numbers than you for a few things though. Feel free to double check.
[collapse=Pikachu Frame Count]

down b            = 106 (shield came out at 107)
f roll            = 35
b roll            = 31
forward throw    = 29
back throw        = 42
edge recovery (f) = 34
edge recovery (s) = 69
edge attack (f)  = 49
edge attack (s)  = 89
edge roll (f)    = 49
edge roll (s)    = 99
get up            = 30
get up attack    = 49
get up roll      = 35
ducking          = 3

[/collapse]

Thanks for the pika data, I will double check the different values.

I'll put your name for Falcon, if you change your mind let me know and I'll do it. The change of pace for me is due to the resolution of my initial problems (ie figuring out how to rename multiple files and using autohotkey). This was a pain in the ass, but I forced myself to do it and now I think what remains shouldn't be demotivating.

Edit: rechecked and refound my results. I'm not sure how you found these values, can you recheck?

 

[MCG]

Html and javascript updated, you can now choose 3 display modes. Speed is still a problem.

 

[Madao]

The change of pace for me is due to the resolution of my initial problems (ie figuring out how to rename multiple files and using autohotkey). This was a pain in the ***, but I forced myself to do it and now I think what remains shouldn't be demotivating.

Makes sense. I would have never bothered if I had to manually screenshot then manually rename the pictures LOL.

Edit: rechecked and refound my results. I'm not sure how you found these values, can you recheck?

Well I just realised that for down B, it probably depends where you are because you have to wait for the thunder to hit you. I tested it on the ground and not the top platform so that's probably why I got 106 instead of 102. For rolling, the shield came out on frame 32 for b roll, and frame 36 for f roll. I guess I will do more testing. What I do is I hold shield during the attack, so that there isn't input delay for shield (so it comes out the next frame after the move ended).

 

[Sangoku]

Totally makes sense for down B, but since I'll do it on the top platform, I'll keep my value. Concerning roll, my shield comes out on frame 38 for froll and I also hold it during the attack... Can you retry quickly?

 

[Madao]

Totally makes sense for down B, but since I'll do it on the top platform, I'll keep my value. Concerning roll, my shield comes out on frame 38 for froll and I also hold it during the attack... Can you retry quickly?

Can you tell me your positioning and method for the rolls? I tried it on both the platform and the ground. My only guess is that there's a difference in our method. I hold down shield before I pause, then when I'm ready I press the direction to roll.

 

[Sangoku]

Can you tell me your positioning and method for the rolls? I tried it on both the platform and the ground. My only guess is that there's a difference in our method. I hold down shield before I pause, then when I'm ready I press the direction to roll.

I go on the top platform, roll to the right (to have space). Then I pause, input z and left at the same time, and he rolls............. AHHHHH I get it there's one frame lost by the shield coming out. Which one should we use then? I don't really mind.

 

[mixa]

for down B, it probably depends where you are because you have to wait for the thunder to hit you.

wow, this is really cool. never thought about it. I took a pic of three different heights for fun: thunder x3

How do you roll without showing the shield... ? Ok nevermind, watching Madao's Fox, he skipped the shield frame.

Which one should we use then?

I like the one with shield because it shows you have to shield before rolling (right?) But it's not a big deal.

 

[Madao]

wow, this is really cool. never thought about it. I took a pic of three different heights for fun: thunder x3

How do you roll without showing the shield... ?

Lol nice picture. I just started recording during the first frame of the actual roll so I skip the shielding process.

I go on the top platform, roll to the right (to have space). Then I pause, input z and left at the same time, and he rolls............. AHHHHH I get it there's one frame lost by the shield coming out. Which one should we use then? I don't really mind.

I figured, after I went back and tried pressing Z and left at the same time, the frame count was a bit higher. It's hard to say which one we should use because there are situations where you might want to shield for a while and then roll, and situations where you want to roll as soon as possible.

 

[EggSelent]

Html and javascript updated, you can now choose 3 display modes. Speed is still a problem.

Looks like you've made some progress. Lemme give you a few tips:

If you give your elements unique IDs, say

<input type="text" id="frameJump">

then you can access the DOM element using

document.getElementById("frameJump")

rather than some atrocity like

document.getElementsByTagName("input")[4]

Also, I see you have a line like:

  window.frameTimer = setInterval(function(){nextFrame()}, frameSpeed);

If you use setTimeout() it might be better. Define a var like currentTime. Then at the top of your method, try something like:

currentTime = new Date().getTime();
 
// some method body goes here
 
updatedTime = new Date().getTime();
timeDiff = updatedTime - currentTime;
setTimeout(function(){nextFrame();}, timeDiff >= frameSpeed ? 1 : frameSpeed - timeDiff);

You can also load all the images as soon as the page loads. There are several ways to do this, but the easiest might be able to create a method that loads all the images and bind it to the body onLoad() event.

var demImages = new Array();
 
// load them progmatically unless you want to waste a lot of time.
 
demImages[0] = new Image();
demImages[0].src = "yoshi_a2a_" + someIndex + ".jpg";
demImages[0].id = "yoshi_a2a_" + someIndex;
demImages[0].style.visibility = "hidden";
demImages[0].style.display = "none";

Then when you want to swapping, you can just do something like

document.getElementById("yoshi_a2a_" + curFrame + ".jpg").display = "none";
document.getElementById("yoshi_a2a_" + curFrame + ".jpg").visibility = "hidden"'
document.getElementById("yoshi_a2a_" + nextFrame + ".jpg").display = "block";
document.getElementById("yoshi_a2a_" + nextFrame + ".jpg").visibility = "visible";

Of course you might need to set these demImage images to be nodes contained within some wrapper div, but that's easy.

 

[Sangoku]

Lol nice picture. I just started recording during the first frame of the actual roll so I skip the shielding process.


I figured, after I went back and tried pressing Z and left at the same time, the frame count was a bit higher. It's hard to say which one we should use because there are situations where you might want to shield for a while and then roll, and situations where you want to roll as soon as possible.

I think we should use the shield+left at the same time one, because it's more important to show the fastest roll you can get from a neutral position. So if nobody objects, that's the one I will record.

Stuff

That's intimidating lol. But thanks for helping others!

Edit: I did Pikachu to the same point I did Yoshi (I know, it would have been smarter to finish Yoshi >_>). Here's the link. Again, comments and criticism are welcome.

 

[Madao]

Lol I'm curious what EggSelent wrote.

Anyway, it's fine which ever way you decide to record rolls. I guess I could redo fox's rolls. For now, I'm going to continue testing things and learn more about the camera zoom. Would you like me to finish the frame counting for Kirby?

Edit: LOL this camera zoom stuff is fun to mess with. I was able to freeze the camera so that it doesn't move when you move.

 

[Sangoku]

Lol I'm curious what EggSelent wrote.

Anyway, it's fine which ever way you decide to record rolls. I guess I could redo fox's rolls. For now, I'm going to continue testing things and learn more about the camera zoom. Would you like me to finish the frame counting for Kirby?

Edit: LOL this camera zoom stuff is fun to mess with. I was able to freeze the camera so that it doesn't move when you move.

Sure, if you could finish the frame counting for Kirby that would help me greatly. Maybe we could split it that way? I would do every char the way I did Pikachu and Kirby and you would complete it? Or does it sound unfair for you? In fact, I believe the moves I chose to check are easier to count, that's why I did them first, but if you think they're all equal, then it could be good splitting that way.



By the way, I editted the above post, so don't forget to check out pika!

 

[Madao]

Sure, if you could finish the frame counting for Kirby that would help me greatly. Maybe we could split it that way? I would do every char the way I did Pikachu and Kirby and you would complete it? Or does it sound unfair for you? In fact, I believe the moves I chose to check are easier to count, that's why I did them first, but if you think they're all equal, then it could be good splitting that way.
By the way, I editted the above post, so don't forget to check out pika!

Ok I will finish Kirby's frame count. They are all easy for me except for strange attacks like Pika's Up B. I'm fine with splitting the frame counting work, just be sure to do things like rolls yourself because I might forget to do it your way lol. I'm downloading your pika file right now.

 

[Sangoku]

Okay, so I'll do the rest the same way I did for Kirby and Pika and I'll let you finish it . Next ones are DK and Link. Won't be before tomorrow afternoon though.

Edit: Ah just realised I missed pika's dash attack. Never mind, tomorrow...

 

[Madao]

I skipped forward throw because I don't know where you want to position yourself, and also determining the frame count is tough because most of the time, you land right when you're free to move (so you are stuck in the landing phase for a few frames), unless you move to the side and the ground / platform is no longer under you.
[collapse=Kirby Frame Count]

back throw = 49
edge recovery (f) = 36
edge recovery (s) = 71
edge attack (f) = 56
edge attack (s) = 94
edge roll (f) = 46
edge roll (s) = 99
get up = 30
get up attack = 49
get up roll = 35
ducking = 7

[/collapse]
Just to clarify for throws, I grab them first, then I record the start of the throw.

 

[Sangoku]

Added frame count of DK and Link.

Edit: added Jigglypuff and Mario.

Edit2: And completely finished Yoshi!

 

[mixa]

You've done Yoshi! Good stuff. Two weeks ago all this was so far away.

I was gonna do the frame count for other characters, but it seems like the only one left is Luigi, and I'm not getting anywhere near that. So, I could measure the rest that's missing. Knowing that Madao was gonna do that, I'd wanna get in sync with him before doing anything.



Yoshi - parry


Fox - shine cancel (no hitlag)

detailed frame data for the shine cancel (no hitlag)​

note: I only used the renamer, no hotkey yet. I'm going slowly.


Samus - frame count

detailed frame data for Samus' charge cancel​

I wanted this to have more stuff than the jp version, so I plan to eventually record tech-roll, tech-in-place, being hit against Peach's wedges, and other character specific stuff.
But first I'll need to test each character to see if they all behave the same, then I'll just pick one character to show how tech-roll works, for example.

 

[Sangoku]

Thanks for Samus' frame count!

I've finished Kirby today (instead of finishing Pikachu, I know)!

Hmm you shouldn't try to record without using autohotkeys. Even if you feel like alternating between frame advance and F12, you might make a mistake counting in your head lol.

 

[mixa]

Hmm you shouldn't try to record without using autohotkeys. Even if you feel like alternating between frame advance and F12, you might make a mistake counting in your head lol.

But I don't count in my head.
For parry and charge cancel, I measured the frames normally and the keystroke counted for me as I took pics, when it hit 18, I stopped. For the shine cancel (8 frames) I did count in my head (1 - 8) and then looked at the folder which had 8 pics, then just to be sure I ctrl + A'd the folder and it had 8 itens selected. (jk I didn't do that last one)

It's not a fast method, and I won't use to record Samus, and probably won't use ever again when I learn the autohotkeys, but it's easier to mess up the frame counting than this process. Which I hope I didn't.

The only thing is if I'd mess up the alternation between F12 and frame adv.
But that would show in either a lack or excess of pictures. And it's not like I'm churning out moves, I did 3 short ones.

edit: oh, you finished recording Kirby, somehow I thought it was counting. This is going fast.

 

[Madao]

If I were to pick 2 characters to do frame counting for, which ones would you like me to frame count? I know I haven't submitted Falcon or Fox frame count yet, but I'll do 2 others first, since I'm already taking care of Fox and Falcon. If I finish my studying on time, then I will finish Fox (I need to redo a few), and Falcon this weekend.

Also, Sangoku is right that you shouldn't record without using Auto Hotkey. I would not have bothered with any of this, if it weren't for AHK. Not only does it take longer, but it's more boring and more error prone. Trust me, you get used to AHK pretty fast. I was even able to make the printscreen method pretty fast if I ever wanted to make high quality gif's or jpeg images.

 

[B Link]

Unsurprisingly, these seem to match up to the frame counts for the J version on THIS SITE: https://sites.google.com/site/hokkaind64/aisyou

But good job adding stuff not included in the above link, like getup attacks

 

[mixa]

So I did Samus. 300 MB, though.
I was uploading to mediafire, then the site went down at 92%, my upload rate is so bad I almost called it a day.

And I was surprised that renaming the files took so long.

 

[Sangoku]

If I were to pick 2 characters to do frame counting for, which ones would you like me to frame count?

If you could complete the ones I did that would be enough for me.

Unsurprisingly, these seem to match up to the frame counts for the J version on THIS SITE: https://sites.google.com/site/hokkaind64/aisyou

But good job adding stuff not included in the above link, like getup attacks

I use the Japanese info to have a rough idea beforehand and yeah they are almost all the same.

So I did Samus. 300 MB, though.
I was uploading to mediafire, then the site went down at 92%, my upload rate is so bad I almost called it a day.

And I was surprised that renaming the files took so long.

How many kb per image? And what part of renaming took long? You mean the renaming process itself? Or the setup? What I do is take screenshots, rename the elements in the screenshot folder, then move the screenshots in the FD folder.

 

[mixa]

How many kb per image?

Not sure which numbers I should use to do the math, there are 4, but it all gets divided by 3966, so 76-82 kb per image.
And with that I realized there's a move missing in the state file, the move is in the folder but it won't show up in the program. (Neutral B full)
Just overwrite the state file with this:

Spoiler

Jab 1,jab 1
Jab 2,jab 2
Dash Attack,dash attack
U-tilt,tilt u
F-tilt,tilt f
F-tilt (angled up),tilt f-u
F-tilt (angled down),tilt f-d
D-tilt,tilt d
U-smash,smash u
F-smash,smash f
F-smash (angled up),smash f-u
F-smash (angled down),smash f-d
D-smash,smash d
N-air,air n
F-air,air f
B-air,air b
U-air,air u
D-air,air d
Grab,grab
F-throw,throw f
B-throw,throw b
Neutral B,b release small
Neutral B full,b release full
Up B (air),b up (air)
Up B (ground),b up (ground)
Down B,b down
B charge,b charge
Forward roll,roll f
Back roll,roll b
Edge recovery (fast),edge recov fast
Edge recovery (slow),edge recov slow
Edge attack (fast),edge atk fast
Edge attack (slow),edge atk slow
Edge roll (fast),edge roll fast
Edge roll (slow),edge roll slow
Get up,get up
Get up attack,get up atk
Get up roll,get up roll
Ducking,duck
B Cancel,b cancel

Adding the data file to each folder with the correct number took a while, renaming in general took a while, too.
If you renamed from the screenshot folder, did you record - rename - record - rename? I recorded everything first thinking it would be better to do the renaming process all at once, but then made the mistake of putting together the 1b, 2b files with the 1, 2 files.

Also, has anyone gotten Ness already? I'll finish his counting and then start recording. I'll try the Fraps method, too.

 

[Sangoku]

Oh so your size corresponds to mine roughly. But in all, I only have 230 mb, weird. Yeah I record with "k" (using hotkeys), then I rename with "d", then I manually ctrl+a in the folder and drag to the FD folder. The renaming phase doesn't take long at all that way. And yeah, the data.txt is such a pain in the ass lol. I'll edit OP with what you added.

And I believe Ness is all yours.

 

[mixa]

Hold back, you rename with "d"? What's that all about, did you make a script for renaming?

 

[Sangoku]

Hold back, you rename with "d"? What's that all about, did you make a script for renaming?

Yeah I made a script that:
-clicks on the bulk rename utility window
-clicks on F5 to refresh the name list
-clicks on actions, then select all
-clicks on rename

You have to mess around with mouse coordinates but it's easy to make tests (one step after another). Just keep in mind that the first coordinate is relative to the active window (ie mupen), then the rest shouldn't change between sessions. And I manually enter the renaming rules, but that's not long and I don't change it everytime (obviously).

 

[Madao]

For AHK, you can use global coordinates if you wish. I like to use Global sometimes because if your script deals with multiple windows, then it's faster to click on windows rather than using winactivate.

You just write CoordMode, Mouse, Screen if you want to set the coordinates to global. One flaw is that the autoscript writer doesn't record the global coordinates.

What do you guys write in your data.txt file anyway (aside from the frame count)? Also a reminder for anyone who wants to screencap with fraps, start 1 frame early because when it's paused, it cannot screenshot and when you unpause, it screencaps the next frame.

I'll try to do some frame counting either today or tomorrow.

 

[mixa]

I finished counting ness, mario, link, and jigglypuff - link

 

[Sangoku]

Madao: well since my relative settings work, I don't need to change, but thanks, it's always good to know.

Things are going along nicely, now we have most character's frame count.

Who wants to record which char now? I will finish pikachu and I'll record Jigglypuff.

Edit: just downloaded Samus. Can I reupload the Samus folder with the correct state.txt? Or do you prefer doing it yourself? Also, wtf with Edge rolls, Samus' legs stay at the ledge during the animation O_o. Backroll folder is named wrong by the way (remove the "------").

 

[mixa]

Madao: well since my relative settings work, I don't need to change, but thanks, it's always good to know.

Things are going along nicely, now we have most character's frame count.

Who wants to record which char now? I will finish pikachu and I'll record Jigglypuff.

Edit: just downloaded Samus. Can I reupload the Samus folder with the correct state.txt? Or do you prefer doing it yourself? Also, wtf with Edge rolls, Samus' legs stay at the ledge during the animation O_o. Backroll folder is named wrong by the way (remove the "------").

Oh, I didn't know that "-----" went through. I thought I had fixed it before uploading it. I'm really bad at revising my stuff.

It would be great if you could reupload it with the correct state.txt, thanks!

Yeah, Samus is so alien huh, leaving so much behind that way, she'd eventually run out of herself.
Her jumps/edge get ups are pretty weird too. She randomly moves from X = 2313 (position from get up) or 2313.331... (position from b-roll) to 2318 by just jumping, (X = 2318 enables you to be on stage, jump vertically, and fall on the ledge)

Who wants to record which char now?

Attribute Ness to me. I'll use Fraps this time.

 

[Sangoku]

Reuploaded Samus.

Finished Pikachu!

Attributed you to Ness.

With my CPU it takes a few seconds to compress the files maximally. With my upload speed it takes like a minute to upload a whole character.

 

[MCG]

Spoiler

Looks like you've made some progress. Lemme give you a few tips:

If you give your elements unique IDs, say

<input type="text" id="frameJump">

then you can access the DOM element using

document.getElementById("frameJump")

rather than some atrocity like

document.getElementsByTagName("input")[4]

Also, I see you have a line like:

  window.frameTimer = setInterval(function(){nextFrame()}, frameSpeed);

If you use setTimeout() it might be better. Define a var like currentTime. Then at the top of your method, try something like:

currentTime = new Date().getTime();
 
// some method body goes here
 
updatedTime = new Date().getTime();
timeDiff = updatedTime - currentTime;
setTimeout(function(){nextFrame();}, timeDiff >= frameSpeed ? 1 : frameSpeed - timeDiff);

You can also load all the images as soon as the page loads. There are several ways to do this, but the easiest might be able to create a method that loads all the images and bind it to the body onLoad() event.

var demImages = new Array();
 
// load them progmatically unless you want to waste a lot of time.
 
demImages[0] = new Image();
demImages[0].src = "yoshi_a2a_" + someIndex + ".jpg";
demImages[0].id = "yoshi_a2a_" + someIndex;
demImages[0].style.visibility = "hidden";
demImages[0].style.display = "none";

Then when you want to swapping, you can just do something like

document.getElementById("yoshi_a2a_" + curFrame + ".jpg").display = "none";
document.getElementById("yoshi_a2a_" + curFrame + ".jpg").visibility = "hidden"'
document.getElementById("yoshi_a2a_" + nextFrame + ".jpg").display = "block";
document.getElementById("yoshi_a2a_" + nextFrame + ".jpg").visibility = "visible";

Of course you might need to set these demImage images to be nodes contained within some wrapper div, but that's easy.

Thanks for the comments, I appreciate it.

Your suggestion to use setTimeout() made me reconsider the the approach. When I first used it, I realised how inaccurate it really is. I performed some benchmarks on an empty page that does nothing except printing the time difference between two setTimeout(). It was tested with both Firefox and Chrome for 17ms, 33 ms, 50 ms, 100 ms.

Browser |Time step      |Average between loops  |Standard deviation (between mesures)
-------------------------------------------------------------------------------------
Firefox |17             |24                     |29*             
Chrome  |17             |28                     |9
-------------------------------------------------------------------------------------
Firefox |33             |27                     |39*
Chrome  |33             |34                     |1
-------------------------------------------------------------------------------------
Firefox |50             |52.0                   |0.6
Chrome  |50             |51.0                   |0.6
-------------------------------------------------------------------------------------
Firefox |100            |104                    |9
Chrome  |100            |101                    |1
 
*Somehow, the difference of time calculated with Firefox spiked to ~300ms for the first mesure, so the standard deviation is higher.

If you had to perform extra like changing images or setting the visibility of an object on and off, it would be even less accurate at low ms per frame (high frame per second ). By the way, I tried your suggested method to load all the images at once and it's an slight improvement. Since both browsers are relatively accurate at 50 ms per frame (1/3rd of the actual speed), I think this will be the maximum usable speed. However, I don't think that keeping track of the delta between frames is a good approach. There is in inherent flaw with using javascript at this faster speed. You also have to take into consideration that if you have to execute functions between each iteration, the accuracy decreases.

Based on this conclusion, I looked into using gifs to display normal speed and javascript to gain a greater control on the displayed frames. From what I gathered, the maximum speed you can have between frames is 2cs (20ms). I used Yoshi's upsmash and blended both the hitbox mode and the normal mode. This is the result : http://i.imgur.com/Q7PATUu.gif. Sizewise, it's not so bad either. For example, that move has 47 frames. The 47 .jpg pictures together are ~3000ko and the gif is ~600ko, ~20%. I can also make the gif slower. This one is at 5 cs (50 ms, 1/3rd of the actual speed) per frame.

Unless I miss something, I feel this method is more viable than setTimeout() or setInterval() but I'd still like to have the control for each frame in javascript.

 

[Doomolish]

I'll wait patiently for the Fox' ones :D

 

[Sangoku]

^I'd do it if Madao didn't do it already. But if he could upload it =P.

Here's Jigglypuff!

 

[Madao]

I'm going to finish Fox today. If I'm not too bored, I'll also finish Falcon today.

 

[Sangoku]

Okay, I hope you can finish them as they are probably the ones people want to see the most lol (especially Fox).

In other news, finished Donkey Kong. That fat ***** is 375 mb though. Strange.

 

[Timotheus]

So I did Samus. 300 MB, though.
I was uploading to mediafire, then the site went down at 92%, my upload rate is so bad I almost called it a day.

And I was surprised that renaming the files took so long.

can you add a fully charged shot please?

oh and how is it possible to change character names? is it a hack? i can't find the textfile for this

 

[Sangoku]

^Either read mixa's post or download the Samus folder I re-uploaded to correct the two mistakes.

Concerning characters names, I would like to know as well.