Stunning, beautiful. Incredibly dreamy. Good work!
A member registered Mar 18, 2017 · View creator page →
Creator of
A tiny non-adventure in a mysterious forest.
Play in browser
Recent community posts
I do think most of these things are intended behavior.
But, hmm, yeah I do see what you mean about the palette turning gray in the "Stroke..." menu while transparency mask is active... That's confusing.
I hadn't noticed that because I tend to use the Toolbars.
(Found in the menu bar under Decker > Toolbars)
This is with transparency mask on -- the background transparent white has turned gray but the sidebar palette white (which is now opaque) still looks white.
But yeah, I see what you mean about it being weird when you're working directly from the menu bars at the top.
For the other stuff, the difference between the two black colors isn't relevant very often. For most users, I think just using '1' all the time is fine.
For '0' and '32' however... it generally makes sense to me that you can only draw with opaque white while transparency mask is active because it's also one of the only times when you can see the difference between the two whites. And I tend to think of this use of the word mask not as in "thing you look through" but as in "thing that masks off areas of white" like masking fluid in watercolor painting, but that might just be my own association with it.
Anyway I wonder if the toolbars would be helpful to you for now? It doesn't answer all of the things you mentioned but it does sidestep one issue (and I think they're very useful in general while drawing in Decker).
Well, gosh! I'll try!
Where to begin.... Yeah, if you're drawing directly in Decker you create the image data by drawing with the usual tools on the back of the card and then Copy -> (switch over to widget mode) - > Paste as new Canvas.
(And just in case anyone didn't know... turn on the Toolbars in the Decker menu... only one click to switch between modes and tools. Very handy.)
The best and most flexible place to draw is directly on the card but Canvases ("the image container widget") interact more easily with scripts and modules. And therefore, usually, animation. So, yep, move things into canvases when you're done drawing (or if you're ready to test something before you commit the time to finish your drawing! )
(The thread linked previous is an exception! That one was about making a looping animation while still being able to draw on the card.)
---
Depending on what I'm doing I will sometimes layer canvases on the card... it works just fine for small stuff.
Basically, to do that, you change the visibility of the canvas widgets in a script -- hiding one and showing another in the same moment, and then creating a delay before doing the same thing again for the next image.
But... if you're making something super complicated... well, having several stacks of overlapping canvases can get a little unwieldy?
Especially if you need to edit one single frame of it later. (Ask me how I know... no, actually don't....)
But there are other ways to do it! These days I often use copy[] and paste[] in a script instead. That is to say.... the image information is still all stored in canvases but instead of changing the visibility of lots of things in a big stack of widgets, I just change the image data on one single Canvas.
Soooo, examples:
Changing the visibility of three stacked canvases with .show (and sleep[] for the timing) might look like this:
frame1.show:"solid" sleep[10] frame1.show:"none" frame2.show:"solid" sleep[10] frame2.show:"none" frame3.show:"solid" sleep[10] frame3.show:"none"
While copy[] and paste[]-ing three images onto one canvas in sequence might look like this:
targetcanvas.show:"solid" targetcanvas.paste[frame1.copy[]] sleep[10] targetcanvas.paste[frame2.copy[]] sleep[10] targetcanvas.paste[frame3.copy[]] sleep[10] targetcanvas.show:"none"
Personally, I find the second one easier to write and read but everyone is different and there's more than one way to make a sequence of images play. :)
A bonus visual example of what I mean.... take this animation:
In widget mode it's just one canvas and a button...
And over here (stored somewhere else) a sequence of images canvases that are 'played' on that one canvas when you click that button.
And this way it's still easy to copy the image back out of a canvas, edit it, and then paste it back in if I need to.
---
I tend to think of Zazz as a set of small tools for creating animated flourishes -- everything it does creates a loop but there's a few different kinds of loops.
And all of these things could be done by scripting it yourself! (but having it ready to go in a module makes it much simpler.)
Listing off a couple zazz options that I think are handy for the stuff I like to make:
.flipbook[] is like a normal looping gif where it plays a series of frames over and over on a canvas (also the thing in the previously linked thread is a secondary usage of flipbook -- to test how animations look, even if they're going to be handled by something else when they're done)
.bob[] makes a canvas bob up and down
.march[] makes a canvas move around different waypoints on the card.
And those are all really nice and useful on their own, but you can also mix them together, like this:
The butterfly's wings are a tiny .flipbook[] animation, the small up and down movement is from .bob[] and the back-and-forth is because the butterfly is .march[]-ing between waypoints (hidden widgets) on the two flowers.
Or, here's a case of using zazz.flipbook[] as a small part of a bigger interactive kind of thing:
In this example, a draggable canvas is being used with another module (called 'rect', from the 'draggable' example deck) that helps build certain kinds of interactions when you want your player to be able to drag things around.
When the rect module sees that the draggable canvas is overlapping the hidden 'rect'angle (lol) of the treasure map, it plays a zazz.flipbook[] animation on the canvas as if it's looking for something.... And then the thingy turns yellow if overlapping the 'rect'angle of the "X".
These are very silly little examples, but hopefully this helps explain my perspective on Zazz.
It's a set of tools that are very helpful for certain kinds of looping effects and they generally combine well with other things.
---
So, for Puppeteer... the name is very well chosen.
We're preparing Puppets and Props for a Decker stageplay.
They move around positions on the card however we tell them to.
The main 'downside' is that there's a little more set-up involved here. It's really not bad at all but, for example, each Puppet needs it's own separate storage card (dressing room?) full of all the canvases for each of it's poses and expressions. It takes little longer to get everything put in the right places, but it's very powerful and flexible after that.
And planning a complicated scene with Puppeteer is a bit like going through rehearsals of a stage production. Tweaking the timing and positions and what expressions the actor-puppets should have, and so on.
(Obviously this is more of a 'vibes' explanation than a technical one....)
If zazz was the tool for looping animation, I usually think of Puppeteer as a tool for things that move forward in time. Cut scenes, visual novel conversations, interesting flourishes (sometimes).
This is one of the little examples from backstage in The Riddle:
You can see the little circles (tiny buttons) that are used to mark locations, and the directions for telling the bird puppet where to move around, how fast and when to change pose.
And technically Puppeteer does have some 'looping' traits such as the built-in blink, the mouth movement while talking with Dialogizer (you still have to draw them, but the coding side is handled) and fancy puppets -- which are probably a little too much for this conversation, but there's even more complexity available here for someone comfortable scripting in Lil....
But yeah, generally I would use Puppeteer for "scenes", rather than loops or idle animations.
---
And one more option for making moving pictures: Contraptions.
These are really just basic widgets and Lil scripts pre-assembled together into a new kind of custom widget -- you can make your own but also there's a bunch of options already pre-made for your convenience in the contraption bazaar thread.
This small section of Desker has two small zazz.flipbook[] animations -- the cat's tail and the curtain.
It also has three contraptions -- the eye contraption for the cat's eyes, the pop out contraption for the window opening and closing, and the rotor contraption for the inside of the plasma ball in the top right.
---
Anyway, this was a lot. Sorry if it's confusing!
Basically, we have a lot of little tools available that have slightly different abilities and no one single "correct" workflow.
It's completely fine to just use what makes sense to you for now, and then try new things later when you feel like it.
(And, of course, I'm happy to clarify anything I said here... !)
Since you've been pointed towards zazz already I'll mention that there's a way of setting up zazz.flipbook[] (looping animations from frames) that's helpful for drawing animations directly in Decker. I posted a (somewhat excited) thread about it a while ago when the option came out.
Basically instead of having the animation frames stored in an image container Canvas, they stay on the card where you can continue to draw on them. And you can check how the animation is looking by switching between Drawing mode and Interact mode whenever you want... then go back to animating!
If this is what you're interested in and if there's anything confusing about it I'm happy to clarify. (I'm sure I skipped over things that seemed obvious to me at the time, for example....) I know that a thing that I didn't mention in that thread is using the grid overlay (not the grid widget, the "View" Menu > "Show Grid Overlay" menu option) makes using zazz in this way a lot easier.
"Show Grid Overlay" and "Snap to Grid" helps make the widget guide for your flipbook 'frames' exactly the right size with less fuss. You can change the grid size to match what you're doing with the "Grid and Scale..." option in the same menu.
And if you're not sure what size of 'frames' you're working with, "View" > "Cursor Info" can help. The first two numbers are the cursor's position on the card (not needed for this), the second pair of numbers are the size of a selected + clicked widget or the current selection.
I really enjoy animating little things in Decker so please ask if there's anything you're having trouble figuring out.
So, when you use Decker's main menu bar to got to File > Properties... this thing pops up.
The "Protect..." button here is the specific thing that lets you save a locked deck. Normal saving will save your deck unlocked (with menu bars), because you needed the menu bars to get to the standard save menu option.
If you're running Decker on your computer (it's a little different in Web Decker, but similar enough) the bottom of this "Protect..." save menu looks like this:
That "Save locked deck." note on the screen will be there instead of the usual note if you're in the right place to save a locked version of your project!
(And even though it only says 'deck', it can still be an html file).
Hopefully this clarifies a little bit how it works? But if you're still having trouble please let us know for sure what steps you're taking!
Hello! Once again I'll use machine translation for the Japanese sections. I'm sorry if anything is difficult to understand.
こんにちは！日本語の部分では、今回も機械翻訳を使います。わかりにくいところがあったらごめんなさい。
Currently the code to play the music is in a button?
現在、音楽を再生するためのコードはボタン内にありますか?
The code section inside the button has the words "on click do" written in it, right? Which means "when this button is clicked, do this".
ボタン内のコードセクションには、「on click do」のようなテキストが書かれていますよね? これは、「誰かがボタンをクリックすると、これが実行されます」という意味です。
In this case, it might be more useful to put the instruction to play music in the "Card Script".
この場合、音楽を再生する指示を「Card Script」に入れると便利かもしれません。
You can find the Card Script in the menu here.
ここのメニューに「Card Script」があります。
Inside the card script, there is text that says "on view do" with the meaning "when this card is viewed, do this."
カードのスクリプト内には、「on view do」というテキストがあり、「このカードが表示されたら、これを実行します」という意味です。
The code to make music loop would look something like this. Replace "song" with what your audio clip is called.
音楽をループさせるコードは次のようになります。「song」をオーディオクリップの名前に置き換えてください。
on view do play ["song" "loop"] end
It's possible to play different music on different cards this way.
この方法では、異なるカードで異なる音楽を再生できます。
Or, if you want sudden silence, you can stop the music for a specific card.
または、突然静かにしたい場合は、特定のカードの音楽を停止することができます。
on view do play[0 "loop"] end
I hope this answer relates to your question.
この回答があなたの質問に関係するものであることを願います。
Sometimes a simple looping clip is all you need for atmosphere, so I'll leave it here for now.
雰囲気を出すには単純なループ クリップだけで十分な場合もあるので、ここではそのままにしておきます。
If I misunderstood something, it's okay to post both your original Japanese question and the English machine translation next time.
もし私が何かを誤解していたら、次回は元の日本語の質問と英語の機械翻訳の両方を投稿しても大丈夫です。
Good luck with your project! And please feel free to ask questions any time. 🙂
プロジェクトの成功をお祈りします。また、いつでもお気軽にご質問ください。
I'm so glad I could help! 😊
お役に立ててとても嬉しいです！
I'll explain some general information, and then give specific directions for your question.
まず一般的な情報を説明してから、ご質問に対する具体的な指示をさせていただきます。
The default Decker color palette looks like this.
デフォルトの Decker カラーパレットは次のようになります。
(this image was rotated. この画像は回転されました。)
But in my example I changed the color palette to be full of gray tones.
しかし、私の例では、カラーパレットをグレートーンのみに変更しました。
If the only thing you need to do with color is to import images with the appearance of anti-aliasing then it's simple to replace all of them with gray.
色に関して必要なことがアンチエイリアシングの外観を持つ画像をインポートすることだけであれば、それらすべてをグレーに置き換えるのは簡単です。
You can also replace just a part of the color palette if you want to use other colors for another purpose.
別の目的で他の色を使用したい場合は、カラーパレットの一部だけを置き換えることもできます。
There are two important parts for successful color image import.
カラー画像のインポートを成功させるには、重要な部分が 2 つあります。
1. Prepare the "color palette" for your project
プロジェクトの「カラーパレット」を準備する
The color palette can be changed with a variety of tools, but the easiest way is to drop a .hex file onto Decker.
カラーパレットはさまざまなツールで変更できますが、最も簡単な方法は、.hex ファイルを Decker にドロップすることです。
(The .hex file is usually a .txt file that contains a list of color hexcodes and had it's file extension changed.)
(.hex ファイルは通常、カラー 16 進コードのリストが含まれ、ファイル拡張子が変更された .txt ファイルです。)
I apologize that I don't know a Japanese language website which has pre-prepared hex files for game development. I'll link to an English language site.
申し訳ありませんが、ゲーム開発用の 16 進ファイルがあらかじめ用意されている日本語の Web サイトを知りません。英語のサイトにリンクします。
https://lospec.com/palette-list/grayscale-16
If this list of gray tones seems acceptable to you, you can download the "HEX File" under the color preview and drag that .hex file onto decker to change the color palette.
このグレートーンのリストが適切と思われる場合は、カラープレビューの下にある「HEX File」をダウンロードし、その .hex ファイルをデッカーにドラッグしてカラーパレットを変更できます。
It's very simple to prepare your own .hex file if you know what colors you want. And also it's possible to edit the colors in different ways, such as only changing one color at a time.
必要な色がわかっていれば、独自の .hex ファイルを作成するのは非常に簡単です。また、一度に 1 つだけ変更するなど、さまざまな方法で色を編集することもできます。
But hopefully this explanation is straightforward enough to let you work on your project.
ただし、この説明がプロジェクトに取り組むのに十分なほどわかりやすいものであることを願っています。
2. Importing Color Images into Decker
カラー画像をDeckerにインポートする
The easiest way is to make sure you're using version 1.51 which came out on October 25th, 2024.
最も簡単な方法は、2024 年 10 月 25 日にリリースされたバージョン 1.51 を使用していることを確認することです。
This recent update allows for importing color images by dropping them on the program, while "Style -> Color" is active.
この最近のアップデートでは、「Style -> Color」がアクティブな状態で、カラー画像をプログラムにドロップしてインポートできるようになりました。
(There are other ways to do this but I wanted to make it as simple as possible.)
(これを行う方法は他にもありますが、できるだけ簡単にしたいと思いました。)
Other Notes:
その他のメモ:
It's important to prepare your color palette first.
最初にカラーパレットを準備することが重要です。
Like with 1-bit images, the best time to resize your image is right after import.
1 ビット画像と同様に、画像のサイズを変更する最適なタイミングは、インポート直後です。
At this time, Decker can read a larger amount of data from your original image.
この時点で、Decker は元の画像からより多くのデータを読み取ることができます。
Resizing an image or changing the palette later can only affect the image data that is already inside of Decker.
後で画像のサイズを変更したりパレットを変更したりしても、影響を受けるのは Decker 内にすでに存在する画像データのみです。
I hope this helps! Please let me know if you have any other questions.
これがお役に立てば幸いです。他にご質問がございましたらお知らせください。
Hello! Thank you for coming back.
こんにちは！また来てくれてありがとう。
I'll write about various things, but I might not have the answer you needed. I'm happy to try again if this isn't correct.
いろいろ書きますが、必要な答えではないかもしれません。間違っていたらまたもう一度試してみます。
日本語の部分は機械翻訳を使用しています。 不正確だったりわかりにくかったりしたらごめんなさい。
-------------------------------------------------
Deck Resolution (デッキ解像度)
For now, the way to change the resolution of a deck is to open it in a program that can edit text.
現時点では、デッキの解像度を変更するには、テキストを編集できるプログラムでデッキを開く必要があります。
When the deck is opened in this way, near the top there will be a line that says size:[512,342].
この方法でデッキを開くと、上部近くに size:[512,342] というテキスト行が表示されます。
This is the pixel resolution of the deck. The first number is horizontal. The second number is vertical.
これはデッキのピクセル解像度です。最初の数字は水平方向です。2 番目の数字は垂直方向です。
You can edit these numbers to your preferred size. After that, save the file and open your deck again in Decker in the normal way.
これらの数字は好みのサイズに編集できます。その後、ファイルを保存し、通常の方法で Decker でデッキを再度開きます。
Because there's no ability to "zoom out" from a full sized deck at this time I recommend making sure that your deck's resolution is smaller than your screen's resolution.
現時点ではフルサイズのデッキからズームアウトする機能がないため、デッキの解像度が画面の解像度よりも小さくなるようにすることをお勧めします。
On larger deck resolutions, the Decker user interface may appear small. This is normal. Decker scales up the user interface for smaller decks. It doesn't do this on large decks.
デッキの解像度が大きい場合、Decker ユーザー インターフェイスが小さく表示されることがあります。これは正常です。Decker は、小さいデッキに合わせてユーザーインターフェイスを拡大します。大きいデッキでは、この処理は行われません。
-------------------------------------------------
A note about Image Resolution (画像の解像度に関する注意事項)
When an image is imported, there is a dotted box around it. At this time an image can be resized freely.
画像をインポートすると、画像の周囲に点線のボックスが表示されます。このとき、画像は自由にサイズを変更できます。
After it has been placed on a card, any resize action can only use the information in the image that's already inside decker so the quality will vary.
カード上に配置すると、サイズ変更アクションでは、Decker にすでに存在する画像データの情報のみを使用できます。
-------------------------------------------------
A note about Image Importing, Grayscale, and Anti-aliasing
画像のインポート、グレースケール、アンチエイリアスに関する注意事項
In the latest version of Decker (1.51) it's easier to import color images into the program.
Decker の最新バージョン (1.51) では、カラー画像をプログラムにインポートするのが簡単になりました。
"Color" can be found in the menu under "Style".
「Color」は「Style」のメニューにあります。
Selecting this will change the color and pattern selection tools (and the toolbars if they are visible) to a 16 color palette instead of 1-bit patterns.
これを選択すると、色とパターンの選択ツール (およびツールバーが表示されている場合はツールバー) が 1 ビット パターンではなく 16 色パレットに変更されます。
Any image you import while in "Color mode" will be imported into this palette of colors instead of black and white patterns.
「カラー モード」でインポートした画像は、白黒パターンではなく、このカラー パレットにインポートされます。
You might be thinking "Huh? Color?"
「え？カラー？」と思われるかもしれません。
If you want the effect of anti-aliasing you can prepare a color palette of grays and import as a color image.
アンチエイリアス効果が必要な場合は、グレーのカラーパレットを用意し、カラー画像としてインポートすることができます。
This kind of "softer pixels" is possible, if it would suit your project.
プロジェクトに適していれば、この種の「柔らかいピクセル」も可能です。
If changing the color palette is unfamiliar to you I'm happy to explain more using this style of post.
カラーパレットの変更方法がわからない場合は、この投稿形式で詳しく説明します。
---------
Some thoughts on "Images" and "Canvases"「画像」と「キャンバス」についての考察。
This part is probably not what's needed. But I'll explain because I think it might be useful in some cases.
この部分はおそらく必要ありません。しかし、場合によっては役立つかもしれないと思うので説明します。
A 'canvas' is a kind of container widget for 'images'. The 'image' is what you see.
「キャンバス」は「画像」用のコンテナ ウィジェットの一種です。「画像」とは、目に見えるもののことです
Canvases can be resized freely but it doesn't change the size of the image, right?
キャンバスは自由にサイズを変更できますが、画像のサイズは変わりませんよね？
In this case it can be helpful to think of the digital canvas as a physical "canvas" and the image as paint. Even if the canvas is cut or extended somehow, the 'paint'(Image) doesn't change in the same way. And image data can vanish if "cut away".
この場合、デジタル キャンバスを物理的な「キャンバス」、画像をペイントと考えると便利です。キャンバスを何らかの方法で切り取ったり、拡張したりしても、「ペイント」（画像）は同じようには変化しません。また、「切り取られる」と画像データが消えてしまうこともあります。
Code and other tools can interact with canvases in a variety of useful ways. But they do behave a bit differently than images.
コードやその他のツールは、さまざまな便利な方法でキャンバスと対話できます。しかし、それらは「画像」とは少し異なる動作をします。
Often, you'll want to prepare your image at the resolution you need it to be before putting it in a canvas.
多くの場合、キャンバスに配置する前に、必要な解像度で画像を準備する必要があります。
----
I hope this helps in some way, if your question is still not answered -- let's try again! 🙂
これが何らかの形で役立つことを願っています。質問がまだ回答されていない場合は、再度お試しいただければ幸いです。
Hello!
Is this what you're looking for?
When an image is imported into decker it's surrounded by a box with a dotted line. At that time you can adjust the brightness with the "J" and "K" keys on your keyboard.
(機械翻訳: 画像をインポートした後、点線のボックスが表示されている間に、キーボードの「J」と「k」を使用して画像の明るさを変更できます。)
If you have other questions, I'm sure the community here would be happy to help.
Good luck with your project!
Things to do before you d̶i̶e̶ live comments · Posted in Things to do before you d̶i̶e̶ live comments
I love the way this looks! Wow!
Okay, I'm coming at this from the perspective of an artist who usually just uses the tools available, so someone else will have to give you an elegant example of the code solutions -- they definitely exist. I'm just the wrong person to show you.
I think the name tag should be fine to do with code but the sketch portrait that appears at slightly different tilts has a potential style issue that's jumping out of me.
You can see an example of both the visuals and the scripting involved in making an image rotate in Decker with this post over here about the the rotor contraption and you might notice some slight digital 'crunchiness' and distortions happening with the lines in the example gif. It's not very noticeable when the image being rotated is also digital-looking but I think it might be a problem with certain other styles -- such as natural looking sketches and other paper-like assets that want to maintain that real paper feeling. This is an issue that can come up for any program working at this scale that's trying to rotate raster images without anti-aliasing or some other kind of visual smoothing.
If those small distortions don't feel right for the style of your project then I'd suggest preparing any tilted versions of your assets externally in an art program that's able to use things like anti-aliasing before importing them into Decker.
After that you can treat them as animation frames either in existing tools like zazz (which can play a loop) or puppeteer (it's a bit more work to set up but it might be good if you have reasons to move your collage pieces around the screen) or you could definitely code your own solutions that suit your project.
But the target style is certainly possible -- I disassembled your example gif (very roughly -- sorry for the jagged edges) and rebuilt it in Decker. I used your collage piece animation frames as they existed in the gif and zazz.flipbook[] to play them in loops -- one for the name tag, one of the sketch -- on top of the background which is an image directly on the card.
And I think it looks okay as a starting point! Not too different from the example. But there's more than one way to set things up depending on what kinds of things you want to do with your collage pieces once they're inside the deck. And I'm happy to help you figure that out if you're interested or have any other specific questions. :)
Also important to note: my reconstruction of your gif is in a 16-color Deck where the 'color' palette is a range of greyscale shades. The "All About Color" tutorial deck may be some help, for anyone unfamiliar with importing "color" (or grayscale) images into Decker.