⚠️ These Posts are Old! ⚠️

A couple more notes about how this was made.

On the left, my first sketch of the scene. The new underpaint mode is really helpful for figuring stuff out.

On the right, a copy of the main card-in-progress -- the Desk, Window, and wallpaper were mostly set up but I still had to decide what else needed to be drawn and how big each item would be. Because it was a copy of the main card I could scribble ideas on it, and then copy those scribbles into new blank cards to be refined into sprites/canvases.

1. The first card with all the drawers has those 'in' and 'out' buttons so I could script the animation of the drawer opening with and without the pocket watch in it before bringing everything over to the main card. The tiny square at the top is the checkbox that the script checks to know which animation to play. Picking up the watch from the drawer changes the checkbox.
2. The middle card had a few different attempts at the shelf design before I figured out the right size. The cat pieces are here. Uhhhh... I was very indecisive about the teacup animation so there's a lot of different versions of the frames cut up all over the place.
3. The pocket watch has a idle animation when it's on it's little stand, and a sparkle plays if you click it when it's up there. But it also has it's "laying down on the desk" sprite and it's "being dragged around" sprite. Lots of yellow ovals. All the little boxes around the watches are to make sure each frame is the same size for the animation. The guidelines are erased before copying the frames into a canvas that will be the source for a zazz.flipbook animation.

This is the final Desker card in Widget mode. There are 101 widgets.

There could have been a lot less than that. There's better ways to do the things I was doing but it was a case of Gotta Go Fast. And if I wasn't 100% sure how to do the better version of something... I did it in the worse way I already knew.

I've had a larger point-and-click decker project in progress for a long time now (It's not a good game but it's taught me a lot) so the ways I've been building things in this style feel very obvious to me at this point, though it might not be clear how it was made (in decker specifically) to someone new to it. It's mostly transparent canvases! Prepare your object sprite, select and copy, switch to widget mode, Edit > Paste as new Canvas. Change it's settings to borderless and transparent, probably, if that's what you want. And there you go.

And... yep. That's what I wanted to say. Okay bye.

Some belated notes on this. Nothing very useful, just... notes.
It's a little long.

#1 most important is that I need to stop doing this to myself.

That's too many widgets on one card! Especially trying to get them stacked in the right order. I lost some widgets in there and I know I could have pulled them out of the pile with the Listener but I was burning out between this, and art fight, and some recent (real life stuff) and I just wanted to move on.

Rest in Slices to the alternate (scored) loaves which can no longer be made.

Two useful things that did come up while making the loaf images though -- The idea of using underpaint as a 'stencil' for items that need to be the same shape but want to be colored differently (in a less structured way, like using the stipple brushes).

As long as you're not using black around the edge of the sprite (or add the black outline later I guess) it worked pretty well. I'm not sure if this will ever come up again for me but I thought I'd mention it.

The other useful thing was finally using the canvas widget's scale option. All loaves were drawn to the size that they would have appeared on the table at the end and had their images copied (at certain time intervals, see below) onto the canvas inside the oven that was set to a smaller scale. Works great. I will be using this again.

The big theme here was timing. I wanted to use the beat clock contraption and some sliders to make a day/night cycle, and I also needed an excuse to keep people on the page doing stuff so time could pass gradually. Thus, kitchen shenanigans.

I clearly didn't have time to test it for how it... felt? Game feel? I'm sorry to the people who had to take 2+ days to heat the water for the tea... but really... a watched kettle never boils.

All of the timing stuff is stored in the clock widget in the kitchen rafters...

This isn't really how it's all written, but this is the logic of it.

on beat_tick time do
slider.value:slider.value+1
end

And certain things would happen when certain timers(sliders) hit certain values.

There are also a bunch of if statements that look at checkboxes for 'if the bread is in the oven' before telling the bread baking slider increase it's value, etc, etc. Some of my ideas didn't actually get to happen, so I think there were several status checkboxes that didn't.... do.... much.. in the end. That's fine.

Whatever! It's a game jam!

The palette cycling uses scripts I took from the PalImport contraption to switch to different palettes that are stored in a bunch of text fields on another card. When the timeprogress slider hits a certain number it changes the colors... and eventually sets itself back to 0 so it can loop.

