Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length

 
Advanced search

1388766 Posts in 66639 Topics- by 59315 Members - Latest Member: VisionaryGames

March 06, 2021, 04:28:19 PM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsCommunityDevLogsClarice Clairvoyage - Spellcrafting & Sailing Roguelike!
Pages: [1]
Print
Author Topic: Clarice Clairvoyage - Spellcrafting & Sailing Roguelike!  (Read 697 times)
bram_dingelstad
Level 0
**


Always up for a chat!


View Profile WWW
« on: February 19, 2021, 10:48:38 AM »


Hey there! I'm working on a small PICO8 Spellcrafting & Sailing Roguelike with the working title of "Clarice Clairvoyage"!

Gameplay
The game is centered around the concept of crafting spells by stacking different pages of a spellbook.


You're outfitted with a few basic pages, but you get access to more as you fight enemies and sail the sea! There are a bunch of different spells that are the result of many types of combination, so experiment away to see if you can get more power of more utility out of every little spell.

Every island there is adventure waiting! Will you get a new spellbook page? Perhaps a talk with a stranger? Who knows!




Her story

The game takes place through the character of Clarice Clairvoyage, a young mage in training who is the only one left after a small crisis hits her home island and all of her friends and family are abducted, never to be seen again. In her bravery, Clarice collects what's left of her home and with an old ship she crosses the seas where she might find her family and friends again!

The tech

The game is made using PICO-8 a small retro gaming console that never existed. All of the pixel and music assets are self-made, so is the code. I'm already brushing against the limits of the console by hitting it's "token count" limitation, so the amount of game that I get to squeeze in is up to a lot of factors.

State of the project

I started this project in mid-winter last year. I'm planning on keeping the project relatively small and short, hopefully being done before the end of this year. It's not my full time job to work on this, nor do I have a lot of funds or time to spend on it, so progress will undoubtably be slow. I've already started to get the game out there and I'm trying to let it get known amongst some roguelike enthusiasts or other indie game players.

There's no playable build as of now, but I'll work hard to have at least something playable in the near future. If you're interested in looking at some of the development, I also stream some of the gamedev from time to time, so check out my Twitch to see when you can join me on the next session!

If you have some advice on the project, or if there's something you want to critique, feel free to leave a reply, email me or reach out on Twitter!
« Last Edit: February 20, 2021, 11:44:23 AM by bram_dingelstad » Logged

If you'd like to see something of my work check out:
The devlogs of the game I'm working on - My website/blog - My itch.io
bram_dingelstad
Level 0
**


Always up for a chat!


View Profile WWW
« Reply #1 on: February 20, 2021, 08:32:08 AM »

Alright! So time for the first update on the devlog, excited!

Soo... I stream every two weeks, today was one of those weeks, so you can even watch this devlog in the four hour long stream version where I actually implement these features. In this stream I also go into a little bit of detail on how I did the procgen for the islands. I'll try to do a devlog on how I did those somewhere in the future when I actually fully finish the island's gameplay functionality as well.

Now, to get into the things I've actually done.

Steering the boat with magic
A core part of the game is the magic system that the player uses to fight enemies. I wanted to make more use of this systems besides combat, and one of the first places I wanted to do this, was in the steering of the boat.
The boat has the functionality of transporting the player from each "choose-your-own-adventure" styled island to the next, while occasionally encountering a group of enemies. However, I didn't want the player to just control the boat by tugging on a steering wheel (or whatever you call that on a boat), but instead to use a spell to do it instead!

For now, it uses any form of the "beam/ray" spell that I already implemented, but my plan is to make a "wind direction" spell for this specific task that the player can use.



How it technically works, is that I just take the angle from the spell direction when it's being cast, the mast object then uses this angle to lerp towards (making that satisfying turning animation). After that is done, I make the actual ship in the overworld turn as well, but at a slower rate so that the player has a chance to see it happen as well (plus a boat is very heavy so needs more time to rotate). Technically I can also make the boat representation of in the player's view rotate, however, since the game relies on a grid of spells with close coordination of the player with those locations I've decided (for now) that the boat in the player view doesn't rotate with the actual rotation of the ship.

Docking a ship to an island

So another challenge for today was making this ship actually stop at one of the island if a player desires it.
To do this, I actually found a whole laundry list of bugs in my rendering code for the sea, but I'll skip over that for now. If you feel like watching me struggle with that for about an hour, check out the stream (link somewhere above).

After fixing those bugs, the implementation is somewhat simple:
I start with getting the closest dock, so I just have to run a calculation for it, instead for all.
Then I just take the distance between the ship and the tip of the dock, see if it's within a certain actuating distance and start to slow the ship down.



