Cellda Demo

About Cellda

Engines

Explore

About Cellda

Cellda is a tech-demo for SVG based games in Coda.

Daniel Stieber

Why building a game in Coda?

You can create games out of everything. All you need is to figure out a mechanic and suddenly a coin, pen & paper can shorten a long boring train ride. Add some luck and skill mechanics and suddenly a game becomes even more exciting the longer you play it. But it’s not only mechanics. The real magic comes with a story, which now plays with your imagination and pulls you into a fantastic game world.

But why would you make a game in a tool like Coda, where others store their todos, meeting notes or even taxes?

I believe playing, or even more creating games is a wonderful way to express creativity, explore possibilities, and even train for the real world.

The simple answer: Because you can.

Inspiration

The game is obviously inspired by the classic Zelda games for SNES / Gameboy. I’m a big fan of the series and love the combination of exploring a world, solving riddles, fighting enemies and discovering the story.

⁠

Zelda - A link to the past

A few years ago I already made a very minimalistic game called “Lost in Paradise” only using tables, buttons and emojis in Coda that was also inspired by the bird’s-eye view of Zelda. The player had to explore a way through the unknown, fight enemies, collect items and find the exit. It had two levels and even a game creator to tell your own story.

Show Lost in Paradise GIF

⁠

Coda invited me to show off some of my games including Lost in Paradise and UNO at the very first Coda Block Party in San Francisco in 2018. There I even met Reid Hoffman who also is a big inspiration when it comes to the role of games in business & strategy.

After some updates on Coda itself my old games no longer worked, but other features were implemented and new hacks were found. So I started to think about the next level and somehow the idea for Cellda was born.

⁠

How it works

Cellda uses different mechanics I’ve learned from others in the Community or came up with by myself. I try to give you a brief explanation, but you can also

Copy the doc

⁠

and explore the mechanics by yourself.

Display

The Display is a dynamically generated SVG. It is stitched together by dozens of smaller SVGs and is “rendered” with every step/action. SVGs even allow animation which adds some atmosphere.

To learn how to generate and use SVGs in Coda, I can recommend the article from Paul in the Community:

MEGA TRICK: SVG in Coda (one step away from generated charts and mind maps!)⁠

⁠

World

Layout

The whole world is designed in Figma and based on a tile/grid system. The world has 256 tiles. The 5x5 display always renders 25 at the same time.

Tiles

Every tile has 100x100 px and is a row in the tiles table. There it can be filled with a floor asset and an item asset. It can also have a message that is displayed when you look towards the tile.

Assets

Every asset is a 100x100 px SVG, sometimes with transparency. Assets can be obstacles (tree), interactive objects (apple) or just floor to step on. Interactive assets can even require other assets to interact. Assets have a value that can be different from their design. This allows that a chest requires a key and gives you a coin after the interaction.

Limitations

Since the display is 5x5 and the player is always in the centre, it requires two framing rows/cols where the player can’t step on.

Controller

Movement

This is the most complex part of the mechanic. With every step the game needs to check:

What is the position the player is standing at?

What is the position the player is watching at?

Which are the visible tiles around the player?

Is there a message to display?

Is there an item to interact with?

Is there an obstacle?

Is the left or right leg in front?

It took some time to find a good mix of what to automatically calculate and what to update with a button. Everything can be done in multiple ways, but with huge differences in performance.

In the end, a movement button saves the new current position into a table. Formulas check the position and calculate the visible tiles around it. Only the visible tiles use some formula to calculate their SVG value.

Interaction & Inventory

Same as with movements, a few things have to happen at once here. If you stand in front of an item that allows interaction, the A button will show what you can do.

I wanted the player to be able to collect items, and also use collected items to interact with other items. I already did that in the Lost in Paradise games and just defined everything as columns in my assets table. But this time there were no emojis to display and I needed to render the collected items somehow – e.g with an inventory screen. For the backpack I had to create an own grid system and show collected items in the right order.

⁠

Bildschirmfoto 2022-09-02 um 10.38.53.png

⁠

Layout of a world in Figma.

⁠

Bildschirmfoto 2022-09-02 um 11.16.23.png

⁠

Tile showing a message after interaction.

⁠

Bildschirmfoto 2022-09-02 um 11.17.11.png

⁠

Two tree columns as a limiting wall

⁠

Bildschirmfoto 2022-09-02 um 11.53.14.png

⁠

The controller

⁠

⁠

Legs indicate movement

Story (SPOILER)

While this is only a very simple story, I’ve tried to use guides from Shigeru Miyamoto, the creator of Super Mario, on how to explain the game – without explaining it.

When you start the game, you already look at the sign on the door and read the message. The message gives you a quest. On the same screen, you can already see the apple tree, which pulls you in that direction.

Making a step will teach you that you no longer see the message when you get away from it. Going straight left even shows another apple tree and teaches you that there are more. Approaching the tree will change the “A” button to “TAKE” which teaches you that A is the interaction button. You want to take it but the story won’t let you reach the apple. The tree is too tall.

Now you learned how to move, how to interact and that you can theoretically get apples but either need to find apples on the ground or something to reach them on the tree.

By exploring the world you find an apple on the ground. The position to take the apple will either show you a path between trees or the ladder behind the trees. So you are already guided towards your next steps.

With the ladder, you can then go back to the apple trees and collect until you have five. Mission accomplished.

SPOILER

⁠

Bildschirmfoto 2022-09-02 um 13.45.11.png

⁠

Bildschirmfoto 2022-09-02 um 13.47.48.png

⁠

Bildschirmfoto 2022-09-02 um 13.50.46.png

⁠

And now?

I hopefully find the time to tell the story further, implement a fighting system and further levels. Some of it is already designed, but with every additional element, it is again a matter of performance.

Stay tuned and follow me on Twitter for updates!

⁠

Follow on Twitter

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.