Forem: SmirnovW

Zombie Go Home - My Post-Halloween Game Jam Adventure

SmirnovW — Sat, 29 Nov 2025 13:44:32 +0000

Disclaimer

I originally planned to publish this article on Halloween, but life got in the way 😅
Oh well, better late than never.

Hey everyone! 👋

Since it was October, I thought: why not challenge myself and do a small personal Halloween themed game jam? 🎃
The plan was simple: build a super small, super quick game in 10 days.
(Spoilers: it took longer 😅)

🎮 The Game

I don’t want to bore you with a long intro, so here’s the link to the game.
Feel free to play it first: https://smirnovw.itch.io/zombie-go-home

If you end up liking it and want to know how it was made, you can always come back and read the full devlog.

🛠️ Tech Stack and Idea

I picked the tools I’m comfortable with:

Unity (2D) - core gameplay.
Aseprite - pixel art editing.
GPT - concept generation.
Junie (AI agent in Rider) - generating and fixing code.
Itch.io - for assets and extra stuff.
Rider - the best friend of any Unity developer ❤️

The idea of the game was very simple:
there’s a grid, there’s a character, and you need to get from point A to point B.

The twist is: the character has a limited number of steps, and once the player uses them, the game repeats those steps in the exact same order.
If the zombie walks out of bounds during the replay, that’s game over 💀

🎨 Visuals

I wasn’t too worried about the game logic thanks to Junie 😎
It handled a lot of the routine, which gave me more time to focus on the visuals.

The style came together surprisingly fast. It’s Halloween, after all, and a zombie wandering around looking for his cozy grave basically drew itself.

I went to ChatGPT to brainstorm the look: pose, mood, style and colors.

First concepts generated by GPT

I didn’t want to animate everything from scratch, so I found a great character template:
https://dan-velasquez-art.itch.io/dvas-characters-thicc-n-juicy

The final zombie design I ended up with.

After some tweaking, recoloring and adjusting shapes, the first walk animation was done.

Walk cycle

🚶 Movement Logic

After that, I simply asked Junie: “Generate movement logic for a grid-based character.”

And it produced a working script in just a couple of minutes.

Before AI, this process would look like this:

search YouTube
watch a tutorial
pause
copy code
continue watching
pause again
copy more code
repeat endlessly

Now you just tell an AI agent what you need, and it gives you the code.

Is it awesome? Yes. Very.

🗺️ The TileMap Journey

As for the game board, I went through a few different iterations.

At first, I tried drawing everything myself: I made a basic tile and then asked ChatGPT to generate the rest of the assets based on it.

Spoiler: that didn’t turn out well 😅

Tilset draft

In the end, I found a free asset pack that fit my game surprisingly well.

I used this tileset: https://dani-maccari.itch.io/sokoban-tileset

I tweaked it a bit, redrew some parts, changed the colors, grabbed a few elements from other free packs, and eventually ended up with a clean, functional TileMap that worked perfectly for my levels.

The final version of the tileset

🌀 Endless Prompt Hell

When I finally had the tileset ready and drew the first level, I needed to add a simple piece of logic:

if the character steps outside the board, the game ends.

And that’s exactly where the real pain started.

For some reason, this part was very hard for Junie to handle.

I tried everything: different prompts, super detailed prompts, rewriting them many times...

I even used ChatGPT, explained the whole mechanic in detail, and asked it to craft a “perfect” prompt specifically for Junie.

Long story short, this took an absurd amount of time.

At some point, I honestly thought it would be easier to code it myself.

But eventually, after a lot of iterations, I somehow managed to squeeze out of Junie the exact logic I needed.

The Prompt of Desperation.

🔁 Replay Logic (aka "The Brain Melter")

The main challenge of the game is the replay mechanic.

The idea is simple:

the game repeats every step the player makes, in the exact same order.

So the player has to think ahead.

If you just wander around randomly, there’s a good chance that during the replay the zombie will walk out of bounds or step onto a trap and lose instantly.

The replay logic itself was also generated with Junie.

I wouldn’t call it easy though. This part took a lot of iterations too.

🤖 When Iteration Becomes a Mess