This actuating distance is just the radius away from the dock, at which I want the ship to start to slow down. I can make this bigger or smaller dependent on how easy I want the ship to dock.Once the ship is within that distance, I divide the actual distance to ship by the actuating distance, causing it to start at 1.0 at the edge of the actuating distance and getting closer to 0 when approaching the point. Then I just make sure that below a certain threshold that percentage is always 0, causing the boat to be at standstill.

To leave the dock, I just turn of that threshold, and the ship will start to move further away from the dock edge, slowly speeding up again!



That's it for today, I might do another small update tomorrow or go a little bit more indepth on the island generation soon.

Thank you so much for reading, feel free to leave a comment if I'm a little vague or if I didn't write something clear enough. Also feel free to message me any time, on any platform with questions!

Cheers

- Bram
Logged

If you'd like to see something of my work check out:
The devlogs of the game I'm working on - My website/blog - My itch.io
Alain
Level 2
**



View Profile WWW
« Reply #2 on: February 21, 2021, 01:03:19 PM »

Your steering mechanic is very interesting! I think it is always a good thing to give the player the chance to use one ability in various situations and ways, which is exactly what you are doing. I guess you are onto something unique here Smiley
Logged

bram_dingelstad
Level 0
**


Always up for a chat!


View Profile WWW
« Reply #3 on: February 23, 2021, 02:10:20 AM »

Thanks! I hope I can go a lot more in detail about the game and the systems somewhere in the future. Perhaps Clarice can learn something from a particular alchemist on how to do proper spell combinations. Do alchemy and magic overlap?  Wink Shocked
Logged

If you'd like to see something of my work check out:
The devlogs of the game I'm working on - My website/blog - My itch.io
Alain
Level 2
**



View Profile WWW
« Reply #4 on: February 23, 2021, 04:23:05 AM »

Thanks! I hope I can go a lot more in detail about the game and the systems somewhere in the future. Perhaps Clarice can learn something from a particular alchemist on how to do proper spell combinations. Do alchemy and magic overlap?  Wink Shocked

Hahaha, thanks for checking out my game Smiley My protagonist is an alchemist, but dabbles with ritual magic during the game, so there are definitely some parallels to Clarice Wink
Logged

Bino
Level 0
**



View Profile WWW
« Reply #5 on: February 23, 2021, 12:39:41 PM »

Thought I'd check out your devlog Smiley This is very impressive Pico8 work!
Logged

bram_dingelstad
Level 0
**


Always up for a chat!


View Profile WWW
« Reply #6 on: February 27, 2021, 07:09:41 AM »

So I kinda teased last time about a devlog on island generation. I kinda shortly touch on the subject when I talk about the procgen, and obviously some work has already been done, as seen in the gifs.

Why does my game need procgen?

One of the key features of any rogue-like is it's replayability through randomized map generation. This means that every single game has a deeply visual and mechanical difference to any other playthrough, guaranteeing (at least mathematically/theoretically) that every playthough will be different. So what was gonna be the map for my game? The seas, of course!

The rough ideas and sketches

When I set out to design the first few paper prototypes of Clarice Clairvoyage, I had several ideas in mind:

1. It had to run on PICO8, meaning the design of the system/algorithm shouldn't be too complicated or code-heavy  
2. It needed to fit the gameplay context of a ship and an island-y overworld
3. Every playthrough needs to be different in gameplay outcomes

My first few very naive ideas were largely based on the assumption that I could throw a lot of computing power or have a noise based procgen. Unfortunately due to rule #1, I had to scrap that idea.
There were also a lot of other inspirations of literal rogue or more modern twists on the rogue-like/lites such as "Enter the Gungeon" or "Spelunky". Those ones were probably doable with simple RNG systems or using a cell based approach; however, it wouldn't fit rule #2, because of no overworld.
I eventually settled on a circle based island generation that checks if islands are at least a certain distance apart. The island groups are similarly structured from playthrough to playthrough, to make it familiar to the player. However, they are different in function and in visuals, to keep the player on their toes! Rule #3 would be satisfied by generating the different gameplay paths separately from the actual islands, and by designating their function after the locations of the islands had been determined.
Separating those systems also makes it easier to balance or completely redo the gameplay of the world generation, which is nice if you're not sure if that gameplay idea is the most fun.


Implementing island generation

First of all, I needed to have an inexpensive, relatively code-cheap way of rendering a bunch of islands.
I wasn't gonna do it with either a map or sprite based approach, because I don't have the space on my spritesheet for so many different island parts. The thing I quickly jumped on was just using simple geometry to draw the islands. The two kinds you have access to in PICO8 are of course the circ (circle) and rect (rectangle).
The process I've used to go about procgen is to try to define the pattern I want to replicate, and think of an algorithm/code to reproduce that.  I started to think of islands as a group of circles together that form somewhat more complex shapes. Here's what I did:
Okay, cool, now we got our island! But what about island*s*? It's about time we scaled this puppy up to make several islands all with their own shape. The way I went about spreading these islands across our "map" was by using more trigonometry and more circles!

