DevLog #02 — From squares to a cyberpunk city (with free art)

In the previous devlog everything was colored squares.

This time Raccoon is starting to look like a game.

And to get here we did something pretty simple: we stopped waiting for our own art and used free resources so we could keep moving.

Why other people's art?

Because we don't have finished art of our own yet.

We have sketches and ideas, but nothing we could use to build a full level. And we didn't want to stop the game while we sorted that part out.

Remember the rule from the first devlog: before spending hours on art, the game has to be fun. We're still following it. It's just that now the game looks better while we find out.

We looked for something that fit the direction we want for Raccoon and found two free packs by Ansimuz (Luis Zuno) on itch.io, both CC0:

• Cyberpunk Street: street backgrounds with neon signs and a synthwave music track.
• Warped City: tileset, animated character, enemies, effects, neon signs and more backgrounds. It also ships with a Phaser demo containing a full level.

CC0 means they can be used even in a commercial game without asking permission.

Still, the credit goes here because it's only fair: thank you, Ansimuz.

And this is temporary. The idea isn't to keep this art forever, but to keep building the game while we make our own.

First, a background

The easy part first: put the street from Cyberpunk Street behind the prototype, with parallax so the layers move at different speeds with the camera.

And it was funny how much the game changed with something so simple.

The little squares stopped looking like a prototype.

And started looking like...

well, a game.

A level that already existed

Then we saw something even more interesting.

The Warped City demo comes with a full level made in Tiled: a 120×28 map of 16 px tiles, with visual layers, collisions and objects.

Instead of designing a level from scratch, we decided to take advantage of it and port it to Unity.

To avoid doing it all by hand, we wrote a script that runs once inside the editor. It reads the map and builds the Level01 scene automatically.

It sounds like importing the map and pressing Play would be enough.

It wasn't.

The level came with mechanics our prototype didn't have yet.

What was missing

First came the ladders.

Some floors are 5 and 10 tiles apart and the jump can't reach. So when the player touches a ladder and presses up or down, we turn gravity off and they climb.

Then, the gaps. Between some buildings there's nothing, so falling now means dying. With the height rule from the first devlog, that was almost done.

We also had to bring the character to life. We made a simple component to play frame animations and a state for each moment of the player: idle, run, jump, fall and climb.

And two more details:

• Defeating an enemy now makes an explosion.
• The camera has bounds, calculated from the Tilemap size, so it never leaves the level.

Nothing spectacular on its own.

But together they're what makes the level start to feel like a complete game.

Can it really be completed?

A level you didn't make yourself can have an impossible jump. Or a part that simply can't be reached.

And we didn't want to find out after playing for half an hour.

First we analyzed the map using heights, distances and the character's real jump ability, to confirm there was a path from the start to the goal.

Then we tested the hardest jumps with the game's real physics, and reaching the goal.

And finally we played it all the way through, by hand.

And yes: it can be completed.

Checking licenses matters too

Here we found something important.

The Phaser demo's music isn't by Ansimuz, it's by someone else, and the pack's license doesn't cover it. So we didn't use it.

The same happened with some of the demo's sound effects: we couldn't find a clear author or license, so we left them out until we can verify them.

It's very easy to download a pack, see that it says "free" and assume everything inside can be used.

But free doesn't always mean everything has the same license.

If you're making a game you want to release someday, it's worth checking what each one covers.

You can play it now

After all this, Raccoon has a level you can play from start to finish.

And we uploaded it to itch.io so you can try it right in the browser, with nothing to install:

Play Raccoon Cyberpunk on itch.io

There are still things pending.

The turrets don't shoot, because that's how they were in the original demo.

There are no sound effects.

And on phones the controls are pretty limited: for now you can only attack by tapping the screen.

If you want to try it

Now for the part for anyone who wants to port a Tiled map to Unity on their own.

This is how we translated it:

In the map	In Unity
Visual layer	Tilemap "Main"
Solid collision	Tilemap "Solid" with CompositeCollider2D
One-way collision	Tilemap "OneWay" with PlatformEffector2D
Ladders	Tilemap "Ladders" as a trigger
Signs	Animated sprites
Enemies	Drone and Turret prefabs at the same positions

The enemies weren't in the map but in the demo's JavaScript code, so their positions had to be copied from there.

For the ladders, the idea is that the "Ladders" Tilemap is a trigger: while the player is inside and presses up or down, the Rigidbody 2D gravity is set to 0.

And for the camera bounds, the Tilemap size gives you the level's width and height.

What's next

This level still uses the human character that comes with the pack.

But Raccoon's protagonist isn't a human.

The raccoon is missing.

The next step is to replace these temporary resources with our own art, starting with the protagonist. We're making it partly by hand and partly with AI help, and we'll tell you how.

The music is taking its own path too: I want to end up playing it myself, so it has a more personal sound.

And one decision is still pending:

What do we do with the masks we inherited from the previous project?

We'll leave that for the next devlog.