Every time I thought I had found everything, there was something more to find. Really cool!
ahmwma
Creator of
Recent community posts
Yep! No problem!
By default, Decker has this little event handler built-in which lets people navigate between cards by arrow key:
on navigate x do if x~"right" go["Next"] end if x~"left" go["Prev"] end end
But we can change that. If you want to shut it down completely for the whole deck we can head up into the Deck Script.
In the way that there's widget scripts and card scripts, there's also a deck-level script that you can find in the menu under File > Properties > Script...
And if you just throw a little
on navigate do end
up there, it'll override the default arrow key navigation behavior and the arrows will do absolutely nothing.
-----
This isn't what you asked about, but this is something to know about the other button in the Properties menu.
Protect...
A protected deck is one without a visible menu bar, where the user is essentially locked into Interact mode.
You might choose to protect your deck at the very end (which also prompts you to save it as a new file, so you can keep the un-locked version of the deck for yourself) to give readers/players a more streamlined experience.
You certainly don't have to, but it sounds like it might be a good option for your project.
(It sounds very cool, by the way!)
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. 🙂
プロジェクトの成功をお祈りします。また、いつでもお気軽にご質問ください。
This is odd... huh.
I'm assuming that you've checked that decker hasn't been muted in the volume mixer. Or that it's otherwise had it's audio assigned to a device that can't actually play audio... (I've had this happen with Windows...)
If you don't mind answering, what OS are you using? And has audio ever worked for you in native-decker in the past?
A really wonderful article. I knew it was going to be particularly good as soon as I saw the Marshall McCluhan quote. :)
And it was nice getting to read more about your insights about the medium as a deckmaker (deckmancer!). The potentially dreamlike time and space relationships between scenes, between cards, is something I haven't played with enough but I'm always fascinated by it in other people's work.
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! 🙂
これが何らかの形で役立つことを願っています。質問がまだ回答されていない場合は、再度お試しいただければ幸いです。
Things that are inside an `on view do` script will usually continue to happen as long as you're viewing the thing it's attached to.
I sometimes set up a hidden (visibility: none) checkbox on the card and an ' if...' statement inside of the `on view do` script.
And then I make sure that something unchecks the checkbox when the autoplaying event is finished, so it doesn't play again.
on view do if autoplay.value #if the checkbox named 'autoplay' is checked...# #(your dialogizer stuff goes here)# autoplay.value:0 #uncheck the box# end end
You can check your checkbox manually or you can set up a script to do it before you leave the previous card.
Something like this could be inside the previous card's exit button. (With the correct names for your project)
on click do cardname.widgets.autoplay.value:1 go[cardname] end
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!
For the moment there are things like the Decker Tour (the thing that loads when you open Decker).
Anytime you see something that looks useful to you, you can switch to widget mode (Tool > Widgets in the menu) and investigate how it was made. The introductory concepts in the Tour (making widgets, what different kinds of widgets do, how to connect cards together, etc.) are the building blocks of any project.
There are also the example decks (in the 'Examples' folder that comes with downloadable decker) -- many of them will not be relevant to a rolodex, but it's the same simple process (Tool > Widgets) to start poking around what made things work. If you have specific goals or questions for the project you have in mind, then I'm sure someone here can answer questions or explain the concepts you need in a newbie-friendly way.
Well, a bonus for you. I asked Internet Janitor about this because I was curious. It's his script and my cobbled-together examples.
Here is a two-card deck showing two ways of putting this together.
I'm happy to take this down once you've seen it/saved it if you prefer, but I hope it's of some use to you.
Have fun!
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.
Hey. I want to talk about the small but cool update with zazz!
Generally, zazz.flipbook[] is a handy tool for playing looping animations on your cards.
You set up your frames in one place -- in the previous version you would have the option of pointing to a whole card or to a single canvas -- and then throw a little script together to tell zazz.flipbook[] the target, source, desired speed (and, if needed, the number and order of frames). Which can look kinda like this:
on view do zazz.flipbook[target source 0.01 (range 6)] go[card] end
The new zazz 1.1 module adds the option of using a widget to indicate the area on the card that contains your frames instead. (I'll be using buttons.)
If you haven't seen it yet, I recommend taking a good look at the example gif in the 1.50 devlog.
Some interesting things are going on, from my perspective:
- The frames are stored directly on the card -- but they can be anywhere on the card. And you can have as many sets of frames as you can fit on screen.
- The frames are not stored in a canvas -- so they can continue to be edited in drawing mode with the full range of tools.
- Once your target canvas, source widget and zazz.flipbook[] are set up... you can look at how your animation is coming together at any time with no extra fuss.
- It is fast and painless -- especially with toolbars or keyboard shortcuts -- to switch between making changes (drawing) and seeing what they'll look like animated (interact).
I am so excited about this, you have no idea. I love zazz as a module anyway. But I think this has a lot of potential as a tool for preparing animations that aren't intended to stay in zazz.
- How about designing your walk animations for the path module's follower contraption?
- Or slowly cycling through the expressions of a character's sprite to make sure they all match?
- Want to animate something with a special flourish? Whatever you do with it later, this is a nice way to test your ideas.
In a previous project, I had a big sphinx character with separate puppeteer pieces for different moving body parts -- head, paws, wings -- and a zazz.flipbook[] loop for the tail.
But I did sometimes run into the problem of going off-model or pieces not matching when I tested them later -- much later than I should have. I'm looking at this and thinking it'll be a better way of monitoring whether or not things will continue to fit together throughout the whole process.
This little guy may not be as elegant as the Big Sphinx but he's trying to show what I mean.
This is all I've made with it for now, but I think there will be more kinds of niche circumstances that this would be useful for.
All of these examples (except big Sphinx who has a different color palette) have been shoved into a small deck. The sprites are directly on the cards and you can doodle on them and see the animation change if you like.
I think this rocks. And I would be very happy if people gave this a try, as a new tool in their deckmaking. :)
Thank you for starting this thread! It's a great idea.
My Decks published here on itch.io
Desker -- A jam project where you can poke around a Desk. This was an excuse to use lots of random things from the contraption bazaar (here on the forums).
The Riddle of the Temple-- It's pretending it's an adventure game but I was experimenting with using the puppeteer module for animating scenes. It's pretty short and sweet. (There's also a small "How this was made" section at the end if anyone is interested!)
Tea and Bread -- Another jam project, sadly a bit time crunched at the end (and submitted late). The ideas were fun but there's some rough spots in it that I haven't gone back to fix yet. I didn't upload a deck directly this time but I also didn't do anything about navigate[] so you can arrow key over to the "backstage" cards to find the unlock button if you want to investigate the tea-and-bread-making process.
Not published here:
colortest - Another kitchen scene, made a long time ago. My first time using color in Decker and my first time making an animation, even though it's small. There's just a few things to click on, nothing happens after that.
"Beacon Puzzle" - an abandoned, over-ambitious myst-inspired project that is... a mess. Maybe it will live again, who knows. We have so many more tools now than when this was made. I uploaded a small section of it to show someone a while ago. As well as a few images: [1] [2] [3] and a short gif of a "puzzle".
And, as part of that conversation, I also made a video timelapse of (current me) drawing a similar looking card in Decker and putting some small widgets on it.
Path Module Tests - Just messing around with the new path module to see if I could use it to make something that looked like an isometric map, or like a storybook scene. There would be other wrinkles to iron out in either case -- but it's something I'd like to see in Decker someday.
A slight variation on the fontedit suggestion is to make a second version of the font to hold your missing characters.
For example, you could write 'n' in the standard Decker body font and then switch it over to body2 to make it appear as 'ñ' instead.
Edit: Brainstorming a sillier way...
As long as you're only using ñ inside of 'rich text' fields you can use an image of the letter.
%%WGT0{"w":[{"name":"lettertest","type":"canvas","size":[5,12],"pos":[206,149],"locked":1,"border":0,"image":"%%IMG0AAUADABQoADgkJCQkAAAAA==","scale":1}],"d":{}}
If you paste this into your deck it will make a small canvas. You can "Edit > Copy Image" and then paste it while editing a text field when you need an ñ. This was made to match the 'body' font.
Because it's an image it doesn't work exactly the same way as letters do. It's fine with 'solid' fields, can work with transparency if it's prepared right and it doesn't really work with 'inverted' -- you'd have to make an separate inverted image for that.
You'd also need a separate little canvas for "Ñ" and any other letters you need so... I would generally recommend fontedit as the solution. Especially since it's your mother tongue . 🙂 But if you're ever missing something you need... you can sneak it in with an image.
It's definitely possible. :)
A quick version of creating a draggable sticker from a canvas, borrowing from the magnetic poetry example:
on click do c:card.add["canvas"] c.draggable:1 #I'm calling the canvas that your user is drawing on 'source' for the purposes of this example# c.size:source.size #this makes the new 'sticker' canvas the same size as the one that we're getting the drawing from# c.paste[source.copy[]] #this copies the drawn image onto the new draggable canvas from the "source"# c.pos:(card.size-c.size)/2 end
This has been useful for me so I might as well put it here.
Palette Adjuster
A sort of supplement to Palette Import. If you only want to adjust certain colors this thing will let you change them one-by-one by entering individual hexcodes. The color boxes are previews of what you'll be replacing.
Be a little careful if you want to reverse or otherwise dramatically change the 1-bit color slots. This does not have the color sorting feature that PalImport does. Decker's user interface will be very difficult to navigate if you set both of the 1-bit colors to the same hexcode. :)
%%WGT0{"w":[{"name":"PaletteAdjuster","type":"contraption","size":[316,211],"pos":[98,66],"def":"PaletteAdjuster","widgets":{"field1":{},"button99":{},"button0":{},"whitehex":{},"blackhex":{},"yellowhex":{},"button1":{},"button2":{},"button3":{},"orangehex":{},"redhex":{},"magentahex":{},"button4":{},"button5":{},"purplehex":{},"bluehex":{},"button6":{},"button7":{},"button8":{},"cyanhex":{},"greenhex":{},"darkgreenhex":{},"button9":{},"button17":{},"button18":{},"brownhex":{},"tanhex":{},"lightgrayhex":{},"button19":{},"button20":{},"mediumgrayhex":{},"darkgrayhex":{},"button21":{},"orangepreview":{},"blackpreview":{},"whitepreview":{},"yellowpreview":{},"redpreview":{},"magentapreview":{},"purplepreview":{},"bluepreview":{},"cyanpreview":{},"greenpreview":{},"darkgreenpreview":{},"brownpreview":{},"tanpreview":{},"lightgraypreview":{},"mediumgraypreview":{},"darkgray":{}}}],"d":{"PaletteAdjuster":{"name":"PaletteAdjuster","size":[316,211],"margin":[0,0,0,0],"description":"Modify each color of your palette individually.","version":1,"image":"%%IMG2ATwA0wH/Af8BfACcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFABIBSQBBAQMAmAEFABIBSQBBAQMAmAEFABIBAgBFAQIAQQEDAJgBBQASAQIARQECAEEBAwCYAQUAEgECAEUBAgBBAQMAmAEFABIBAgBFAQIAQQEDAJgBBQASAQIARQECAEEBAwCYAQUAEgECAEUBAgBBAQMAmAEFABIBAgBFAQIAQQEDAJgBBQASAQIARQECAEEBAwCYAQUAEgECAEUBAgBBAQMAmAEFABIBAgBFAQIAQQEDAJgBBQASAQIARQECAEEBAwCYAQUAEgECAEUBAgBBAQMAmAEFABIBAgBFAQIAQQEDAJgBBQAGAZIABAEDAJgBBQAGAZIABAEDAJgBBQAGAQIUjgECAAQBAwCYAQUABgECFI4BAgAEAQMAmAEFAAYBAhSOAQIABAEDAJgBBQAGAQIUjgECAAQBAwCYAQUABgECFI4BAgAEAQMAmAEFAAYBAhSOAQIABAEDAJgBBQAGAQIUjgECAAQBAwCYAQUABgECFI4BAgAEAQMAmAEFAAYBAhSOAQIABAEDAJgBBQAGAQIUjgECAAQBAwCYAQUABgECFI4BAgAEAQMAmAEFAAYBAhSOAQIABAEDAJgBBQAGAQIUjgECAAQBAwCYAQUABgECFI4BAgAEAQMAmAEFAAYBAhSOAQIABAEDAJgBBQAGAQIUjgECAAQBAwCYAQUABgECFI4BAgAEAQMAmAEFAAYBAhSOAQIABAEDAJgBBQAGAQIUjgECAAQBAwCYAQUABgECFI4BAgAEAQMAmAEFAAYBAhSOAQIABAEDAJgBBQAGAQIUjgECAAQBAwCYAQUABgECFI4BAgAEAQMAmAEFAAYBAhSOAQIABAEDAJgBBQAGAQIUjgECAAQBAwCYAQUABgECFI4BAgAEAQMAmAEFAAYBAhSOAQIABAEDAJgBBQAGAQIUjgECAAQBAwCYAQUABgECFI4BAgAEAQMAmAEFAAYBAhSOAQIABAEDAJgBBQAGAQIUjgECAAQBAwCYAQUABgECFI4BAgAEAQMAmAEFAAYBAhSOAQIABAEDAJgBBQAGAQIUjgECAAQBAwCYAQUABgECFI4BAgAEAQMAmAEFAAYBAhSOAQIABAEDAJgBBQAGAQIUjgECAAQBAwCYAQUABgECFI4BAgAEAQMAmAEFAAYBAhSOAQIABAEDAJgBBQAGAQIUjgECAAQBAwCYAQUABgECFI4BAgAEAQMAmAEFAAYBAhSOAQIABAEDAJgBBQAGAQIUjgECAAQBAwCYAQUABgECFI4BAgAEAQMAmAEFAAYBkgAEAQMAmAEFAAYBkgAEAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAQUAnAEDAJgBBQCcAQMAmAEFAJwBAwCYAf8B/wH/Abo=","attributes":{"name":[],"label":[],"type":[]},"widgets":{"field1":{"type":"field","size":[74,12],"pos":[21,8],"locked":1,"show":"transparent","border":0,"value":"1-Bit Patterns"},"button99":{"type":"button","size":[40,18],"pos":[60,25],"script":"on click do\n patterns[colors.white]:\"%h\" parse whitehex.text\nend","text":"Apply"},"button0":{"type":"button","size":[40,18],"pos":[60,47],"script":"on click do\n patterns[colors.black]:\"%h\" parse blackhex.text\nend","text":"Apply"},"whitehex":{"type":"field","size":[44,18],"pos":[12,25],"style":"code","align":"center"},"blackhex":{"type":"field","size":[44,18],"pos":[12,47],"align":"center"},"yellowhex":{"type":"field","size":[44,18],"pos":[12,73],"style":"code","align":"center"},"button1":{"type":"button","size":[40,18],"pos":[60,73],"script":"on click do\n patterns[colors.yellow]:\"%h\" parse yellowhex.text\nend","text":"Apply"},"button2":{"type":"button","size":[40,18],"pos":[60,95],"script":"on click do\n patterns[colors.orange]:\"%h\" parse orangehex.text\nend","text":"Apply"},"button3":{"type":"button","size":[40,18],"pos":[60,117],"script":"on click do\n patterns[colors.red]:\"%h\" parse redhex.text\nend","text":"Apply"},"orangehex":{"type":"field","size":[44,18],"pos":[12,95],"style":"code","align":"center"},"redhex":{"type":"field","size":[44,18],"pos":[12,117],"align":"center"},"magentahex":{"type":"field","size":[44,18],"pos":[12,139],"style":"code","align":"center"},"button4":{"type":"button","size":[40,18],"pos":[60,139],"script":"on click do\n patterns[colors.magenta]:\"%h\" parse magentahex.text\nend","text":"Apply"},"button5":{"type":"button","size":[40,18],"pos":[60,161],"script":"on click do\n patterns[colors.purple]:\"%h\" parse purplehex.text\nend","text":"Apply"},"purplehex":{"type":"field","size":[44,18],"pos":[12,161],"align":"center"},"bluehex":{"type":"field","size":[44,18],"pos":[12,183],"style":"code","align":"center"},"button6":{"type":"button","size":[40,18],"pos":[60,183],"script":"on click do\n patterns[colors.blue]:\"%h\" parse bluehex.text\nend","text":"Apply"},"button7":{"type":"button","size":[40,18],"pos":[215,29],"script":"on click do\n patterns[colors.cyan]:\"%h\" parse cyanhex.text\nend","text":"Apply"},"button8":{"type":"button","size":[40,18],"pos":[215,51],"script":"on click do\n patterns[colors.green]:\"%h\" parse greenhex.text\nend","text":"Apply"},"cyanhex":{"type":"field","size":[44,18],"pos":[167,29],"style":"code","align":"center"},"greenhex":{"type":"field","size":[44,18],"pos":[167,51],"align":"center"},"darkgreenhex":{"type":"field","size":[44,18],"pos":[167,73],"script":"on change val do\n \nend","style":"code","align":"center"},"button9":{"type":"button","size":[40,18],"pos":[215,73],"script":"on click do\n patterns[colors.darkgreen]:\"%h\" parse darkgreenhex.text\nend","text":"Apply"},"button17":{"type":"button","size":[40,18],"pos":[215,95],"script":"on click do\n patterns[colors.brown]:\"%h\" parse brownhex.text\nend","text":"Apply"},"button18":{"type":"button","size":[40,18],"pos":[215,117],"script":"on click do\n patterns[colors.tan]:\"%h\" parse tanhex.text\nend","text":"Apply"},"brownhex":{"type":"field","size":[44,18],"pos":[167,95],"style":"code","align":"center"},"tanhex":{"type":"field","size":[44,18],"pos":[167,117],"align":"center"},"lightgrayhex":{"type":"field","size":[44,18],"pos":[167,139],"script":"on change val do\n \nend","style":"code","align":"center"},"button19":{"type":"button","size":[40,18],"pos":[215,139],"script":"on click do\n patterns[colors.lightgray]:\"%h\" parse lightgrayhex.text\nend","text":"Apply"},"button20":{"type":"button","size":[40,18],"pos":[215,161],"script":"on click do\n patterns[colors.mediumgray]:\"%h\" parse mediumgrayhex.text\nend","text":"Apply"},"mediumgrayhex":{"type":"field","size":[44,18],"pos":[167,161],"align":"center"},"darkgrayhex":{"type":"field","size":[44,18],"pos":[167,183],"style":"code","align":"center"},"button21":{"type":"button","size":[40,18],"pos":[215,183],"script":"on click do\n patterns[colors.darkgray]:\"%h\" parse darkgrayhex.text\nend","text":"Apply"},"orangepreview":{"type":"canvas","size":[46,18],"pos":[104,95],"locked":1,"image":"%%IMG2AC4AEiL/Iv8i/yI/","scale":1},"blackpreview":{"type":"canvas","size":[46,18],"pos":[104,47],"locked":1,"image":"%%IMG2AC4AEgH/Af8B/wE/","scale":1},"whitepreview":{"type":"canvas","size":[46,18],"pos":[104,25],"locked":1,"image":"%%IMG2AC4AEiD/IP8g/yA/","scale":1},"yellowpreview":{"type":"canvas","size":[46,18],"pos":[104,73],"locked":1,"image":"%%IMG2AC4AEiH/If8h/yE/","scale":1},"redpreview":{"type":"canvas","size":[46,18],"pos":[104,117],"locked":1,"image":"%%IMG2AC4AEiP/I/8j/yM/","scale":1},"magentapreview":{"type":"canvas","size":[46,18],"pos":[104,139],"locked":1,"image":"%%IMG2AC4AEiT/JP8k/yQ/","scale":1},"purplepreview":{"type":"canvas","size":[46,18],"pos":[104,161],"locked":1,"image":"%%IMG2AC4AEiX/Jf8l/yU/","scale":1},"bluepreview":{"type":"canvas","size":[46,18],"pos":[104,183],"locked":1,"image":"%%IMG2AC4AEib/Jv8m/yY/","scale":1},"cyanpreview":{"type":"canvas","size":[46,18],"pos":[259,27],"locked":1,"image":"%%IMG2AC4AEif/J/8n/yc/","scale":1},"greenpreview":{"type":"canvas","size":[46,18],"pos":[259,49],"locked":1,"image":"%%IMG2AC4AEij/KP8o/yg/","scale":1},"darkgreenpreview":{"type":"canvas","size":[46,18],"pos":[259,71],"locked":1,"image":"%%IMG2AC4AEin/Kf8p/yk/","scale":1},"brownpreview":{"type":"canvas","size":[46,18],"pos":[259,93],"locked":1,"image":"%%IMG2AC4AEir/Kv8q/yo/","scale":1},"tanpreview":{"type":"canvas","size":[46,18],"pos":[259,115],"locked":1,"image":"%%IMG2AC4AEiv/K/8r/ys/","scale":1},"lightgraypreview":{"type":"canvas","size":[46,18],"pos":[259,137],"locked":1,"image":"%%IMG2AC4AEiz/LP8s/yw/","scale":1},"mediumgraypreview":{"type":"canvas","size":[46,18],"pos":[259,161],"locked":1,"image":"%%IMG2AC4AEi3/Lf8t/y0/","scale":1},"darkgray":{"type":"canvas","size":[46,18],"pos":[259,183],"locked":1,"image":"%%IMG2AC4AEi7/Lv8u/y4/","scale":1}}}}}
It seems difficult to represent a bunch of full sized cards in a grid like this in a way where they're still legible and editable.
But depending on what you want as a user, there may be other ways to create something with a similar feeling.
To start, a way to see all your cards as names and thumbnails in a list format is with the Files > Cards menu. You can drag them within that menu to adjust their position in the deck.
But if being able to move "cards" around visually to organize thoughts about them (such as in the example photo) is something you'd enjoy, you could make a card with draggable widgets representing the relevant information cards, and put something like the search engine contraption on the screen so you can quickly navigate to the specific card you'd like to see full-size?
Just floating an idea. :)
Thank you for imagining music!
Everything was drawn directly in Decker. If you do a few things (turn on the toolbars, grab the extra brushes from the included examples folder, switch to color if you want color) Decker is a nice little art program.
If I'm working on a background I'll blob some color around for the important landmarks and refine it when I have time.
If it's a character or object that I'll want to be able to interact with using scripts or modules I'll usually draw it on a blank card, copy and "paste into canvas", and then copy the canvas into the real card it belongs to when it's done.
I had a lots of spare 'doodling/art development' cards over time and would delete them when I was finished. (Whenever I needed to adjust art in a canvas, I'd "copy image" from the canvas and paste the art onto a new blank card for edits.)
Beyond that, I'm still figuring out my workflow, but I hope something in this helps.
Thank you for your kind comment and your interest! The engine this was made in has some quirks and limitations regarding sound that I'm not 100% familiar with, so I don't think I'm ready to take on the responsibility of applying someone else's lovely sound design work yet... but thank you nonetheless.!