Jump to content

use of gifs in event widow? possible?


zww

Recommended Posts

like in topic name, I was wondering if it could work. I have a little skill/and experience in moding, I mostly did some extending of the script for a mod and I was wondering if it would be possible to use gifs in event widow, after converting to right format to make it work.  I tried converting to dds like( format in which basic images of the mod are) but all I got was not moveing image in the event window.

Link to comment

Edit: In retrospect, this thread doesn't specify if this is for CK2 or Stellaris, but this should also work for Stellaris as both use the Clausewitz engine.

 

The DDS format doesn't have any support for animated images (as far as I know) and CK2's engine doesn't have any support for animated GIFs.

 

Define the texture as a frameAnimatedSpriteType instead of a normal spriteType.

Here is an example that I made:

https://my.mixtape.moe/grbski.mp4

 

The texture file for this looks like this (It was originally larger, but I didn't want to upload a 4500px wide image):

anim.thumb.png.ac2910d653043d5538d312ef1646f808.png

And the gfx file for it is this:

Spoiler

spriteTypes = {
     frameAnimatedSpriteType = {
          name = "GFX_anim"
          texturefile = "gfx\\event_pictures\\anim.jpg"
          noOfFrames = 10
          animation_rate_fps = 20
          looping = yes
          play_on_show = yes
     }
}

 

For more info on frameAnimatedSpriteType's parameters:

https://eu4.paradoxwikis.com/User:Xyloz/sandbox#frameAnimatedSpriteType

 

Also a small tip: If you really want to use animated images don't use uncompressed images like PNGs,TGAs or uncompressed DDS's. It would bloat the mod size extremely, use JPGs (CK2 does support them) or compressed DDS's.

Link to comment

i did a few tests but it dosn't work, tryed also adding other commands but like loop but dosn't work

}
    spriteType = {
        name = "332_4"
        texturefile = "gfx/event_pictures/332_4.dds"                  ( this part of mod works )
        noOfFrames = 1
        norefcount = yes
        effectFile = "gfx/FX/buttonstate.lua"
    }
    frameAnimatedSpriteType = {
        name = "333_4"
        texturefile = "gfx/event_pictures/333_4.gif"                   ( modified dosn't)
        noOfFrames = 1
        norefcount = yes
        effectFile = "gfx/FX/buttonstate.lua"
    }    
}

 

any idea what is causing problems? I added main files( or at last, I think so to post if you want to look at more )

 

DWT_rape_events.txt

DWT_eventwindow.gfx

dwt_scripted_effects.txt

Link to comment

Well for starters, the image has to be in the same layout as mine, each frame has to be horizontally next to each other with the last being the rightest, instead of the usual one frame per layer like in GIFs. Because of this actual animated GIFs wouldn't work and normal one layered GIFs shouldn't be used, as a layer of a GIF can only hold a maximum of 256 colors.

