Showing different images when moving?

[qqchrono]

Hello there,

I'm new to this forum and still quite new to livecode(around 2 weeks experience)

I have maze game or at least that what I call it that I am currently working on. It's my first game that I would be attempting to make and pretty proud of the outcome so far. However I ran into a problem
I would be having a character with an idle animation gif and 4 different directional sprites so let's say when i hold down the down arrow key, it would hide my character idle animation and show the appropriate directional sprite.
As of now what happens is both the Idle animation and Directional sprites flicker back and forth when any of the arrow keys are held down to move. Any help on how I would be able to keep the idle animation hidden while any arrow keys are pressed and make Idle animation visible and directional sprites hidden when the arrow key is released would be greatly appreciated.

I have attached a link to my google drive with the example codes I'm using to test with.

https://drive.google.com/open?id=0B-acN ... U1iYUlIblU

[bogs]

Heya qqchrono.

I would say trap the arrowKey message, something like (dictionary, arrowKey)

Code: Select all

on arrowKey theKey -- make Up arrow go to the first card
  if theKey is "up" then
      set the visible of image "Idler" to false
      move image "(image chosen for 'up')" relative 50,0 without waiting
 // 50,0 may be backwards, figure out which is actually 'up' :D 
end arrowKey

The only thing I might change is instead of if / then, I might use select / case, but if your really new, if / then will get the job done.

[Klaus]

Hi qqchrono,

1. welcome to the forum!

2. As bogs said "trap" the arrowkeys, but you should NOT use your images directly, but a BUTTON with the ID of your image(s) set as its ICON!

This way you don't have to manage showing/hiding of the images and also not keeping book of the correct location for the current image, since the images moves with (inside of) the button and is are on the correct place on the card when you switch the icon.

Know what I mean?


Best

Klaus

[bogs]

Oh I like that idea.

...but you should NOT use your images directly, but a BUTTON with the ID of your image(s) set as its ICON!

This way you don't have to manage showing/hiding of the images and also not keeping book of the correct location for the current image, since the images moves with (inside of) the button and is are on the correct place on the card when you switch the icon.

Know what I mean?

I do now, and agree completely.

[qqchrono]

Heya!
Thanks for the replies

I would say trap the arrowKey message, something like (dictionary, arrowKey)

Code: Select all

on arrowKey theKey -- make Up arrow go to the first card
  if theKey is "up" then
      set the visible of image "Idler" to false
      move image "(image chosen for 'up')" relative 50,0 without waiting
 // 50,0 may be backwards, figure out which is actually 'up' :D 
end arrowKey

The only thing I might change is instead of if / then, I might use select / case, but if your really new, if / then will get the job done.

I'll try this out and see what I can accomplish. Will update ASAP.
Edit : Is there any pros and cons between using move image and setting the location of it specifically?

2. As bogs said "trap" the arrowkeys, but you should NOT use your images directly, but a BUTTON with the ID of your image(s) set as its ICON!

This way you don't have to manage showing/hiding of the images and also not keeping book of the correct location for the current image, since the images moves with (inside of) the button and is are on the correct place on the card when you switch the icon.

Klaus do you mean something like this stated here? I did read up a bit on it but didn't really understood the difference between using an image directly instead of skinning the image onto a button.
https://sites.google.com/a/pgcps.org/li ... e/skinning

Cheers

Chrono

[bogs]

Edit : Is there any pros and cons between using move image and setting the location of it specifically?

Unfortunately, the answer to that (for me) is always "it depends", and it is going to depend on a number of things I don't know about what your doing. If your image is just free roaming around, i.e. you just want it going in the direction of the arrow key, then probably I would be using move, since it is not going to a specific location.

On the other hand, if you have a set of coordinates in mind for it to move along (much more involved) then you might go either way. Even then, though, lets say you had a path of 20 x/y points you wanted to move along. It is far shorter to use 'move' and have it travel along that list than it would be to say, set the location to xy1, xy2, xy3, etc, or even to use a repeat loop to do the same. Neither is going to be taxing to write, so it sometimes becomes preference.

The link you put up is a good resource on simple game theory with good examples. Work through the examples there, and then you might want to take a look here, here and here. All of those are very decent on information on just about anything you could wonder about.

