WebAssembly 2D game with Go. Part 3: Drawing character.
3 min read

WebAssembly 2D game with Go. Part 3: Drawing character.

Hello, and welcome back to my small tutorial how to begin your adventure with WebAssembly using Go.

This is 3 part of 5. You can find other parts here:

Time to cool stuff! Well, almost cool stuff, we will do controls and animation in next section  :)

For this point we will

  1. Create a character sprite using Universal LPC Spritesheet Character Generator
  2. Load it into our go code and render it on screen
  3. Create Makefile to make our life a little easier

So what are you waiting for? Go to Universal LPC Spritesheet Character Generator and generate your Gandalf! After picking all the hair colors and T-shirts, download your character sprite and save it to public/assets folder. Now, our project must look like this:

WebAssembly 2D game: Verifying project structure

Now, let's load our character sprite and render it. First of all, let's remove count property from Game struct and add actual properties that we will be using: Character Stance X and Y positions. Also, let's define a var where we will store our image and add two more constants describing our frame dimensions (i think it's actually not 65px but 64px - sometimes you can see glitches while moving from stance to stance. You will see what i am talking about in a moment :P).

stanceX and stanceY combined with frameWidth/Height will help us to navigate through character stances available in sprite. After all, all we need is to pick right 65x65 rectangle around target stance, so, if you need stance displayed in 3rd column at 6th row just make stanceX=3 and stanceY=6, thats all!

Next, let's load image in main func:

We will use a tool called ebitenutil from Ebiten package to load png image, and, as you can see we also modified starting properties for our Game struct - stanceX and stanceY now both equals 0.

Last step, before we will see our character in browser, we need to modify our Update and Draw methods.

Just clean up Update method from our test property increment, calculate stance coordinates, cut the right rectangle from our character sprite and draw it on screen. Now, you can build our main.go file (same way as usual)  and see result in browser:

GOOS=js GOARCH=wasm go build -o public/game.wasm src/main.go

But if our go build command stay same as it was before, parcel now have an additional argument:

parcel ./public/index.html ./public/assets/*

That way we can tell parcel that there is additional files in public/assets folder that we want to serve as static assets.

Hold on for a moment. I don't know about you, but i got pretty tired pressing the Up Arrow button in terminal looking for right build command.

Let's use make to make our life easier and get rid of endless typing in terminal. All we need is to create a Makefile with 3 simple commands:

  • clean - to clean up our build cache
  • compile - for compiling our Go code to wasm
  • dev - to run clean + compile and start local dev server using parcel

That's all! Now instead of endless typing you can just run make dev and immediately see result in browser.

WebAssembly 2D game: First Character Draw

Things starting to look interesting and another milestone was reached. You can use git tag, as usual, and we moving to moving character section!

git checkout draw_character