Placing the islands

I started with drawing different circles around the (0, 0) point of my map, with radiuses in steps of ~60 pixels. I use these circles for reference when drawing the islands on top of them. Next up, I generate a bunch of islands, and try to generate them so that they're at least a set amount apart from one another. By making this a variable, I can make the sea more dense or sparse based on what I want.

I also make sure that the islands use less of the available circle space the bigger the radius of the circle is. This is to make sure that they kind of make a triangle shape, that's easier to navigate and implies a choice structure for the player gameplay wise.
The next step I took was drawing/generating another set of circles further top of the (0, 0) position of the map, to make the triangle into a diamond shape, so that the map returns to one final island

Zooming

In the last gif you kinda spotted it already, but you see me zooming in and out. "How did he do that?", you might wonder. Well, you're in luck, because I'm about to tell you.
Most game engines have a form of zooming in or out through camera manipulation. Most weathered PICO8 gamedevs know, however, that the only control we have over the camera is its x an y placement. That's it. So how did I manage to scale everything?
The trick lies in separating the thing you're trying to render, from the actual rendering/drawing itself. I mean, this seems obvious. This is one of the reasons why PICO8 has its _draw call separated, to make sure that (manipulating) data and drawing of that data is done in different steps.
If you look at the code of the island generation, you'll find I have two lists/tables: a points and aradiuses one. In my game, I also have a variable called zoom that ranges from 0.15 to 2 or more. When I zoom, I just scale the radiuses with zoom and, bam, we have islands appearing bigger or smaller based on the zoom value.
Another big (and very important) factor of zoom is the displacement of the objects when zooming. For this, I'm taking the centre bottom of the screen as a focus point by offsetting the final zoom location by (64, 128) and then scaling the final locations and points of the islands according to zoom.
And to top it all off, we can add just a little brown rectangle at a side of a sub-island the furthest away from the centre. And we're done! We've created a little procedural sea that Clarice can sail and find spell book pages and more!

---

