Animated Gifs...

Posted by Asmodeusbrooding on Sat 09 Nov 2019 08:29 AM — 11 posts, 37,393 views.

Asmodeusbrooding Sat 09 Nov 2019 08:29 AM #0

I'm working on an affects window, with animated gifs in it...and there are a few problems.

1. Some of the frames are randomly having GREEN flash in the background, all of which usually have BLACK backgrounds, I don't know why this is happening, as there is no green in the images themselves.

https://imgur.com/a/OtdoNIy

(Ignore the top left thing in the image)

2. Only ONE gif will play at a time using this method: if you try to play another one, the original one stops (even if you make another playgif function) (maybe if I change gifinfo in the other function?)

The plugin is found here.

https://www.dropbox.com/s/7czcq0xsoesi2oc/Affects%20Window.xml?dl=0

I'm using methods found here:

https://www.gammon.com.au/forum/bbshowpost.php?bbsubject_id=14330

The frames folder is here: it can be put in worlds/plugins/images

https://www.dropbox.com/sh/96nbd2n1gurf5xu/AACyAkXWh-f6TCEobEPGdqQBa?dl=0

Is there a better way to do this, or is there another way around this?

I don't want the random green in the gifs, and I want to be able to play multiple gifs at once, like maybe 20 at max. (all very small image and frames, like 2-4 frames for most of them)

The concept of the window is if you're affected by a spell, a 32x32 or 16x16 tile will appear, which may or may not be animated. (I'd like it to be animated, something like this)

http://www.videogamesprites.net/SecretofMana/Magic/Luna%20-%20Moon%20Saber.gif

Now I'm just working on the gif part, and would appreciate any help.

Thanks

Nick Gammon Australia Forum Administrator Sat 09 Nov 2019 11:37 PM #1

One thing that strikes me is that you only have one instance of GifInfo, which is used to step through gif frames. You really need one *per gif*, otherwise each new file will replace it. So make a table of GifInfo elements, and when playing (each 10th of a second) step through and advance each one to the next frame.

I don't know about the green stuff, but maybe make the PNG files have no alpha channel, see if that helps.

Asmodeusbrooding Sun 10 Nov 2019 12:05 AM #2

Nick Gammon said:

One thing that strikes me is that you only have one instance of GifInfo, which is used to step through gif frames. You really need one *per gif*, otherwise each new file will replace it. So make a table of GifInfo elements, and when playing (each 10th of a second) step through and advance each one to the next frame.

I don't know about the green stuff, but maybe make the PNG files have no alpha channel, see if that helps.

Hey Nick,

I also originally tried with two different GifInfo, but it didn't work.

Maybe I did it wrong, I'll try again.

I'll look into making the PNG files have no alpha channel as well, thanks.

Do you think this is a good way to do what I'm trying to do, or do you think there is a better more efficient way?

Nick Gammon Australia Forum Administrator Sun 10 Nov 2019 01:05 AM #3

The program wasn't really designed to show animations, but I think the method I described is about the only reasonable way of doing it.

Nick Gammon Australia Forum Administrator Sun 10 Nov 2019 03:23 AM #4

The example below will show multiple images. I made a table "infos" which holds all of the info fields. To test type:


TestMovie 1
TestMovie 2

That adds both of them to the infos table, and then the timer calls PlayAllMovieFrames which calls PlayMovieFrame for each of the movies in the table (which therefore could be many). I'll leave it up to you to make a way of getting rid of one you don't want any more (delete it from the table). You would probably also want to blank out that part of the screen so that last frame didn't stay there.


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE muclient>

<muclient>
<plugin
   name="PlayMultipleMovies"
   author="Nick Gammon"
   id="0ad674f9798be6d5b8ff2e93"
   language="Lua"
   purpose="Demonstrates playing multiple animatinos"
   save_state="y"
   date_written="2019-11-10 13:24:09"
   requires="5.00"
   version="1.0"
   >

</plugin>

<!--  Aliases  -->

<aliases>
  <alias
   script="TestMovie"
   match="^testmovie (\d+)$"
   enabled="y"
   regexp="y"
   sequence="100"
  >
  </alias>
</aliases>



<!--  Timers  -->

<timers>
  <timer
    script="PlayAllMovieFrames"
    enabled="y"
    second="0.5"
    active_closed="y"
  >

  </timer>
</timers>


<!--  Script  -->