Converting animated GIFs to a horizontal sequential image can be easily done in GIMP:

  1. Image -> Mode -> RGB (So that we can have more colors when export it as something other than a GIF)
  2. Filters -> Animation -> Unoptimize (So the final result isn't a mess)
  3. On the newly created image: Filters -> Combine -> Film Strip
    • With the settings:
      • Selection:
        • [X] Fit height to images
      • Advanced:
        • Image height : 1.0
        • Every other slider: 0.0

 

As for the frameAnimatedSpriteType definition, you have to set the noOfFrames to the same amount of frames as the image, not just to 1. Also add the before mentioned parameters looping, animation_rate_fps & play_on_show again. If it doesn't work after that, upload the image file, I'll see what I can do.

Link to comment
17 hours ago, Herring said:

Well for starters, the image has to be in the same layout as mine, each frame has to be horizontally next to each other with the last being the rightest, instead of the usual one frame per layer like in GIFs. Because of this actual animated GIFs wouldn't work and normal one layered GIFs shouldn't be used, as a layer of a GIF can only hold a maximum of 256 colors.

Converting animated GIFs to a horizontal sequential image can be easily done in GIMP:

  1. Image -> Mode -> RGB (So that we can have more colors when export it as something other than a GIF)
  2. Filters -> Animation -> Unoptimize (So the final result isn't a mess)
  3. On the newly created image: Filters -> Combine -> Film Strip
    • With the settings:
      • Selection:
        • [X] Fit height to images
      • Advanced:
        • Image height : 1.0
        • Every other slider: 0.0

 

As for the frameAnimatedSpriteType definition, you have to set the noOfFrames to the same amount of frames as the image, not just to 1. Also add the before mentioned parameters looping, animation_rate_fps & play_on_show again. If it doesn't work after that, upload the image file, I'll see what I can do.

In short, that would be so much more trouble than what it's worth, since most gifs on the Internet won't be sized appropriately, so the mod's author will have to put in the work to create gif's specifically designed for CKII. As you said, it also increases the mod's file size.

 

Something else is sex images do not work well in the confines of the default CKII dimensions. I'm aware of the expanded event window coding, but I just don't like the look of it, and I value keeping things consistent with the default CKII event windows, otherwise it looks too jarring to have event windows of different sizes bombarding the player. When making my events, I've always had to get creative on some of them with panels, kind of like a comic book:
 

ckII_lilith_dream.jpg

Link to comment
1 hour ago, ngppgn said:

Furthermore, that animated type is from eu4 it remains to be seen if it's supported at all on ck2 (if you find out, let us know!).

 

Herring's video that shows the black gradient was recorded in CK2 (the EU4 windows look different).

Link to comment
1 hour ago, ngppgn said:

Furthermore, that animated type is from eu4 it remains to be seen if it's supported at all on ck2 (if you find out, let us know!).

See @coleman1's post, the video is in the second post of this thread.

The only problem that it seems to have is that it only supports aligning frames horizontally, but not vertically, so a 9 frame animation has to be 9x1 instead of 3x3, which would be a bit better for file size.

It should actually work with "overlay_frames_per_row" & "overlay_rows" if the information is correct on the EU4 wiki link that is in the same post (and if I understand it correctly).

Yet I think I tried every combination of "noOfFrames", "overlay_frames_per_row" & "overlay_rows", but everything seems to mess it up, then again maybe I just messed up again.

 

6 hours ago, ReMeDy said:

In short, that would be so much more trouble than what it's worth, since most gifs on the Internet won't be sized appropriately, so the mod's author will have to put in the work to create gif's specifically designed for CKII. As you said, it also increases the mod's file size.

 

Something else is sex images do not work well in the confines of the default CKII dimensions. I'm aware of the expanded event window coding, but I just don't like the look of it, and I value keeping things consistent with the default CKII event windows, otherwise it looks too jarring to have event windows of different sizes bombarding the player. When making my events, I've always had to get creative on some of them with panels.

Neither are most images on the internet, but resizing & cropping are a thing for a reason, you could also do the panels with GIFs, though it is harder to do.

If you want an easier way to convert GIFs for CK2, one can use something like this: https://ezgif.com/gif-to-sprite with Tile alignment set to "Stack horizontally" and then if the file size is still too big as a JPG use something like this with a PNG: https://ezgif.com/png-to-jpg adjusting the quality factor until it fits one's size limit. (Don't convert a JPG to another JPG, it's usually bad for file size)

As for the size bloat of mods, one could just make it an optional download.

 

I would agree that 20 different window sizes would be jarring, but I don't think the amount of different window sizes would change much with GIFs since people up until now have mostly just kept to the restrictions of the standard CK2 windows or @ngppgn's Bigger Events', atleast from what I have seen on here.

Link to comment
On 4/16/2018 at 3:45 PM, Herring said:

As for the size bloat of mods, one could just make it an optional download.

 

Mod download size is not much of a factor. The time required to make a good looking GIF will limit the number of them in the mod a lot more than file size. Beside, CK2 mods are tiny since nothing zips better than a txt file! So adding a few additional 100Mb of size is not a real issue. Few people are still on dial up these days!!

Link to comment
On 15.4.2018. at 1:03 AM, Herring said:

 

  Hide contents

spriteTypes = {
     frameAnimatedSpriteType = {
          name = "GFX_anim"
          texturefile = "gfx\\event_pictures\\anim.jpg"
          noOfFrames = 10
          animation_rate_fps = 20
          looping = yes
          play_on_show = yes
     }
}

 

 

I'm sorry, but I don't know what to edit and where.

Where do I put these lines? 

Thanks!

Link to comment

Here's a guide to the complete process of creating a CK2 compatible animated picture from a GIF with the online tool I mentioned before, since someone needed one. (NSFW):

Note: Depending on how you want to crop it could be a good idea to go straight to cropping instead of starting with resizing, if you don't want to crop at all then skip steps 2 to 5.

Spoiler

I will show you how you will have to do it with the online tool (https://ezgif.com/resize) with your GIF. I assuming that it's for Bigger Event's window so that the maximum size is 440x440 (normally 450x440 but it looks off center with those dimensions)

 

Step 1:

First upload the image with the browse button (or just paste the URL), then hit upload

1.png.86630b8a904ea45a60a6381727a5da74.png

 

Step 2:

Set the smaller of the two dimension (width & height of the image) to the window's maximum, in this case it's the height, which can have a maximum of 440 pixels, hit resize image, then go down and hit crop & wait until it's loaded.

2.thumb.png.563cda0f59e1b8b09e13c8eed8533dbf.png

 

Step 3:

Set the crop dimension to this:

3.png.f40dd53b8557b455ec606fca7ad449a6.png

 

Step 4:

Then set the smaller of the 2 dimensions again, so the height again, then hit set, then resize & drag the crop window around until you find what you want to focus on

4.thumb.png.056ad4f34ca243b9254290c1ac08178c.png

 

Step 5:

Crop the image and then click on resize

5.thumb.png.aa545ab5f035b0cb67f77d2ea65d2404.png

 

Step 6:

Now enter the maximum of the bigger dimension (of the now cropped image, not the original), hit resize, then click on split.

6.thumb.png.76b17b5c07bf23bbd7053ab8d745e258.png

 

Step 7:

From the URL copy the part after "split" and then click on "GIF to sprite sheet"

7.thumb.png.37e29f6796d9fcd7ac9000844067ba9d.png

 

Step 8:

Then paste the text into the URL to make it look like this and press enter:

7.5.png.7959e0af308cd9bbdf8ed50d549855b6.png

 

Step 9:

Set the tile alignment to "Stack horizontally", set the output to JPG, hit "Convert to Sprite Sheet" and once it is finished click optimize.

8.thumb.png.6db1e01827219f8425a4f4d4c5314313.png

 

Step 10:

Set to "fit size in ... KB" and set the ... to the KB file size that you want, hit "optimize image" and then finally save.

9.5.thumb.png.661868dfab0d1dd39b4acb969ef3913d.png

Finished:

Here is the final image that you should use:

Anim7.thumb.jpg.fb24b8c22b5d0750f895e0f58f478c93.jpg

 

-----------------------------------

 

3 hours ago, aleks922 said:

I'm sorry, but I don't know what to edit and where.

Where do I put these lines? 

Thanks!

That definition belongs in a *.gfx file, which goes in the interface folder. Look in to your CK2 installation's interface folder and open "event_pictures_WoL.gfx" for an example of how normal images (spriteType) are defined for events.

Here's what you have to change (With comments & what to insert in yellow):

 

spriteTypes = {  <-- Delete this line if you already have a "spriteTypes" definition
     frameAnimatedSpriteType = {
          name = "<Name to use for event>"
          texturefile = "<Path to image file>"
          noOfFrames = <Number of frames>
          animation_rate_fps = <FPS>
          looping = yes
          play_on_show = yes
     }
<-- Delete this line if you already have a "spriteTypes" definition

 

As for noOfFrames & animation_rate_fps. You can get them through GIMP, if you have it installed. Just open the GIF.

gimp.png.bb9f0efc0326c901d0de974eb72fedbb.png

noOfFrames = <the amount of layers/frames>

animation_rate_fps = <1000 / delay between frames> (This will not work with GIFs that use different delays between frames)

 

So those two parameters, in the case of this GIF, would be:

noOfFrames = 9

animation_rate_fps = 10

 

So the final gfx file may look something like this if you also have other normal images defined:

Spoiler

spriteTypes = {
    spriteType = {
        name = "GFX_1"
        texturefile = "gfx\\event_pictures\1.tga"
        allwaystransparent = yes
    }
    spriteType = {
        name = "GFX_2"
        texturefile = "gfx\\event_pictures\2.tga"
        allwaystransparent = yes
    }
    frameAnimatedSpriteType = {
        name = "GFX_anim"
        texturefile = "gfx\\event_pictures\\Anim7.jpg"
        noOfFrames = 9
        animation_rate_fps = 10
        looping = yes
        play_on_show = yes
    }
    spriteType = {
        name = "GFX_3"
        texturefile = "gfx\\event_pictures\3.tga"
        allwaystransparent = yes
    }
    spriteType = {
        name = "GFX_4"
        texturefile = "gfx\\event_pictures\4.tga"
        allwaystransparent = yes
    }
}

 

On 4/23/2018 at 2:52 PM, coleman1 said:

Mod download size is not much of a factor. The time required to make a good looking GIF will limit the number of them in the mod a lot more than file size. Beside, CK2 mods are tiny since nothing zips better than a txt file! So adding a few additional 100Mb of size is not a real issue. Few people are still on dial up these days!!

I would still keep it as something optional, for the case that someone does still use dial up or a proxy / VPN like me, but people can do what they want with their mods.

 

Link to comment
19 minutes ago, Herring said:

That definition belongs in a *.gfx file, which goes into the interface folder. Look into your CK2 installation's interface folder and open "event_pictures_WoL.gfx" for an example of how normal images (spriteType) are defined for events.

Here's what you have to change (With comments & what to insert in yellow):

 

spriteTypes = {  <-- Delete this line if you already have a "spriteTypes" definition
     frameAnimatedSpriteType = {
          name = "<Name to use for event>"
          texturefile = "<Path to image file>"
          noOfFrames = <Number of frames>
          animation_rate_fps = <FPS>
          looping = yes
          play_on_show = yes
     }
<-- Delete this line if you already have a "spriteTypes" definition

 

As for noOfFrames & animation_rate_fps. You can get them through GIMP, if you have it installed. Just open the GIF.

gimp.png.bb9f0efc0326c901d0de974eb72fedbb.png

noOfFrames = <the amount of layers/frames>

animation_rate_fps = <1000 / delay between frames> (This will not work with GIFs that use different delays between frames)

 

So those two parameters, in the case of this GIF, would be:

noOfFrames = 9

animation_rate_fps = 10

 

So the final gfx file may look something like this if you also have other normal images defined:

  Reveal hidden contents

spriteTypes = {
    spriteType = {
        name = "GFX_1"
        texturefile = "gfx\\event_pictures\1.tga"
        allwaystransparent = yes
    }
    spriteType = {
        name = "GFX_2"
        texturefile = "gfx\\event_pictures\2.tga"
        allwaystransparent = yes
    }
    frameAnimatedSpriteType = {
        name = "GFX_anim"
        texturefile = "gfx\\event_pictures\\Anim7.jpg"
        noOfFrames = 9
        animation_rate_fps = 10
        looping = yes
        play_on_show = yes
    }
    spriteType = {
        name = "GFX_3"
        texturefile = "gfx\\event_pictures\3.tga"
        allwaystransparent = yes
    }
    spriteType = {
        name = "GFX_4"
        texturefile = "gfx\\event_pictures\4.tga"
        allwaystransparent = yes
    }
}

 

I would still keep it as something optional, for the case that someone does still use dial up or a proxy / VPN like me, but people can do what they want with their mods.

-----------------------------------

 

Here's a guide to the complete process of creating a CK2 compatible animated picture from a GIF with the online tool I mentioned before, since someone needed one. (NSFW):

Note: Step 2 to 5 can be skipped if one does not intend to crop the image.

  Reveal hidden contents

I will show you how you will have to do it with the online tool (https://ezgif.com/resize) with your GIF. I assuming that it's for Bigger Event's window so that the maximum size is 440x440 (normally 450x440 but it looks off center with those dimensions)

 

Step 1:

First upload the image with the browse button (or just paste the URL), then hit upload

1.png.86630b8a904ea45a60a6381727a5da74.png

 

Step 2:

Set the smaller of the two dimension (width & height of the image) to the window's maximum, in this case it's the height, which can have a maximum of 440 pixels, hit resize image, then go down and hit crop & wait until it's loaded.

2.thumb.png.563cda0f59e1b8b09e13c8eed8533dbf.png

 

Step 3:

Set the crop dimension to this:

3.png.f40dd53b8557b455ec606fca7ad449a6.png

 

Step 4:

Then set the smaller of the 2 dimensions again, so the height again, then hit set, then resize & drag the crop window around until you find what you want to focus on

4.thumb.png.056ad4f34ca243b9254290c1ac08178c.png

 

Step 5:

Crop the image and then click on resize

5.thumb.png.aa545ab5f035b0cb67f77d2ea65d2404.png

 

Step 6:

Now enter the maximum of the bigger dimension (of the now cropped image, not the original), hit resize, then click on split.

6.thumb.png.76b17b5c07bf23bbd7053ab8d745e258.png

 

Step 7:

From the URL copy the part after "split" and then click on "GIF to sprite sheet"

7.thumb.png.37e29f6796d9fcd7ac9000844067ba9d.png

 

Step 8:

Then paste the text into the URL to make it look like this and press enter:

7.5.png.7959e0af308cd9bbdf8ed50d549855b6.png

 

Step 9:

Set the tile alignment to "Stack horizontally", set the output to JPG, hit "Convert to Sprite Sheet" and once it is finished click optimize.

8.thumb.png.6db1e01827219f8425a4f4d4c5314313.png

 

Step 10:

Set to "fit size in ... KB" and set the ... to the KB file size that you want, hit "optimize image" and then finally save.

9.5.thumb.png.661868dfab0d1dd39b4acb969ef3913d.png

Finished:

Here is the final image that you should use:

Anim7.thumb.jpg.fb24b8c22b5d0750f895e0f58f478c93.jpg

 

First of all...wow, thank you so much for all of this! 

 

Now, I apparently misunderstood something here. 

I have a single .dds image that is 4500x150 in size, with 10 images stacked horizontally within it. It's named n.dds, and is placed in gfx/event_pictures. And in the interface folder, I've edited eventwindow.gfx in notepad++, and added required lines. Texturefile points to n.dds file, while the name is GFX_n. And finally, I've changed one event to have GFX_n as it's picture.

 

I just used some program to cut 10 frames from a video, and then aligned them horizontally and merged into one. I don't really understand what do you mean want me to do with GIMP or GIF files...:classic_blink:

Thanks in any case!

Link to comment

Good to know that it works, some small things though:

25 minutes ago, aleks922 said:

[...] And in the interface folder, I've edited eventwindow.gfx in notepad++ , and added required lines. [...]

Directly editing & adding files from/to the game installation is usually a bad idea, create a mod and use the same folder structure as the game install and use new filenames (except if you want to overwrite a file from CK2 or another mod).

https://ck2.paradoxwikis.com/Modding

 

28 minutes ago, aleks922 said:

I just used some program to cut 10 frames from a video, and then aligned them horizontally and merged into one. I don't really understand what do you mean want me to do with GIMP or GIF files...:classic_blink:

That was if you wanted to convert a GIF for CK2, which I assumed you would use as going about it this way is a bit harder. Though your method gives better results in the end as videos aren't restricted to 256 colors per frame like GIFs, so props to you for that.

Link to comment
8 minutes ago, Herring said:

Directly editing & adding files from/to the game installation is usually a bad idea, create a mod and use the same folder structure as the game install and use new filenames (except if you want to overwrite a file from CK2 or another mod).

Yes, 'm aware of that. This was just an experiment though, and I always make backups. Also, lucky for me that Steam got me covered if I make a mistake.

Link to comment

I tried to make an image with 20 frames, but it won't work properly. Animation in the game is very weird. Although 15 works fine...

 

Also, I tried to disable looping, and it works as intended. But the animation ends on a ugly grey image. Is there perhaps a way to make it end on the last frame?

 

Many thanks again!

Link to comment
14 hours ago, aleks922 said:

I tried to make an image with 20 frames, but it won't work properly. Animation in the game is very weird. Although 15 works fine...

Did it by chance scroll across the image container like this?:

https://my.mixtape.moe/elujqf.mp4

 

Instead of being still like this? (This is a 20 frame animation by the way):

https://my.mixtape.moe/eoyrod.mp4

 

Because I have that when an animation has more than 36 frames like above (or if I set the noOfFrames to something wrong), the weirdness is to be excepted though, frameAnimatedSpriteType is after all quite new and the only place to even find documentation on it is on some users page on the EUIV wiki because they haven't merged the page yet with the main interface modding page, so it being buggy isn't a surprise.
 

14 hours ago, aleks922 said:

Also, I tried to disable looping, and it works as intended. But the animation ends on a ugly grey image. Is there perhaps a way to make it end on the last frame?

I'm guessing the reason for the grey image is that for whatever reason, when the animation is finished it takes the last column of pixels and stretches them across the image if looping isn't set to yes:

Stretch.png.d16697174867c8250c0df66fb430d146.png

The last frame of this animation was just some randomly colored pixels, as such they got stretched to this.

Sadly, I don't think there is a way to make it stop currently, CK2 doesn't yet support pause_on_loop for frameAnimatedSpriteType, which could just make it stop in between loops for a long time.

Link to comment
12 hours ago, Herring said:

Did it by chance scroll across the image container like this?:

Yes, exactly like that. 

12 hours ago, Herring said:

(This is a 20 frame animation by the way)

I see that you have a different event window, while I'm still on vanilla. Perhaps you can have animations with more frames because of that? Or perhaps something's wrong on my side...

12 hours ago, Herring said:

The last frame of this animation was just some randomly colored pixels, as such they got stretched to this.

Sadly, I don't think there is a way to make it stop currently, CK2 doesn't yet support pause_on_loop for frameAnimatedSpriteType, which could just make it stop in between loops for a long time.

Too bad. I did try pause_on_loop, but it didn't work. 

 

Biggest shame though is how overlay_rows doesn't work...

Link to comment
4 hours ago, aleks922 said:

I see that you have a different event window, while I'm still on vanilla. Perhaps you can have animations with more frames because of that? Or perhaps something's wrong on my side...

 

Biggest shame though is how overlay_rows doesn't work...

The window doesn't seem to affect it:

https://my.mixtape.moe/zoruik.mp4

It could just be that you mixed something up or your program exported one less / more frame than expected. Try increasing (if it scrolls to the left) or decreasing (if it scrolls to the right) noOfFrames in the definition, if it still doesn't work after that maybe try if my example from above works for you by typing "event Anim.1" into the console:

Animation Test.zip

 

Yeah, overlay_rows would give one a better overview if the picture were to be viewed in an image viewer and would also reduce the filesize a bit. Maybe Paradox will include it and pause_on_loop when we get an update or a new expansion, as it could be that they used an older version of their engine for the last few updates.

Link to comment

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. For more information, see our Privacy Policy & Terms of Use