Thank you for reading my devlog! And stay tuned for the next devlog about *"Generating (island) gameplay"*/*"Cutting code tokens"* by subscribing to this thread, checking my website or following me or the game on Twitter!



« Last Edit: February 27, 2021, 08:54:50 AM by bram_dingelstad » Logged

If you'd like to see something of my work check out:
The devlogs of the game I'm working on - My website/blog - My itch.io
Alain
Level 2
**



View Profile WWW
« Reply #7 on: March 01, 2021, 01:00:04 AM »

Great update, thanks for the write-up! Nice work on generating the islands. The zoom mechanic is a very catchy aspect of your game, so it was cool to find out how generating the islands and the zooming work together.
Logged

bram_dingelstad
Level 0
**


Always up for a chat!


View Profile WWW
« Reply #8 on: March 02, 2021, 09:38:23 AM »

Thanks! Didn't know the zooming part was that catchy tbh  Smiley
It's very interesting to get to know these concepts that seem very easy, but you've never implemented before.
Suppose the fun of gamedev is also finding out all of the tricks that've been used in other games Grin
Logged

If you'd like to see something of my work check out:
The devlogs of the game I'm working on - My website/blog - My itch.io
fingerman
Level 1
*



View Profile WWW
« Reply #9 on: March 02, 2021, 10:58:15 AM »

Hi, enjoyed reading your devlog. Good explanation on the zooming.
Logged
bram_dingelstad
Level 0
**


Always up for a chat!


View Profile WWW
« Reply #10 on: Today at 03:19:34 AM »




Hey, so this week's update is gonna be about a lot of things, but before we start: I noticed that my devlogs are getting somewhat longer. So to start countering that, I'll be including a TL;DR at the top of the post, so you can still get what this week was about, without reading my wall of text.


If for whatever reason you do that, I still recommend reading the whole thing so that you'll know everything rather than an abridged version Smiley
TL;DR
- Updated Clarice's sprite
- Added Hair physics (whoooooo, fancy!)
- Lost about 1000 code tokens, meaning more space for more gameplay
- Reworked the existing spell/scroll symbols to make 'em look nicer!



New Clarice!

So, one of the first thing you'll notice in this post is the pretty GIF banner showing off a new aesthetic for Clarice! I really love how much cuter she is! I honestly didn't think I could ever come close to something being cute in pixel art; I'm a programmer nonetheless, so imagine my sense of achievement.
Funny fact: this sprite is actually inspired by the random island generation! When I was making some banners for social media and other platforms, I noticed a sprite-shaped island in the background. When inspecting that island, changed its colour and adjusted its shape, I got the new look for Clarice!

Obviously, the silhouette of Clarice can be further improved and while making this post, I'm still thinking that there's something appealing that I didn't translate from the island onto the sprite. But that's for another update!

Hair in the wind

Some of you might've already noticed some weird new addition to Clarice, which is an extension of her hair in the game that seemingly has a life of its own.
It does! I thought I'd take a page out of the book of another great indie game which won game of the year (guess the game), and make the hair be animated based on the environment and physics of the game. _Now it's only a matter of time before my game becomes GOTY /s!_
So how did I do it? It's actually relatively simple, so I'll quickly walk you through what I kinda did. For those who are _extra_ excited, you can always take a look at the actual code in the cartridge when it comes out or if you peek at my *devlog over at Lexaloffle's PICO8 forums* .
For drawing the hair, we're actually drawing just three small circles in pink, purple and pink again. This is to give the hair some more dimension than just 3 pink hairs. The purple circle also serves to provide some depth.
Now, we take the hair/circle that's the furthest away (aka the last one), point it in the direction of a period p and give it a radius of how far away from the character it should be. Now, when we change p, we effectively change the direction of where the hair should go:
Now when we give this p the value of the wind direction, we're starting to physically animate our character's hair!
Next up, we just place the remaining two hair circles at a fraction of the outer hair vector, and it should follow the end hair, making it seem attached. Just make sure that the fractions aren't too big or too small; otherwise, the circles of hair will disconnect.
And that's some very basic hair that's animated by the wind! To improve it a bit, I added a value called strength (value between 0 and 1) that determines how much resistance Clarice's hair has. When the value is 1, the wind doesn't affect the hair and it remains in its natural pose. When it's 0, the wind has maximum effect like the GIF above and determines the hair's direction. It's when you modulate this strength value where the real fun begins. The control and loss of control over the hair makes it seem as if the wind is blowing at differing speeds, causing the hair to sometimes blow and sometimes return to shape.
The challenge now becomes to link this further to a "wind strength" variable that goes together with in-game events like spells being cast or bosses arriving! Hopefully this makes sense, or it at least looks somewhat cuter than what I had before Smiley

Losing weight


I did a _major refactor of all the code to bring the token count waaay_ down from 7136 to 6082!
I've gutted some leftover features and dangling variables, made some code more generic and cleaned up the util functions, but dropping a full 1000 tokens while also adding hitboxes and making cool hair was beyond my expectations. Of course, we still have a long way to go with the game and having only about 2000 tokens left is still a little too close for comfort to me, so we'll see how I'll manage.

Improving graphics

Besides re-doing Clarice, I've also been busy re-doing the old assets for the spells/scrolls. The old ones were kind of just dots of colour in the middle of the page representing the element, nothing too fancy, or even exciting. I did some tests of the new versions with my friends and they seemed to think it was a major improvement on the game!

Not all of 'em are perfect or super descriptive for the spell they're representing, but it's a good start!

---
Thanks for reading my devlog of this week. If you liked it (or if you didn't) or you learned something from it (or you're thinking you already knew this, but still think it's interesting): leave me a comment, show me your support! It really keeps me going with this project, honestly (kinda the only thing that keeps me running tbh)!

Thaanks, and see you next week!

~ Bram
Logged

If you'd like to see something of my work check out:
The devlogs of the game I'm working on - My website/blog - My itch.io
fingerman
Level 1
*



View Profile WWW
« Reply #11 on: Today at 03:57:29 AM »

Hi, another enjoyable read. So you are doing all the development inside pico 8?
Logged
bram_dingelstad
Level 0
**


Always up for a chat!


View Profile WWW
« Reply #12 on: Today at 04:41:04 AM »

Yes! All of the development is in PICO8. To make it more interesting for myself, I also decided to do the project only using a Raspberry Pi 400, which I've been doing since the beginning Smiley
Logged

If you'd like to see something of my work check out:
The devlogs of the game I'm working on - My website/blog - My itch.io
Alain
Level 2
**



View Profile WWW
« Reply #13 on: Today at 05:18:57 AM »

Great progress, good job on the hair animation.

To make it more interesting for myself, I also decided to do the project only using a Raspberry Pi 400, which I've been doing since the beginning Smiley

That's something for a change! I am a total Raspberry Pi amateur, but built one into an old portable 1950s TV set. I am sure Clarice Clairvoyage would play lovely on it Wink
Logged

Pages: [1]
Print
Jump to:  

Theme orange-lt created by panic