PDA

View Full Version : Animating on keydown



jundo12
10-10-2014, 05:45 AM
I would like to animate between 2 png images when the W button is pressed on the keyboard and when W button is released, the animation stops and starts again when the W button is pressed again, etc. here's the thing i'm trying to animate *the figure in the scene
http://thelivingmoon.com/undomiel/game/homes/

jundo12
10-10-2014, 10:54 AM
to clarify: press w and hold it down, and as long as it is held down, the character animates between two png images. it doesn't otherwise have to be animated. like it doesn't have to animate left or right movement or forward movement, it just has to animate between 2 pngs in a loop, as long as the w button is held down. the effect should be that it looks like it's walking from behind, in 3rd person perspective.

jscheuer1
10-10-2014, 11:30 AM
Well, a certain portion of that would depend upon what the other image is. If you can supply it, I can more easily show you how to animate it. But the basics of what you ask are pretty simple (using jQuery because it's already on the page). First give the image a unique id:


<img id="venusimage" src="venusfback.png">

Use this code (place it after the other scripts in the head of the page):


<script type="text/javascript">
jQuery(function($){
var wtimer, wstate = false, wisdown,
venusim1 = 'venusfback.png',
venusim2 = 'venusfbackmoving.png';
$(new Image()).attr('src', venusim2);
function changevenusimage(){
var venus = $('#venusimage')
if((wstate = !wstate)){
venus.attr('src', venusim2);
} else {
venus.attr('src', venusim1);
}
wtimer = setTimeout(function(){changevenusimage();}, 500);
}
$(document).on('keydown keyup', function(e){
if(String.fromCharCode(e.keyCode).toUpperCase() !== 'W'){return;}
if(e.type === 'keyup'){clearTimeout(wtimer); wisdown = wstate = false; $('#venusimage').attr('src', venusim1); return;}
if(!wisdown){changevenusimage(); wisdown = true;}
});
});
</script>

Notice the two venusim vars highlighted. Set the first as the current (beginning) image, and the second one to the other image you will be using.

Any questions or other issues, feel free to ask, but please provide the other image to make it easier for me to see it in action.

jundo12
10-10-2014, 11:48 AM
thanks! i don't have the other image made for the animation yet. it's not entirely clear if 2 will be enough, but i'm hoping it is because that's already a pretty big image to animate. i'm guessing it'll need 3.

1) the starting image,
2) with left arm swung forward, right arm swung back, right shoulder up, left shoulder down and head leaning left,
3) right arm swung forward, left arm swung back, left shoulder up, right shoulder down and head leaning right.

erm, theoretically. lol but would be nice if i could get away with only using 2. but 3 seems the more natural state. resting, active, active, etc

does that mean we need one more image reference in the script? and do i need to give the other images IDs as well?

jundo12
10-10-2014, 12:12 PM
lol oh boy. it works! but i think it needs an animation doctor lol

http://thelivingmoon.com/undomiel/game/homes/

one more frame between those two positions might do the trick. that is funny, though. snappy! :D

jundo12
10-10-2014, 12:24 PM
k the images are (so far lol).

http://thelivingmoon.com/undomiel/game/homes/venusfback.png
http://thelivingmoon.com/undomiel/game/homes/venusfbackmoving1.png
http://thelivingmoon.com/undomiel/game/homes/venusfbackmoving2.png

only her upper torso is being animated cause the rest is below the window frame

jscheuer1
10-10-2014, 01:33 PM
You can now have as many images as you like:


<script type="text/javascript">
jQuery(function($){
var wtimer, wstate = 0, wisdown,
venusim = ['venusfback.png',
'venusfbackmoving1.png',
'venusfbackmoving2.png'],
$venus = $('#venusimage');
$.each(venusim, function(i, im){
i && $(new Image()).attr('src', im);
});
function changevenusimage(){
$venus.attr('src', venusim[(++wstate) % venusim.length]);
wtimer = setTimeout(function(){changevenusimage();}, 500);
}
$(document).on('keydown keyup', function(e){
if(String.fromCharCode(e.keyCode).toUpperCase() !== 'W'){return;}
if(e.type === 'keyup'){clearTimeout(wtimer); wisdown = wstate = 0; $venus.attr('src', venusim[0]); return;}
if(!wisdown){changevenusimage(); wisdown = true;}
});
});
</script>

jundo12
10-10-2014, 02:01 PM
thanks! so i just put the name in up top?
isn't she moving a bit fast? have any idea what the command in the script would be for movement speed? is it rotation?

jscheuer1
10-10-2014, 02:16 PM
If you mean to add images and you mean here:


venusim = ['venusfback.png',
'venusfbackmoving1.png',
'venusfbackmoving2.png'],

Then yes. Just make sure the first one is the original one as it is now, the one that the image is hard coded to. And, in case you don't know, that's an array. In this case each entry must be quoted and separated from the others by a comma. the whole thing has to be between the [ and ] brackets. The comma at the end is outside the ] bracket, separating it from the next variable declaration on the next line and is not technically part of the array.

The speed is set by the 500 on this line:


wtimer = setTimeout(function(){changevenusimage();}, 500);

It's the number of milliseconds between steps. 500 is a half of a second. 1000 would be 1 second, 750 would be 3/4 of a second, etc.

It does seem a little fast to me too, a higher number (750, or 1000) will be slower. It can be any positive number. But of course, if it is too high, it will be too slow, or maybe even not appear to move at all.

jundo12
10-11-2014, 03:51 AM
ah, sadly, it doesn't work in Chrome or Chromium based browsers like Opera or Maxthon. works badly in IE
apparently that's a browser specific javascript.