Because I was building the game iteratively and constantly adding new bits of logic on top, Junie wasn’t writing the code with future extensions in mind.

I kept asking it to "just add this one more thing" or "tweak that a little", and over time the code became more tangled:

more bugs, more edge cases, more pain.

Eventually it got so messy that even Junie struggled to modify it.

So I changed the approach:

I took the current version of the code
wrote a huge, very detailed prompt describing exactly how the whole system should work from start to finish
and asked Junie to rewrite everything from scratch

Only after that the replay logic started working the way I wanted.

🎵 Sounds and Music

Even though I spent a decent amount of time on audio, there isn’t much to say.

I got all the sounds and music from this resource: https://pixabay.com/

Some sounds required a bit of editing in Audacity: trimming here, a little fade-out there. But that was pretty much it.

👨‍🎓 Things I Learned

If you’ve made it this far, you’re officially a hero.

I could easily continue for hours about all the tiny details: level transitions, the zombie jumping into the grave, and a dozen other little tortures.

But I want to highlight a few unexpected quirks I ran into while using Junie.

The "Forbidden Words" Problem

In game development you naturally use words like:

explosion
bullet
enemy
death
kill

Totally normal for games. Totally not normal for Junie.

Whenever I asked Junie to implement something like "zombie death logic", it simply... broke. LLM error. No response.

I tried synonyms, softer wording, rephrasing... nothing worked.

Something on Junie’s side (or maybe on the LLM safety side) blocks certain words, even in a game dev context.

The funniest part?

When I asked ChatGPT to "write logic for killing a zombie", it politely replied: "Sure, how brutal should the death be?"

So yeah. Quite a contrast. And a bit annoying when you’re using Junie specifically for gamedev.

The Wall Between Code and Unity UI

Code generation is great. It really saves time.

But in Unity, a lot of work happens inside the editor UI, not in the code.

And that is where Junie hits a limitation.

Junie has no idea what you changed in the inspector.

It doesn’t know what you enabled, disabled, assigned or tweaked manually.

Some of that metadata exists in files Junie can read, but much of it is only represented visually in the Unity editor.

This creates a strange wall between generated code and editor setup.

Because of that, some tasks become unexpectedly difficult or even impossible for Junie alone.

🎉 Final Thoughts

In the end, I’m really happy with how everything turned out.

I genuinely like the final result and I’m proud of this little game.

What I enjoyed most was having the freedom to focus on visuals: drawing, animating, polishing transitions.

That part was incredibly fun.

And the wildest part is that Junie wrote about 90 percent of the code for this project.

Yes, there was plenty of pain and many moments when I fought with it to make it do what I wanted, but honestly, the final outcome is still amazing.

So, thank you for reading and for sticking around ❤️

If you’re curious about gamedev or want to follow my next project, feel free to join my Telegram channel: CaveOfCode

I share the process there from a very amateur, very chaotic developer perspective. P.S. The posts are in Russian, but you can always translate them 😄

Space Goose: a 2D Pixel Art Pet Project with Unity and Junie

SmirnovW — Thu, 02 Oct 2025 18:35:24 +0000

Hey everyone! 👋
I decided to run my own little game jam: a fast pet project in the genre of 2D Horde Survival with Tower Defense elements.

The Setup

The idea is simple:
Somewhere in deep space, a lonely astronaut goose stumbles upon a broken portal. To get back home, he needs to repair it. But while he tinkers with the wires, endless hordes of cosmic monsters rush at him.

That’s basically the whole plot 😅 - the rest is pure chaos.

Tech Stack

To speed things up, I decided to use everything I had at hand:

Unity (2D) - core gameplay.
Aseprite - pixel art editing.
GPT - concept generation (goose, monsters, turrets).
Junie (AI agent in Rider) — generating and fixing code.
Itch.io - assets for backgrounds and extra stuff.

First Steps

First, I needed the main character. DALL·E generated a bunch of different versions, and in the end I assembled one unique design - with plenty of my own pixel drawing on top in Aseprite. That’s how my astronaut goose was born 🪿🚀.

I used Junie to generate character movement, then added a Particle System for the jetpack flames — worked out pretty nicely. The trickiest part was making the movement feel like it’s happening in space: instead of stopping instantly when the player releases a key, the character keeps drifting for a bit due to inertia.

