A Weekend at Villa Apate

Hello everybody,
I’ve entered even this year AdvJam (a 14-days jam for an adventure game) with a game made with Defold, called A Weekend at Villa Apate. It’s a point’n’click pixel art game - more or less 20-30 minutes long as gameplay I developed onto my DAGS framework on Defold fantastic engine.

If you want to give it a try you can find it here: Game Jolt - Games for the love of it

If you try it and if you want, feedbacks would be welcome!

[BORING TEXT STARTS HERE]
But I wrote this post not only to showcase my work but also to give you some highlights about my workflow - in case it may be interesting for someone else.

How do I work?

Well, I don’t work INSIDE Defold. I mean, Defold is the PLAYER of the game, but it’s scripted elsewhere because I find that adventure game needs a specific structure AND because I’m used to working with Aseprite as a graphic editor. So I’ve got a source folder (with my scripted game, and its resources) and Defold projects (with my Lua code) in which a program I’ve done creates Defold’s elements, that’s possible and ‘easy’ because it’s a wise choice to have everything as a text file.

A quick sample
Inside my game, there’s a tutorial session. Let’s see how it’s done.

As you can easily see I’ve got an image with layers, and the layer names have prefixes - that my build program will use to know how to handle things.
First, the bkg. prefix indicates NOT ONLY the background image, but the NAME in which I want to put all the elements I’ll use for this scene - and for that I mean in which ATLAS I want to have the pieces I take from this ASE file and write as png. As you can see the background image - called bkg.past becomes part of bkg_past.atlas - and its elements part of props_past.atlas

I do the same things for actors - I draw them in aseprite - with layers and animation (and timing) - and I morph them in an atlas file with the same characteristics

for this game, I’ve decided to handle in separate sprite inside a game object some layers - and so I’ve changed generating code (and handling one) to let me do that

as you can see my game has a lot of animations - but that’s very easy to handle, considering I just do things in aseprite and then build the corresponding atlas in Defold

Last, but not least, here’s how I handle game code. I use a treepad lite file (because it’s handy) that I convert in a json file (because it works very well inside Defold) - while I scan its content to build Defold resources (including sounds and game project data)

in the shown image my script attach scene to scene ase files - and let me use elements in layers - so you can see that I can do something like if:drawer,opened and setstatus:drawer,opened - and that’s connected to elements defined in ase file - like hotspot, or object, or graphic version of elements, for a specific state. setstatus:drawer,opened with activate the drawer.opened image - that will starts NOT shown, because of layer visibility attribute

That’s ONE of the things that’s possible to do with Defold that I love - to use it for its great power - taking advantage of its flexibility to put it inside a more complex workflow. I still didn’t use that (but I think I’ll do soon) - but even the fact that it has LUA as scripting language it means that I could probably shift from a generate json format for my script (that’s handled by lua code - as interpreter) to generating directly LUA code - that will use functions presents inside my framework.

This could improve the “only” thing that still isn’t optimal in my way of work - because even if (for me) it’s fundamental to “compile” resources from my preferred formats to Defold’s ones - it’s slow to have to rebuild the json to test a single change in the gameplay - considering that Defold has hot reload of its lua code.

[BORING TEXT ENDS HERE]

As always I’ve loved to use Defold as support for a jam (and I’m here to thank every one of its developers) because it let me try even some big changes on the run in framework code more lighthearted than with my own C engine - and it let me forget about the multi-format output WHILE keeping things small (and as maybe you notice, I like that - I mean if you check in animation atlas file you’ll see that I even avoid duplicate frames even when I work in very low res)

And I, well, love the fact that this engine is always under improvement - and the people working on it (and the community) is very supportive and helpful in case of need

Final note - even if I’m not interested (in a serious enough way) about it now - I’m really glad to know that they added a specific console to their potential output :slight_smile:

Thanks :slight_smile:

33 Likes

No no, it should say “VERY INTERESTING TEXT STARTS HERE”!

Thank you for sharing this! Super interesting! I’d love to use this as a base for a Defold blog post. I’ll reach out to you next week to discuss!

6 Likes

Its always interesting to see how others approach development, wether its inside Defold or not. Very smooth animations up there, by the way.

4 Likes

Awesome! Brought back some memories when I was playing Discworld and Broken Sword! This is a genre I love.

4 Likes

Wow! This looks amazing! And thanks for sharing your workflow!

1 Like

As someone who grew up playing and loving all the LucasArts point-and-click games, this was a very nice read! Reminds me of Zak McKracken. Great approach building your own purpose-made tools!

3 Likes

Here’s the blog post: Creating point and click adventure games using Defold

Thank you Marco for letting me re-use the content and for answering additional questions!

5 Likes

This is a great insight into how you’re approaching you pipeline Marco, thanks!

Out of curiosity, how do you define walkable areas and hotspots?

2 Likes

Almost everything is defined inside aseprite - walkarea is a specific layer (with this name) inside the scene. In my game they’re usually just “lines” - because walk movement is supposed to me left right - but they’re supposed to be saved as polygons created from walkarea layer

and well hotspot can be of two types - pure static hotspots (like this one, drawer - with the prefix hot. that I put just inside a json file with its coordinates - and that uses background as graphic)

OR object hotspot like this one that’s both an image AND a coordinates set

