GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - mankidev/codixel: Pixel art skill for Claude Code: how to make good pixel, animated game sprite out, effects etc.

BranchesTags
Open more actions menu

Latest commit

 

History

71 Commits
71 Commits

Folders and files

NameName
Last commit message
Last commit date
.github
.github
 
 
core
core
 
 
images
images
 
 
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
SECURITY.md
SECURITY.md
 
 
SKILL.md
SKILL.md
 
 

Repository files navigation

Codixel logo

Codixel

Codixel is a Claude Code skill for making pixel art with AI: game sprites, characters, animations and effects like fire, smoke and beams. It covers how to describe what you want, the steps from a reference image to a finished animated sprite, and why you have to check every step.

Fire without and with Codixel

Left: without Codixel. Right: with Codixel.

Steps

God, step by step

  1. Find real images of what you want. Use your own, or ones whose license allows it.
  2. Have the AI put it together in code from those images.
  3. Ask for bones so the parts can move.
  4. Ask for pixel art and say how it should look, for example "realistic".
  5. Look at the animation frames one by one.
  6. Put it in the scene and check it next to everything else.

Here the bones come before the pixels, because the god is put together from several images. With a single image, like Kinryu, turn it into pixels first and add the bones after.

God animation

God battle

What to do

  • Remember Claude Code is not a painter, it only writes code
  • Start from a real reference image
  • Give a reference to compare with
  • Go step by step
  • Ask for how it should look, like "realistic"
  • Build characters from only a few pixels
  • Use dither only where two colors meet
  • Find sounds on the internet, don't let the AI make them
  • Never say "do this" or "copy this" and walk away, check every step

Claude Code is not a painter

Claude Code cannot draw pixel art from scratch like a painter. It only writes code.

Kinryu, drawn from scratch vs from a reference

Left: Claude Code drew the dragon from scratch. Right: Claude Code turned a reference image into pixels and moved it.

Example: Kinryu

Kinryu, step by step

  1. Start from one picture of a gold dragon.
  2. Take off the background and make it pixels.
  3. Find the line from head to tail and move the body along it.
  4. Put it in the scene.

Kinryu animation

Spines

Black leopard walking, with its spine and leg bones

Codixel is good at understanding animal spines. It builds the body, legs and tail on the spine and moves them the way the real animal walks.

Dither

The same scene drawn four ways

Pixel art has only a few colors, so a sky or a ball needs a trick to change softly from one color to the next:

  • Smooth: hundreds of colors. It looks like a blurry photo.
  • Bands: flat stripes. You see hard lines between them.
  • Dither everywhere: soft, but grainy.
  • Bands and a dither strip: flat colors, mixed only where two bands meet. Codixel uses this one.

Hue shifting

Five greens without and with hue shifting

Hue shifting changes the hue of each color in a palette along with its lightness.

Outline

The same clover with no outline, an outline, and an outline with rim light

The outline takes its colors from the sprite. Rim light makes the edges that face the light one step lighter.

Sound

Don't let the AI make the sounds for your game. AI-made sounds are easy to spot. Have it find sounds on the internet instead.

Never "do this" or "copy this" and walk away

Never tell the AI "do this" or "copy this" and leave it. Check it the whole time it works and make sure what you get is what you wanted.

While this README was being written, the AI added a lot of things I didn't ask for. That is why you should check every step.

Heirs of the Valley, first version vs now

After every step, look at the result. Does it look the way you described it?

If something is wrong, say exactly what is wrong and run the step again. Move on only when the step is right.

Install

git clone https://github.com/mankidev/codixel ~/.claude/skills/codixel

Claude Code loads it on the next start. It runs when you ask for pixel art.

Examples

Astral Prison, reference vs result

Astral Prison animation

Beams, smoke explosion, fire breath and hell fire

Mini characters

Hollowchain

Ocean animation

Waterfall animation

River animation

Beach wave animation

Ruby gem animation

Blue, violet, crimson and emerald space backgrounds

Crimson background with moving layers

License

MIT. See LICENSE.

About

Pixel art skill for Claude Code: how to make good pixel, animated game sprite out, effects etc.

Topics

8bitagent-skillsaiai-artclaude-codeclaude-skillditheringgame-developmentgame-effectsgamedevindie-gamejavascriptparticle-effectspixel-artpixel-art-toolsretrosprite-animationsprites

Resources

Readme
MIT license

Code of conduct

Code of conduct

Contributing

Contributing

Security policy

Security policy
Activity

Stars

162 stars

Watchers

0 watching

Forks

11 forks
Report repository

Releases

Packages

Contributors

Languages

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.