[qqchrono]

Hi bogs

Unfortunately, the answer to that (for me) is always "it depends", and it is going to depend on a number of things I don't know about what your doing. If your image is just free roaming around, i.e. you just want it going in the direction of the arrow key, then probably I would be using move, since it is not going to a specific location.

On the other hand, if you have a set of coordinates in mind for it to move along (much more involved) then you might go either way. Even then, though, lets say you had a path of 20 x/y points you wanted to move along. It is far shorter to use 'move' and have it travel along that list than it would be to say, set the location to xy1, xy2, xy3, etc, or even to use a repeat loop to do the same. Neither is going to be taxing to write, so it sometimes becomes preference.

I understand better now
Thanks for the resources! I'll definitely look through them during my free time.

I have uploaded the demo of the game with its bare functions if it helps makes things clearer
https://drive.google.com/open?id=0B-acN ... U5TbDJFV00

In the demo the current placeholder for the character is just a circle graphic so the codes for it to move up,down,left and right are fine and working. In future when I'm going to implement the character directions animations and idle animations is where the problem comes in of trying to display the character facing the correct direction.
So example would be at the start of the game, the character would be facing upwards in its idle pose then when i hit/hold down the Up arrow key, the character switches to the up walking animation and hides the idle animation.
This i have no problem doing, the problem is i can't get the idle animation to reappear when i let go of the up key or any of the directional keys. I tried using rawKeyUp but that ended up in a flickering idle pose showing while my character is still moving.
The first test codes i have uploaded shows that flickering which is what i am trying to resolve currently.

The animations would be using a transparent background as well so I don't think using a button to skin it would work well here since the button would always have the background? Most likely sticking to using the images directly for this case.

Thanks again to all who have provided help! Greatly appreciated.

Cheers

Chrono

[bogs]

Buttons can be transparent or opaque. One of their nice features is seen on the 'icons' section, you can set a different graphic based on which of those you call. Here is a little transparent guy on a little transparent button.

I left the button selected so you could see its border. You'll notice on the left is 6 versions of icon for the button, each can take a different icon. To anyone looking, they won't be able to tell this is an image on a button, and you can set the icon by which arrowKey is being used, or if none at all is (your idle position).

[qqchrono]

Hi bogs

Buttons can be transparent or opaque. One of their nice features is seen on the 'icons' section, you can set a different graphic based on which of those you call. Here is a little transparent guy on a little transparent button.

I left the button selected so you could see its border. You'll notice on the left is 6 versions of icon for the button, each can take a different icon. To anyone looking, they won't be able to tell this is an image on a button, and you can set the icon by which arrowKey is being used, or if none at all is (your idle position).

Thanks! That's just what i needed for the buttons. Completely missed out the transparent option. That did the job for transparency.
For the idle position how would i code it in livecode though?
I tried

Code: Select all

on ArrowKey theKey
    if theKey = "" then
	set button "Button" to (idle ID)
    end if
end ArrowKey

but that didn't really work out because "" is not accepted for no input. Is there any way i can go about detecting when the arrow key has been released other than rawKeyUp since that did not work for me.
This is what the test codes look like right now

Code: Select all

on arrowKey theKey
   
   if theKey is "up" then
      set the icon of button "Button" to "1007"
      set the bottom of button "Button" to the bottom of button "Button" -  4
   end if
   
   if theKey is "down" then
      set the icon of button "Button" to "1004"
      set the bottom of button "Button" to the bottom of button "Button" +  4
   end if
   
   if theKey is "left" then
      set the icon of button "Button" to "1005"
      set the left of button "Button" to the left of button "Button" -  4
   end if
   
   if theKey is "right" then
      set the icon of button "Button" to "1006"
      set the left of button "Button" to the left of button "Button" +  4
   end if
   
      if theKey is "(what goes here?)" then
      set the icon of button "Button" to "1003"
   end if

end arrowKey

Cheers

Chrono

[bogs]

Well, instead of testing for empty in the arrowKey set, you might try this -

Code: Select all

on rawKeyUp theCode
   if theCode <> "" then
      set the icon of button "Button" to "1003"
   else
      pass rawKeyUp
   end if	 