this one can of course be shown or hidden - while the other must be “covered” if its role is not active anymore (I can use mask. layers or status layers for that)

8 Likes

That’s cool! Need to check how you’re navigating within that polygon :stuck_out_tongue:

1 Like

I disabled original polygon code (that worked when I used tiled instead of aseprite for scene resources - mainly because of its easy file format) - I’ll see to add what I need now for ase parte, and to update and put it back the rest and I’ll show you something in action within the weekend - your interest is a nice excuse for me to force me to do that “now” instead of later on .-)

2 Likes

Thank you very much @marco.giorgini for sharing this with us! I am very interested in how you exactly using Treepad in your workflow :smiley:
I also started using Aseprite recently (was using Piskel before which still has some advantages for me!) and I am amazed by the features that Aseprite offers and editor customizations, it was definitely worth giving it a try!

2 Likes

Well, as it’s probably clear, I’m used to working with whatever thing I find handy.
So, well, I mean, I don’t REALLY need treepad - I just need something with a not too complex file format, easy to use to add and modify elements of the game (that are different, based on the section in which they’re inside, and have a natural tree-like structure, being somehow object with interactions and properties)
Inside Defold I read them as a json file for simplicity but they’re simply maps of maps of arrays (arrays of code lines, inside objects relations - I mean, the code that handle using an object inside a specific scene)

The easiest text format to work with, to build a json is yaml - imho - so I started working with a single text file - with tabs - yaml-like.

That was good - but not TOO good - because when things get big it’s better to be able to quickly collapse elements and treepad lets me do that better than using (for instance) yaml in VSCode. It’s far from perfect but at this time I don’t want to make also my own game editor - so treepad like is useful and simple and I choose to stick with it - at least for now.

About Aseprite: I love it and it’s actively updated and it’s file format (binary) is well documented. And - having animations - is a good choice for me - better than using PSD for instance - that would work well (in the same way) for scenes elements (it’s Thimbleweed Park choice, for what I’ve seen in resources they shared after game release) - but not so well for animation.
I used Piskel too (I’ve tried a lot of different tools) but imho - aseprite is a lot better (even if it’s not free). It’s not the only great pixel art editor anyway - some people I know prefer for instance the much more similar GraphicsGale.

BTW: I’m following your game progresses since the start (I guess) - and it looks gorgeous

3 Likes

Just to complete the previous post:

This is what I edit in treepad

I translate it this way while I’m scanning resource references AND I’m extracting text elements

And this is what I insert in Defold project folder as josn - after I created atlas, music and so on - including project properties (like, name, icons and so on)

As you can see I now have numbers instead of text - because strings are now in another json - so I can change game language on the fly

5 Likes

Thank you @marco.giorgini! :heart:

This gives me more ideas for my game too! I took a different approach, but I am also using json files for dialogues, choices and quests, but logic is handled in Lua scripts and seeing your structure so tidy is just very pleasant :grin:

2 Likes

I did/refreshed some code to handle polygon areas - and as I promised I’ll write a short note here about that (even if I didn’t create a full feat process in DAGS - I guess I’ll finish it the first time I really need it)

Anyway - this issue is split into two main problems: first you need to have a polygon from an image, then you have to handle it

First part:
you start with drawing a walkarea level in aseprite - I did that on Zak first room with a character taken from another game (considering that it was just a quick test I feel free to use other people resources - I hope that’s fair just for this post)

poly2

then I added some code to morph the area in its outline
poly3

then I transform points (each one) in coordinates - following the outline - and then reduce the points list removing the ones that are inside lines (I mean, I have A B and C - I remove B if B lies on a line between A and C - and so on) - and that is what I get
poly4

Then I wrote points list inside my son for that room

That was easy.
Handling movement is a bit trickier - but things that may happen are these:

  1. you are inside walkarea (that’s for sure) and your destination point is inside walkarea and if you draw a straight line you didn’t cross any border - so you simply move from A to B
  2. you are inside, and destination point isn’t - so you have to find the closest point to a border segment and got from A to there
  3. you are inside, destination is inside, but there’s not straight line - from A to B you cross some border. That’s the worst part because you need to find a path - that’s to say you need some more intermediate points to go from A to B (let’s say you need to got from A to C then to B)

For the first two possibilities, you just need to have a function to check if a point is inside a polygon - and where two segment cross - if they do that. “Basic” 2d math - not to hard to write or find googling - even directly in lua.
The third cases needs iterations - when you discover that you meet a border from A to B - you use it to get its start and its end - and if you check if from one of these points you can read B. If yes, take the one that lets you have the shortest sum of the distances and you’re done. If not, recurse, saving one, and moving to the next one in that direction
I just made a short test - but I didn’t finish that because I also need to handle a point list for walking and I don’t want to do that now - but as far as I’ve seen - that works. You may have to consider border distance (or draw outline considering that)
What still I didn’t write about? of course HOLES or separated polygon areas. Both mean I need to make a little more complex code. Separated areas (I mean, having a polygon for a walk area on the left, and one for a separated area on the right) are “easy” - you check where your character is and you just use it for movements. Holes make harder to find a moving path - but they should be handled simply as extra segments.

Here there’s a little animated gif to show movements inside that area - WITHOUT the automatic split in there’s not a straight line

1 Like