Little bonuses.... of course, there was a Chicken, of course. And Phinxel... who I'm afraid will continue showing up in my decks for a while. But there were some other tiny things.

The time progression stuff also changed who is sitting out on the branch outside the window.

Meep bird from The Riddle visits, there's a SECRET SECOND CHICKEN at a certain time of day, and also Phinxel goes outside to watch the sunset (he leaves his hiding place for that amount of time....).

I also have to apologize to poor Lily.... She's trapped in a portrait frame on the wall until you manage to make the tea and bread.

Thank you for saving her, brave kitchen heroes!
The stakes were higher than you knew...

And at the time it made perfect sense to me to do that because I had been (in another deck) playing with different ways to use dialogizer... and I had drawn this set of portraits of her "stuck in a (dialog box portrait) frame".

I guess it was a joke only for me.... referencing something unpublished... I'm sorry Lily. At least she got out of there (and a delicious snack) at the end of this ordeal.

Anyway, the deck is unlockable (arrow key your way into the behind the scenes if you want, there's a button) but I didn't feel very good about how rushed it was at the end and I didn't really want to encourage new people to look under the hood on this one.... but of course you're welcome to do what you want.

Doing multiple events in one month was pretty rough, even before (life events) hit. It was really good in some ways -- lots to think about. I'm happy I did all of it. But I think I need to approach Fantasy Camp differently if I also intend to Artfight again next year.

I don't know what "making a decker jam project" looks like for me if it's not relying on me doing a ton of new drawings for it's appeal? I'll give it some thought....

But also who knows what modules and contraptions we'll have available next time.

Anyway, Thanks for reading.

The question "How do you do this in Decker?" was asked and I am compelled to answer.

This is a long post! It's so long! Don't open it on your feed unless you're really interested! Open in New tab or something!

I guarantee things in here will be confusing. I am so happy to clarify anything if anyone is interested.

Getting set up for this kind of thing

Step 1: Run Decker
Step 2: Toolbars

Find them at Decker > Toolbars in the menu.

They give the ability to switch between interact mode and widget mode with a single click (always useful) and also you can see all your drawing tools on the left side of the screen.

On the right side it will show either the 1bit pattern options OR the colors in the current 16-color palette. You can switch back and forth and use any and all of the options in your project. But the toolbar will only show one 'mode' at a time.

You can switch to color 'mode' while any drawing tool is active in the menu with
Style > Color

(It's good to keep in mind that some menus are context specific. For example, you can't see the menu option to change fonts unless you're interacting with text. )

If you would like to change the default color palette... there's a few ways. The easiest, as of the most recent version of Decker (1.49), is to drop a .hex file onto the program window. Just drag and drop.

You can get a premade hex file from places like lospec (maximum 16 colors for Decker, have fun!) or by making one. To make one you can save a vertical list of hexcodes as a .txt file, rename the file extension to .hex -- and then drag it onto Decker (1.49 or later) and there you go.

Then there's a lot of drawing to do, if you're me.

I'm going to briefly touch on the art side of it. I only work directly in Decker these days. Lots of other people prepare work outside of Decker and import it -- I haven't done it enough to have any wisdom on the subject.

But hey I just recorded a little timelapse of me a drawing a card in the style of the above project and making some small widgets for it. Clip time is 3mins30 and the actual time was ~30 minutes.

This is not a tutorial please don't worry about trying to understand the menus at the speed it's going. It's just... a visual example because I think sometimes it's hard to know what goes on inside other people's processes.

I hope it makes it seem less... Intimidating? Drawing is drawing, but the tools are pretty straightforward. Good ol' reliable line tool and fill bucket. And I hope this shows that the scripting side of it, even if it's unfamiliar at first, isn't a huge undertaking. It's just a matter of knowing some of the lil' things you can do, and building on that knowledge over time.

There are two modules I use with the widgets at the end of the video clip (the 'zazz.bob' and 'dd.' stuff) and I know it goes by very fast. For the record, the things I did in the clip are straight out of the examples in the official module decks that come with downloadable Decker. So you can find them in there with the documentation -- but also I'm happy to explain them if needed.

Zazz handles some kinds of animations, and Dialogizer is a robust and customizable dialog box handler.

Modules are really good at taking over the hard work for specific kinds of tasks, like certain types of moving images, or grid-based pathfinding, or dialog boxes which can also be written in a less-codey(!) way if you're doing something that uses them a lot... like a visual novel.

You can always transfer modules into your cool new deck from their example decks with the File > Resources menu. You can transfer other useful things with that menu as well, like fonts and sound effects.

But now it's time to look at my old code and figure out what the hell was going on.

Here's the gif again, above. And below is... an attempt to explain.

These are almost all 'canvases' -- the image container widget.
Widgets are... interactable things, scriptable things. Things that exist on the card.

And there's a couple things happening here.

1. Any canvas can be made 'draggable', so it can be moved around in interact mode.
2. The 'rect' module can do things like detecting if a draggable canvas is overlapping something else -- in this case, rect is using the invisible 'slot' and 'area' canvases to tell if tell if the draggable things are in the right place.
3. Changes to visibilty. Usually between "None" (completely invisible) and "transparent" (any white area of the canvas that hasn't been specifically made opaque white will become clear).
4. Copy and paste. Copy image from one canvas, paste it on another one. Easy.

Here's all the stuff in the bag, in all variations:

These "strap"s, "gem"s, and "dia"s are copied and pasted onto the "real" versions of the canvases that are in the scene to make things look like they've changed.

On the other hand... When the invisible button (buttons: widgets that do things when you click 'em.. usually) that opens the little net pouch thing is clicked, netclosed is set to "none" visibility, and netopen is set to "transparent"(and so, becomes visible) and it looks like the pouch opened. In the same script, the tiny diamonds are set to draggable so they can be pulled out and put into the thingy on the wall.

Here's a script. The one inside "gem1".

on release pos do
if me.draggable
 if rect.overlaps[me area1]
 sleep[5]
   me.pos:rect.constrain[me slot1]
   sleep[10]
 gem1.paste[gem1active.copy[]]
  gem1.draggable:0
  sleep[15]
  canvas1.toggle["solid"] 
  gem2.draggable:1
  sleep[20]
  pock2.paste[strap0.copy[]]
  end
 end
end

It's not perfect, but let's... let's try. Ignore the 'sleep's -- those are just pauses for pacing.

• When the mouse click that was holding me is released
• if I (gem1) am draggable
• AND if the rect module sees my position as overlapping area1
• Then constrain my position to slot1 (a smaller area, which puts gem1 in a specific place)
• Paste the active version of my gem sprite onto my canvas
• Make me stop being 'draggable' (because I'm in the right place! hooray!)
• Show canvas1 (this is the animation in the wire which has been running the whole time invisibly.... I guess I forgot to name it)
• Make gem2 draggable (in case it is unfamiliar... 1 is true, 0 is false)
• Paste the "open strap" sprite onto gem2's "pock"et strap (just a visual detail)
• end, end, end (and we're done.)

That is... most of what's happening here, visually. Looks cooler than it actually is.

If some of it is confusing.... I get it. This is the project where I learned these things. I found it confusing at the time.

This part isn't about helping at all. I'm just talking about what I want to now.

Hey, have a tiny piece of the project as an unlocked deck. You can go into widget mode and look at the mess. There is....... a lot of stuff I would change if I made it now. But y'know what.... I was really proud of this at the time and I kind of still am.

There's also two(!) eggbugs in there.

Also... awhile ago I made another intro level thing and put it in the worst possible for beginners. It's a post-game bonus section of a previous project on itch.io -- you can skip the 'game' part of it by clicking here on the main screen:

Sorry for the long post. Decker is... flexible? And in a way it can be hard to figure out how you're "supposed to do things" -- because there isn't one correct way. You can make beautiful games with no scripting at all. Or you can learn some scripting if you think it's cool or useful for you.

You can use the drawing tools, or import images, or make things with no art at all. It's all good. BUT.... if you're into the kind of thing I tend to publish, then I hope something in this was helpful.

I'm going to shut up. But if someone asks me a question I will happily start talking again okay bye

A friend of a friend has made 'inktober' but for goofy websites. since people are talking about making websites for after cohost goes read-only it seems like maybe the perfect opportunity to put your money where your mouth is:
https://weirdweboctober.website/

If you want to make a weird interactive thing for the web, you could always use Decker!

You can even make a tiny Deck and put it in an iframe if you want.