end rawKeyUp

[qqchrono]

Well, instead of testing for empty in the arrowKey set, you might try this -

Code: Select all

on rawKeyUp theCode
   if theCode <> "" then
      set the icon of button "Button" to "1003"
   else
      pass rawKeyUp
   end if	 
end rawKeyUp

Thanks. This works if the arrow keys are being tapped.
However in this case, the keys are going to be held down to continuously move which creates flickering of the icon. It seems like when you hold down the key livecode repeatedly sends the arrow key handlers which is why rawKeyUp messages also gets sent when the arrow key is being held down.
I'm can't think of any way to go around this other than a last resort of removing the idle animation completely and just using the 4 directions button icons only

[Klaus]

Hi chrono,

...
Klaus do you mean something like this stated here? I did read up a bit on it but didn't really understood the difference between using an image directly instead of skinning the image onto a button.
https://sites.google.com/a/pgcps.org/li ... e/skinning

yes, but looks like you already found out by yourself


Best

Klaus

[bogs]

It seems like when you hold down the key livecode repeatedly sends the arrow key handlers which is why rawKeyUp messages also gets sent when the arrow key is being held down.

Actually, Lc is reading what the keyboard is doing, which is repeatedly sending the alternating messages. If you go to the 'development' menu and choose 'message watcher', you'll see exactly what gets sent, and what you can respond to, as Lc receives it.

I'm can't think of any way to go around this other than a last resort of removing the idle animation completely and just using the 4 directions button icons only

First, I want to make clear I am not trying to give you "boiler plate code" to drop into your program to solve any issue that may come up, as I think that is a disservice to people. While I wouldn't ask you to say, read a 500 page manual to find the answer to one question, I would expect you to take more time trying to solve something than a couple hours.
Second, it is possible to work around the problem without resorting to dropping the animation, but it takes time to learn. You've been using Lc 2 weeks, where, while not Lc specific, I've been writing stuff in code for a while (decades), and our friend Klaus there has been using Lc since the earth was forming (or shortly thereafter) I can't speak for Klaus, who is something of a wunderkind, but I can say I still don't know everything, and you should give yourself some time to become proficient.

It even takes time to learn how to look up specific information, even when you know what your looking for and (generally) how to find it.

You have a number of sites links specifically for this type of thing (game routine coding), I am sure you don't expect to know everything in one day, take some time and study the material while writing your code. If something you write doesn't work flawlessly, keep on writing parts you can figure out while looking for more information on what your lacking.

One of the things coming up in this case, your going to have to find out how to handle the repeat rate overflow if someone holds down the key for a while, which will cause the button to keep right on moving across the screen as if the key never stopped getting pressed.

Then, if your really stuck, feel free to ask, there are lots here willing and happy to help un-stick you.

[jacque]

Is there any pros and cons between using move image and setting the location of it specifically?

Setting the location of an object transports it instantly to the new location. The "move" command provides far more options. "Move" is an animation effect that allows a control to glide smoothly across the screen to the new location. You can control the speed of the movement, the path it follows, and other properties.

In the case where the script is responding to repeated key presses there is little difference because in general you'll only be moving the object a pixel or two. In fact, if the distance is very small it is usually quicker to just set the location directly. But if each keypress moves the object a significant distance then "move" is a good choice because it allows smooth animation to the destination.

If you want the object to follow a predefined path, you don't need to script a repeat loop with a series of "set" commands. The "move" command allows you to define a path and then start the move with a single command. The object will follow the path by itself. It is common to create a graphic, which can be hidden, and use the "move" comand to follow the lines of the graphic:

Code: Select all

move button 1 to the points of graphic "myPath"

[qqchrono]

Hi!

Thanks for the replies and advice given. They're greatly appreciated. Unfortunately time is not a luxury for this game as it's actually for work so certain things that can't be done on time has to be dropped and move on to keep things going. However, working on this and receiving help for it has boosted my motivation by huge margins and i would definitely continue finding more about livecode and in the future even be able to implement that idle animation haha!
I'll definitely ask for help again from this friendly community again if i ever run into more problems i cant un-stick myself out of during my learning process.
Thanks to all!