<script>
<![CDATA[

infos = {}

function OnPluginInstall ()

  win = "movie_" .. GetPluginID ()  -- get a unique name

   -- make the window
  WindowCreate (win,  100,  -- left
                      100,  -- top
                      500,  -- width
                      500,  -- height
                      miniwin.pos_bottom_right,
                      0,
                      0)  -- create window

  WindowShow (win)
  
end -- OnPluginInstall
                      
-- --------------------------------------------------------------------
-- PlayMovie (info)
--  info.filename (eg. "/frames/my_movie_%03i.png" )
--  info.frames   (eg. 10, if the movie consists of 10 files)
--  info.x   - X position on screen
--  info.y   - Y position on screen

--  Suggested conversion:
--    ffmpeg -ss "00:30" -i INPUTFILE.mp4 -t 1     -r 10 -s 720x404 frames/my_movie_%03i.png
--                ^^^^          ^^^       ^^^^     ^^^^^    ^^^^^^^    ^^^^^^^^^^
--           Start time      input file  how long   FPS       size      output files
-- --------------------------------------------------------------------
function PlayMovie (info)
  movieInfo = info

  if not info then
    return
  end -- if

  assert (type (movieInfo) == "table",
          "Argument to PlayMovie should be a table")

  -- see if already in table
  if infos [info.filename] then
    return
  end -- if already there
  
  local gotErrors = false

  -- load each movie frame into memory, if not already done
  for i = 1, movieInfo.frames do
    local filename = string.format (movieInfo.filename, i)
    if not WindowImageInfo(win, filename, 2) then
       local result = WindowLoadImage(win, filename, filename)
       if result ~= error_code.eOK then
         ColourNote ("Red", "", "Could not open move frame file:")
         ColourNote ("Red", "", "   -> " .. filename)
         ColourNote ("Red", "", "   Reason: " .. error_desc [result])
         gotErrors = true
       end -- if
    end -- if
  end -- for each frame

  -- if couldn't do it, discard the movie info
  if gotErrors then
    movieInfo = nil
    return
  end -- if

  -- otherwise, start at frame 1
  movieInfo.currentFrame = 1

  -- put into table of infos
  infos [info.filename] = movieInfo
  
end -- PlayMovie

-- --------------------------------------------------------------------
-- PlayMovieFrame - show current frame, advance count
-- --------------------------------------------------------------------
function PlayMovieFrame (movieInfo)

  -- timing stuff
  timeTaken = timeTaken or 0
  frameCount = frameCount or 0

  local startTime = utils.timer ()
  local filename = string.format (movieInfo.filename, movieInfo.currentFrame)
  if WindowDrawImage (win, filename, movieInfo.x, movieInfo.y, 0, 0,
                      miniwin.image_copy) ~= error_code.eOK then
     ColourNote ("Orange", "", "Could not draw image: " .. imageName)
  end -- if
  Redraw () -- force screen update

  -- next frame
  movieInfo.currentFrame = movieInfo.currentFrame + 1
  -- wrap
  if movieInfo.currentFrame > movieInfo.frames then
    movieInfo.currentFrame = 1
  end -- if

  -- add up how long we took doing this
  timeTaken = timeTaken + utils.timer () - startTime
  -- and how many times
  frameCount = frameCount + 1
end -- PlayMovieFrame


-- --------------------------------------------------------------------
-- PlayAllMovieFrames - called by a timer every 1/10 second - calls 
--                      PlayMovieFrame for each movie in the table 
-- --------------------------------------------------------------------
function PlayAllMovieFrames (timerName)

  for k, v in pairs (infos) do
    PlayMovieFrame (v)
  end -- for

end -- PlayAllMovieFrames

-- --------------------------------------------------------------------
-- TestMovie - for testing 
-- --------------------------------------------------------------------
function TestMovie (name, line, wildcards)

  if wildcards [1] == "1" then
    PlayMovie {
                filename = "frames\\mr.moti_%03i.png",
                frames = 9,
                x = 10,
                y = 10,
                }
  else
     PlayMovie {
            filename = "frames\\my_movie_%03i.png",
            frames = 2,
            x = 300,
            y = 300,
            }      
  end -- if
 
end -- TestMovie

]]>
</script>

</muclient>

As for the green stuff, there seems to be something odd with the way you converted your gifs to png files. If I run this to remove the alpha channel:


