Skip to main content

Browse GamesGame JamsUpload GameAutumn SaleDeveloper LogsCommunity
On Sale: GamesAssetsToolsTabletopComics
Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines
lokeloski101 days ago

I might be a bit over my head here, but I'm trying to add the gif export to Deckstamp. However, I'm having trouble adapting the new WigglyKit example with the export code to Deckstamp. In short, I'm... not sure how it works. I understand it grabs the frames and their order, but I don't know how it does that.

The normal canvas and the image interfaces don't have ".value", so it seems it's not that simple to just copy frame order from them, even if the image has "movement" (like the moving patterns). So I tried to use wigglyCanvas, but now I'm having trouble pasting an image in it: I tried using the image interface and it didn't work, so I tried using parts of the code of the import example on WigglyKit, and still nothing.

In any case, I'm guessing the best way would be to grab the card background image and save its different frames together instead of fiddling with wigglyCanvas, but is that possible? What would a code like that look like?

Reply
Internet Janitor100 days ago

Let's start with some context. All of the contraptions in WigglyKit share the convention of an "animation value"  consisting of a dictionary with the keys "frames" (a list of images) and "order" (a list of integers; indices into the list "frames"). There's nothing intrinsically special about this dictionary; it's just a convention to bundle together all the relevant information for a wiggly animation such that it can be easily moved around between those contraptions and manipulated with scripts.

WigglyKit offers an example of pulling the animation value out of a WigglyCanvas and then saving it as a GIF:

v:wc.value
# (optionally) make the background opaque:
v.frames:v.frames..copy[].map[0 dict 32]
gif.frames:v.frames @ v.order
gif.delays:10
write[gif]

As noted in the Decker reference manual for the built-in function write[] (see note 12), to save an animated GIF we need to call write[] with a dictionary with the keys "frames" (a list of images) and "delays" (a list of integers; how many 100ths of a second should each frame be displayed?)

So really, what we need to do to save a GIF outside the specific context of WigglyKit is make an appropriately-shaped dictionary and hand it to write[]:

gif.frames: ... # obtain or assemble a list of images, somehow
gif.delays: 10  # one number applies the delay to every frame
write[gif]

Obtaining/assembling that list of images will depend entirely upon your use case. We might grab them from a sequence of canvases:

gif.frames: (c1,c2,c3)..copy[]

We could do the above in a more verbose way, if we wanted:

gif.frames: c1.copy[],c2.copy[],c3.copy[]

Or perhaps we could use the recently-added ".images" attribute of rich-text fields to grab all the inline images stored in a field:

gif.frames: myRichTextField.images

Etc.

Does that help point you in the right direction?

Reply
lokeloski100 days ago

I think I understand better now how it works! After some tests, I kinda did it, but the results were a bit different from what I was seeing on the screen. It's worth mentioning all the images are pasted into the card's background.

Here's the source image, which was exported using Decker's own "export image" in the menu. It's worth mentioning this image was generated by importing a photo with the "gray" hint and not doing anything else:


I then reimported this image into Decker using the same options, and this is what I'm seeing on the screen now. This is an OS screenshot because this time, Decker's export image isn't exporting an animated gif anymore, just a still image (shown below this one). Every diagonal line was supposed to be "moving" (which causes a really cool effect).

OS screenshot (in Decker, all the lines have movement):


Decker's exported image:

Fiddling around with trying to grab frames and delays, I arrived at this result, which doesn't seem to have any movement in this post, but it does if you open the image in another tab:

I used this code to arrive at this result:

i:read["image" "gray_frames"]
card.image.paste[i]
gif.frames:i.frames
gif.delays:i.delays
write[gif]

It's not the same thing I'm seeing on the screen, but it's progress!

Funny enough, if I try to replicate the first image using "gray_frames" in a normal photo instead of just "gray", it just imports the image as if it was using "color" instead.

Now I'm trying to figure out how to grab the animated patterns in a card's background as different frames. Maybe that will export the same thing I see on the screen? I was able to grab frames from imported gifs, from different canvases and put them together, and was successful with images in rich text fields too, but I'm not sure how to go about a background image.

Reply
AboutFAQBlogContact us
Copyright © 2024 itch corp · Directory · Terms · Privacy · Cookies