For space backgrounds I didn’t bother generating anything; I just grabbed a free pixelart backgrounds on itch.io

Monsters

The first enemy was drafted in DALL·E as a rough concept and then fully redrawn in Aseprite. For animation, I kept things simple: a basic open/close mouth cycle plus a squash effect while moving. The chase AI script for the monster was generated in just a couple of minutes with Junie.

Later I added an “infected astronaut” with a parasite instead of a head - kind of like a Half-Life headcrab 👾

Turrets: Goose Engineering Madness

I didn’t want boring machine guns or rocket launchers. A game about a space goose has to be weird and funny. That’s how my favorite turrets came to life:

Toaster Turret 🍞: fires bread slices like a real toaster blasting into the ceiling.

Gramoquack 🎶🪿: a gramophone with a horn shaped kind of like a goose beak, inspired by its form. It fires a powerful “quack” sound wave that sweeps away everything in its path.

KFC Turret (Kill Fu**ing Corn) 🌽💥: inspired by a Family Guy joke. Instead of chicken drumsticks, it fires corn - the goose’s sworn enemy (I don't know why 😅) .

Cucumber Turret 🥒☣️: a jar of pickles on a base. Fires poisoned cucumbers that apply DoT damage to enemies.

Coding with AI: Pain and Joy

Let’s be clear: AI agents speed things up, but there’s no magic here.
Example: I needed to destroy projectiles once they left the arena (bounded by a PolygonCollider2D).

GPT and Junie suggested 100-line “warp-jump star system” solutions, while the real fix was just a simple OnTriggerExit2D with Destroy(projectile) and detecting a projectile by it's tag. Five lines of code. I found it in some random seven-year-old YouTube video 🙃

Takeaway: results depend heavily on how precisely you phrase the prompt and how much context you provide. Without basic knowledge of the tech you’re coding for, AI will mostly get in the way.

After that, I started adding more gameplay details step by step:

First, I gave bullets actual damage so monsters can finally be killed 💀
Then I added a Wave Manager - Junie generated it in about a minute, which was pure joy.
Next came a custom cursor: I hid the system one and replaced it with a sprite following the mouse.
I also built a turret selection menu where turrets can be rotated left or right 👉👈
And finally, I gave the goose a small animation upgrade to make it feel a bit more alive.

Conclusion

The project is still in active development. I’m not aiming for perfect code or flawless pixel art - the goal is to have fun and see how much AI can actually speed up gamedev. Sometimes AI agents save hours, other times they drag you into over-engineered rabbit holes where a 2015 YouTube tutorial has the real answer.

I’m continuing to work on the game, and I’ve already got a pile of ideas for new monsters, resources, and turrets. So stay tuned - more updates are on the way 🚀

If you’re curious about this project and want to catch the updates first, come hang out with me on Telegram: CaveOfCode

P.S. The posts are in Russian, but you can always translate them 😄

Building a Whiteboard with React and Canvas API. Part 1: First steps.

SmirnovW — Wed, 10 May 2023 15:25:02 +0000

Before you start reading, you can check the result here:
demo

Table of contents

Overview
First steps
Move it
Writing text

Overview

“Why do we fall? So that we can learn to pick ourselves up”

Hello there! In this series of articles, I'll walk you step by step and together we'll create a whiteboard!

No more words, let's code!

First steps

§ In this part we will learn basics about the Canvas API and how to draw.

First, let's create a base skeleton of our application. To make it faster, I'll use the Create React App.

💡 Please note, that we're going to use the Typescript in this project. No worries if you don't have experience with the Typescript, you'll understand the code and probably will like it ❤️

yarn create react-app my-whiteboard --template typescript

💡 You also can use the npm

Now let's change the App.tsx, and add some code.

// App.tsx

function App() {
    const [context, setContext] = useState<CanvasRenderingContext2D | null>(
        null
    );

    const setCanvasRef = useCallback((element: HTMLCanvasElement) => {
        element.width = window.innerWidth;
        element.height = window.innerHeight;
        const canvasContext = element.getContext('2d');

        if (canvasContext !== null) {
            setContext(canvasContext);
        }
    }, []);

    const onMouseDown = () => {
        console.log('context', context);
    };

    return (
        <div>
            <canvas ref={setCanvasRef} onMouseDown={onMouseDown} />
        </div>
    );
}

export default App;

Let's run it.

yarn start

Now if you click in your browser, you'll see the context in the console 🎉

But what it is the context? Context - this is the interface, that provides access to the Canvas API. Basically any manipulation that we are doing with the canvas, we are doing with context. In more details you can read about it here CanvasRenderingContext2D

Now let's draw our first pixels ✨

Let's change the method onMouseDown.

// App.tsx
const onMouseDown = (event: MouseEvent) => {
    if (context) {
        context.fillStyle = '#ffd670';
        context.fillRect(event.pageX, event.pageY, 200, 200);
    }
};

Now by clicking in your browser, you'll see the square, and you can draw as many as you can, isn't it awesome? 😎

But let's brake down what's happening here:

We're using the fillStyle to specify the color to use inside shapes.
Method fillRect draws a rectangle that is filled according to the current fillStyle.

Architecture.

§ In this part, we will define the basic architecture of our whiteboard.

Drawing a square is already something we can be proud of, but we need to manipulate it somehow, move it, resize it and etc.

Here we need to understand an important concept of the canvas. Everything we draw on the canvas will stay on the canvas until we don't clean it. All canvas drawings are just drawings and not objects with properties, so we can't manipulate them independently.
Due to this, we need to define the following requirements:

Whenever we do changes to a canvas, we have to clear and then redraw the whole canvas.
We need to have a canvas object model of everything we have on canvas to be able to redraw it.

How can we implement that? We have a good example in front of us, in the browser.
When the browser renders a page, it creates different layers. A layer might contain a bunch of elements. that can be combined to be shown on the screen.

💡 This is not an accurate explanation of how layers work in the browser. But education-wise, let's keep thinking about it in this way.

Presuming this, we can consider that a square we're drawing should be presented as an object with properties. The object is needed to store information about canvas drawings. And whenever we create (draw) a new object(square) we should create a new layer. Then, as browsers, we should composite these layers in one big picture on the canvas.

Summarising all of these requirements, we can have this schema:

Let's define the LayerInterface, CanvasObjectInterface and implement the Layer and CanvasObject classes.

// canvas/layer/type.ts
import { CanvasObjectInterface } from 'canvas/canvas-object/type';

export interface LayerInterface {
    isPointInside(pointX: number, pointY: number): boolean;

    setActive(state: boolean): void;

    isActive(): boolean;

    addChild(child: CanvasObjectInterface<any>): void;

    getChildren(): CanvasObjectInterface<any>[];
}

// canvas/canvas-object/type.ts

export interface CanvasObjectInterface<T> {
    getOptions(): T;
    setOptions(options: T): void;

    getXY(): number[];
    setXY(x: number, y: number): void;

    getWidthHeight(): number[];
    setWidthHeight(width: number, height: number): void;

    move(movementX: number, movementY: number): void;
}

LayerInterface - is intended to be a canvas object that contains width, height and coordinates of the layer. Also it contains other canvas objects.

CanvasObjectInterface - is intended to be a canvas object that contains width, height and will be drawn on the canvas.

Now we will implement these interfaces:

// canvas/layer/layer.ts

export class Layer extends CanvasObject implements LayerInterface {
    private active = false;
    private children: Array<CanvasObjectInterface> = [];

    setActive(state: boolean) {
        this.active = state;
    }

    isActive() {
        return this.active;
    }

    addChild(child: CanvasObjectInterface) {
        this.children.push(child);
    }

    getChildren(): CanvasObjectInterface[] {
        return this.children;
    }

    isPointInside(pointX: number, pointY: number, padding = 0) {
        const { x, y, w, h } = this.getOptions();

        return (
            pointX > x - padding &&
            pointX < x + w + padding &&
            pointY > y - padding &&
            pointY < y + h + padding
        );
    }
}

// canvas/canvas-object/canvas-object.ts
import { CanvasObjectInterface } from './type';

export class CanvasObject<T extends BaseDrawOptions>
    implements CanvasObjectInterface<T>
{
    options: T = {
        x: 0,
        y: 0,
        w: 0,
        h: 0,
    } as T;

    constructor(options: T) {
        this.options = { ...options };
    }

    getOptions(): T {
        return this.options;
    }

    setOptions(options: T) {
        this.options = { ...this.options, ...options };
    }

    getXY(): number[] {
        return [this.options.x, this.options.y];
    }

    setXY(x: number, y: number) {
        this.options.x = x;
        this.options.y = y;
    }

    setWidthHeight(width: number, height: number) {
        this.options.w = width;
        this.options.h = height;
    }

    getWidthHeight(): number[] {
        return [this.options.w, this.options.h];
    }

    move(movementX: number, movementY: number) {
        const { x, y } = this.options;
        const layerX = x + movementX;
        const layerY = y + movementY;

        this.setXY(layerX, layerY);
    }
}

We've created Layer and CanvasObject classes, now let's see how they can help us.

Let's update the App.tsx.

// App.tsx

function App() {
    const [isMousePressed, setMousePressed] = useState<boolean>(false);
    const [context, setContext] = useState<CanvasRenderingContext2D | null>(
        null
    );

    const [layers, setLayers] = useState<Array<Layer>>([]);
    const [selectedLayer, setSelectedLayer] = useState<Layer | null>(null);

    const setCanvasRef = useCallback((element: HTMLCanvasElement) => {
        element.width = window.innerWidth;
        element.height = window.innerHeight;
        const canvasContext = element.getContext('2d');

        if (canvasContext !== null) {
            setContext(canvasContext);
        }
    }, []);

    const reDraw = () => {
        if (context) {
            context?.clearRect(0, 0, window.innerWidth, window.innerHeight);
            layers.forEach((layer) => {
                const children = layer.getChildren();

                children.forEach((child) => {
                    const options = child.getOptions();
                    if (layer.isActive()) {
                        context.fillStyle = '#70d6ff';
                    } else {
                        context.fillStyle = '#ffd670';
                    }

                    context.fillRect(
                        options.x,
                        options.y,
                        options.w,
                        options.h
                    );
                });
            });
        }
    };

    useEffect(() => {
        reDraw();
    }, [layers]);

    const onMouseDown = (event: MouseEvent) => {
        setMousePressed(true);

        if (context) {
            const detectedLayer = layers.find((layer) =>
                layer.isPointInside(event.pageX, event.pageY)
            );

            if (detectedLayer) {
                if (selectedLayer) {
                    selectedLayer.setActive(false);
                }

                detectedLayer.setActive(true);
                setSelectedLayer(detectedLayer);
                reDraw();
            } else {
                selectedLayer?.setActive(false);
                setSelectedLayer(null);

                const options = {
                    x: event.pageX,
                    y: event.pageY,
                    w: 200,
                    h: 200,
                };
                const rect = new CanvasObject(options);
                const layer = new Layer(options);
                layer.addChild(rect);
                setLayers([...layers, layer]);
            }
        }
    };

    return (
        <div>
            <canvas
                ref={setCanvasRef}
                onMouseDown={onMouseDown}
            />
        </div>
    );
}

The code above will be triggered on the mouse down event and the method onMouseDown will search for a layer using the method isPointInside, which we implemented for the Layer class.

🎉 Now we can draw and select squares 🎉

Move it

§ In this part, we create a mechanism of moving canvas elements by mouse.

We can draw, we can select, next we'll add the movement functionality.

First, we will update the Layer class and add this code:

// canvas/layer/layer.ts
export class Layer extends CanvasObject implements LayerInterface {

    // rest of the code ...

    move(movementX: number, movementY: number) {
        super.move(movementX, movementY);
        this.moveChildrenAccordingly(movementX, movementY);
    }

    moveChildrenAccordingly(movementX: number, movementY: number) {
        for (const child of this.children) {
            child.move(movementX, movementY);
        }
    }
}

Update the App.tsx file and add new methods, onMouseUp and onMouseMove.

function App() {
    // rest of the code ...

    const onMouseMove = (event: MouseEvent) => {
        if (isMousePressed && selectedLayer) {
            selectedLayer.move(event.movementX, event.movementY);
            reDraw();
        }
    };

    const onMouseUp = () => {
        setMousePressed(false);
    };

    return (
        <div>
            <canvas
                ref={setCanvasRef}
                onMouseDown={onMouseDown}
                onMouseUp={onMouseUp}
                onMouseMove={onMouseMove}
            />
        </div>
    );
}

🎉 We can draw, select and move objects on the canvas 🎉

Writing text

§ In this part, we learn how to draw text in the canvas.

Let's make the stickers a bit more useful by adding text on them 😎

We're going to introduce a CanvasText object, it will contain text specific information: text, font size, color and etc.

// canvas/canvas-text/type.ts
export interface TextDrawOptions extends BaseDrawOptions {
    text: string;
    color: string;
    fontSize: number;
}

// canvas/canvas-text/canvas-text.ts
import { CanvasObject } from 'canvas/canvas-object';
import { TextDrawOptions } from './type';

export class CanvasText extends CanvasObject<TextDrawOptions> {
    constructor(options: TextDrawOptions) {
        super(options);
    }
}

Now we need to draw text, for this purpose, the canvas rendering context provides the fillText method to render text.

We will change the reDraw method by adding the fillText.

Also, we need to mark the CanvasText and CanvasObject to be able to choose between the fillRect and fillText methods and understand what should be used to draw objects.

For that purpose, we will add a new property type to the CanvasObjectInterface and will update its implementation.

// canvas/enums.ts
export enum TYPES {
    TEXT,
    RECT,
}

// canvas/canvas-object/type.ts
export interface CanvasObjectInterface<T> {
    // rest of the code ...

    getType(): string;
    setType(type: string): void;
}

// canvas/canvas-object/canvas-object.ts
import { TYPES } from 'canvas/enums';

export class CanvasObject<T extends BaseDrawOptions>
    implements CanvasObjectInterface<T>
{
    // rest of the code ...
    private type = TYPES.RECT;

    // rest of the code ...
    setType(type: TYPES) {
        this.type = type;
    }

    getType(): TYPES {
        return this.type;
    }
}

And small changes for the CanvasObject.

export class CanvasText extends CanvasObject<TextDrawOptions> {
    constructor(options: TextDrawOptions) {
        super(options);
        this.setType(TYPES.TEXT); // we're setting the object type
    }
}

Next let's change the reDraw method.

    const reDraw = () => {
        if (context) {
            context?.clearRect(0, 0, window.innerWidth, window.innerHeight);
            layers.forEach((layer) => {
                const children = layer.getChildren();

                children.forEach((child) => {
                    if (layer.isActive()) {
                        context.fillStyle = '#70d6ff';
                    } else {
                        context.fillStyle = '#ffd670';
                    }

                    const type = child.getType();

                    if (type === TYPES.RECT) {
                        const options: BaseDrawOptions = child.getOptions();

                        context.fillRect(
                            options.x,
                            options.y,
                            options.w,
                            options.h
                        );
                    }

                    if (type === TYPES.TEXT) {
                        const options: TextDrawOptions = child.getOptions();

                        context.save();
                        context.fillStyle = options.color;
                        context.font = `${options.fontSize}px monospace`;
                        context.fillText(
                            options.text,
                            options.x,
                            options.y,
                            options.w
                        );
                        context.restore();
                    }
                });
            });
        }
    };

Well, let's now focus on what is happening in the code snippet above. We're checking the current type if it equals to TEXT and we start rendering the text object. You can see new context methods that we didn't see before, save() and restore().
We're using this method to save the current context state and restore it later.
What does it mean? We're using the fillStyle to set the font's color, but by changing this property, we will change NOT ONLY the font color but also change the current canvas color.
For example, if we try to call fillRect right after the fillText, without using save() and restore(), it will render a square with the same color that we applied before for text.
Another property we've used here is font, it specifies the current text style. This string uses the same syntax as the CSS font specifier.

🎉 Now we can draw text on the canvas! 🎉

We did our first steps in building our own white board! And it wasn't so difficult right?

In the next part we will improve it!

P.S. I'm working on a second part now. If you like this article, please share you feedback in the comments, thanks in advance!