mogrify mr.moti_001.png -alpha off

Then the first file (and only that one) has a green background. If you remove the alpha channel and then fix any resulting colour discrepancies, it should be OK.

Asmodeusbrooding Wed 13 Nov 2019 04:02 AM #5

Hey Nick,

This all worked out, and thanks for the help.
I'll be posting again soon to let everyone know how it goes with regard to memory usage/if I encounter any other issues.

Thanks!

Fiendish USA Global Moderator Wed 20 Nov 2019 05:35 PM #6

I'd love to see a screen recording of the final result too if you're able.

Asmodeusbrooding Sat 23 Nov 2019 02:36 AM #7

Hey Fiendish,

Here is a quick screen recording, with a few things to note.

The screen recording app I'm using is decent, but doesn't do the plugin justice. There are zero flaws in the actual plugin, and it loops 100% perfectly, but the screen recording makes it seem like it's an imperfect loop with potential stutter. You can also load TONS of these animated icons without a noticable slowdown. (at least on my computer)
Regardless, here's a little screen cap...

https://share.getcloudapp.com/BluEkJ47

The thing to be looking at is the "Affects Window", which is right below the main output window.

Sorry about all of the print/debug messages, it's still highly under construction. The functionality of it is all in working order, it just needs more icons (which take a while to make)

The window will eventually (soon) have visual number timers over the icons to show how long the affects will last, and tons of other cool stuff.

Nick Gammon Australia Forum Administrator Sat 23 Nov 2019 10:31 AM #8

Asmodeusbrooding said:

The window will eventually (soon) have visual number timers over the icons to show how long the affects will last, and tons of other cool stuff.

Like this: http://www.gammon.com.au/forum/?id=9359

BTW you can get rid of those slightly annoying pop-up windows by disabling "line information" in the output configuraiton.

Fiendish USA Global Moderator Sat 23 Nov 2019 06:28 PM #9

That looks awesome! And it really shines on top of the dark color theme.

Asmodeusbrooding Sun 24 Nov 2019 12:49 AM #10

Nick Gammon said:

Asmodeusbrooding said:

The window will eventually (soon) have visual number timers over the icons to show how long the affects will last, and tons of other cool stuff.

Like this: http://www.gammon.com.au/forum/?id=9359

BTW you can get rid of those slightly annoying pop-up windows by disabling "line information" in the output configuraiton.

Thanks for that, Nick. I like those pop ups sometime for figuring out how long something took, since they have a time on them.
As for the timers on the affects window... I also do have one of those action icon bars as well, and for the numbers, I've seen a good example of different positioning of them all here.

https://share.getcloudapp.com/QwuQN2ze

I was hoping more to put it where that red circle is; Right under the image, as to not overlay/ruin it.
I'll just have a few extra pixels between the Columns, which is fine because I only intend to have two columns in horizontal mode.

I've also added extra functionality to that action cooldown bar you linked: (ACTION BAR)

https://share.getcloudapp.com/NQue87G0

You can now right click to change spells/skills to any that you might have in a list (table)
You can hide/show the window, and it will stay hidden through client close/opens until you ask for it to be shown.

I just generalized the code and it's located here for all to use:

https://www.dropbox.com/s/g15f91ym7ikkbsj/ActionBar.xml?dl=1

The generalized version buttons default to text of the numbers 1-9 instead of my icons.
As for the icons; they're just weird looking example icons, pay no attention to them, I know they look bad (and some don't even match)

I'm actually hoping my affects window can eventually work in a way that the spell icons go grey when they run out, and you can click on them to re-up on the spell. (if it's a protection spell, obviously not on status affects that might be negative) This means they'll have static positions, so I'm not sure about it all yet; lots of work to do.

As for Fiendish:
I hoped for that!

Here is a link to two really nice themes I made that you might like; feel free to include in your AARD package if you'd like.

https://www.dropbox.com/s/j8ykk0xscueyzet/Bob-omb.lua?dl=1

This one below is the one featured in that screen recording.

https://www.dropbox.com/s/ka1i9we5kn4qnu5/Dark.lua?dl=1

I think you would really enjoy the first one, it's quite pleasant. An added benefit is that in my templates I've included comments as to what each part of the code does, which would make it easier for users to make their own themes in the future. Please correct me on any comments of they're wrong.

Thanks for the help, I'll keep you guys updated,

Asmodeus