jscheuer1
10-11-2014, 04:39 AM
Huh? I developed it in Chrome.

If you want more help, please post a link to the page on your site that shows the problem. And please be specific in describing the exact issue(s) you see.

jundo12
10-11-2014, 04:56 AM
i have a guy who tests my pages in various browsers, after i create them, and he told me that. maybe it's his computer?

jscheuer1
10-11-2014, 05:09 AM
If there's any specific issue or set of issues, just let me know, I will look into it. As I said though, I would need a link to the page and a fairly detailed explanation of what the problem(s) are (browser version used, anything I have to do while viewing the page, etc.). I'm not saying there is no problem, just that I haven't seen any yet. I'm generally pretty good at fixing things - But it really helps to know specifically the problem. Hard to fix something I can't see.

jundo12
10-11-2014, 05:16 AM
If there's any specific issue or set of issues, just let me know, I will look into it. As I said though, I would need a link to the page and a fairly detailed explanation of what the problem(s) are (browser version used, anything I have to do while viewing the page, etc.). I'm not saying there is no problem, just that I haven't seen any yet. I'm generally pretty good at fixing things - But it really helps to know specifically the problem. Hard to fix something I can't see.

i personally, had no problems with it, other than my crappy animation skills. but he said, it didn't work in chrome or chromium browsers and in ie, it barely worked. i'm thinking it might be a combination of the 3d webgl it's running in and his computer, if you created it with chrome. i'm stumped, cause i had no issues with it. i have chrome and ie, so maybe i'll put your script back in again and test it myself. but that's not really going to solve anything, if other people can't see it. dang i wish the browser/computer companies would all get on the same page.

jscheuer1
10-11-2014, 05:19 AM
Make a separate copy of the page with my code on it and upload that somewhere I can see it. I will put it through it's paces in IE and Chrome to see if I can identify any issues.

jundo12
10-11-2014, 05:27 AM
it'll take me a bit, as i have since changed the first image in the animation. i'll link it here when i have it back up.

jundo12
10-11-2014, 06:18 AM
k if you have any problems accessing it here, let me know

http://thelivingmoon.com/undomiel/game/homes/

jundo12
10-11-2014, 07:18 AM
works fine in IE and firefox, for me, and is sluggish and odd, in chrome, but it works. i think the oddities in chrome are related to the webgl though, and not your script cause i ran it without your script in chrome before, and it seemed kinda odd even then. like it was having trouble with the webgl.

jundo12
10-11-2014, 08:42 AM
p.s. is there a way to add a play sound on that same w keydown that stops playing when w is released? i'd like to add a footsteps sound file

jscheuer1
10-12-2014, 04:09 AM
Well, yeah - and I will get to that soon if we are still pursuing this as a javascript/html project. If we do, best to have handy both (for cross browser compatibility) an mp3 an ogg version of the sound you want played.

I've been messing around with the thelivingmoon.com/undomiel/game/homes/ page in various browsers and I see major differences. My overall impression is that the page is resource intensive. We may be able to whittle away around the edges of that to cut down on the memory and clock ticks the page demands. Perhaps even find major alternative approaches/consolidations that would speed things up and require less resources. However - a project this ambitious* fairly cries out to be executed in flash or some other even more efficient programming language. Trying to do it all with HTML and javascript seems virtually impossible. Mind you not out of the question, but likely only workable on higher end machines, and perhaps limited as to which browser/OS combinations will handle it best.

Unfortunately, I'm not experienced in higher level languages like that, so can't really help you there. But it might be something you would want to consider. Also, once one programs something like that, it can sometimes be translated via server side coding to work fairly well over a high speed connection. Again, I'm more familiar with the concepts here than the actual coding, though I have done some rudimentary work along these lines in PHP (the running of a higher level program on the server that an online user can participate in).

*Reminds me of "Duke Nukem", if you ever heard of that and remember - basically a Point Of View character that you move through an environment. It was written in C++ or something like that.

Seems to work best in Firefox, but is still pretty sluggish even there.

jundo12
10-12-2014, 12:14 PM
ah thanks for your time!

how can we whittle down the memory and clock ticks? it's actually a brilliant program (not written by me, obviously) that uses "3d" noise and then a function that converts the noise into collision-ready walls/floor/ceiling, or into lights or colors or all of the above. something to do with marching algorithms and some kind of scanning function.

i just had the movement speed turned way down and hadn't optimized the wall textures yet. so it was moving slowly on purpose. to see it go really fast, press and hold down the w key and the shift key at the same time. prepare for light speed lol.
its the first 3d environment i've used in a browser, that didn't cause my graphics card fan to kick on. that means it has some wiggle room for other bells and whistles. .. theoretically, of course. lol i still haven't figured out how to include clickable regions, or even clickable divs, because the main page is a php file. and i have no idea how to add content to the rooms, but that's a different topic.

try it again and try the fast movement: w key + shift key
http://thelivingmoon.com/undomiel/game/homes/

yeah it's weird laggy in chrome, fine in IE (but graphics card fan kicks on?? doh) and great in firefox. what could possibly make the graphics card fan kick on in IE yet it runs smoothly, but is weird laggy in chrome but graphics card fan doesn't kick on, and runs great all around in firefox? what the sam hill are these browser companies doing that is so different from each other? sheesh

jundo12
10-12-2014, 12:42 PM
let me see if i can find the author's description of how it works
ah yes, here it is http://www.wordsaretoys.com/2011/12/09/sculpting-noise-and-faking-light/

jundo12
10-14-2014, 06:13 AM
is there a way to hide/show that animation by clicking a button on the screen? so it has the effect of being either first person camera or third person camera.
http://thelivingmoon.com/undomiel/game/homes/