Basics

Let's start with a basic Pixel script which just creates a blank white window:

package main

import (
	"image/color"

	"github.com/faiface/pixel"
	"github.com/faiface/pixel/pixelgl"
)

var (
	winBounds = pixel.R(0, 0, 800, 600)
)

func run() {
	cfg := pixelgl.WindowConfig{
		Title:  "TilePix basics",
		Bounds: winBounds,
		VSync:  true,
	}

	win, err := pixelgl.NewWindow(cfg)
	if err != nil {
		panic(err)
	}

	for !win.Closed() {
		win.Clear(color.White)

		win.Update()
	}
}

func main() {
	pixelgl.Run(run)
}

Result:

Now, let's create a TMX file in the same directory:

Add a new tileset - ensure that when you create the new tileset, you embed it in the map

We're going to add a two tile layers, and draw some tiles. Our tileset looks like this in Tiled:

The next step is add the map to the window. This is designed to be a painless, straightforward step. Let's see how the code has changed:

package main

import (
	"image/color"

        _ "image/png"

	"github.com/bcvery1/tilepix"

	"github.com/faiface/pixel"
	"github.com/faiface/pixel/pixelgl"
)

var (
	winBounds = pixel.R(0, 0, 800, 600)
)

func run() {
	m, err := tilepix.ReadFile("map.tmx")
	if err != nil {
		panic(err)
	}

	cfg := pixelgl.WindowConfig{
		Title:  "TilePix basics",
		Bounds: winBounds,
		VSync:  true,
	}

	win, err := pixelgl.NewWindow(cfg)
	if err != nil {
		panic(err)
	}

	for !win.Closed() {
		win.Clear(color.White)

		m.DrawAll(win, color.Transparent, pixel.IM)

		win.Update()
	}
}

func main() {
	pixelgl.Run(run)
}

Only a few additional lines. First we must have a blank import for "image/png", this is the format the tileset is saved in. Then we read the TMX file using the tilepix.Read function, then we use the m.DrawAll function to draw all layers (we only have one at the moment) to the window. The DrawAll function takes three parameters:

• The target to draw the layers to. Most of the time, you'll want to draw directly to the window.
• The colour to clear the internal batches to. This is effectively the colour you'd like to be the transparency colour. We have used color.Transparent.
• The matrix to apply to the layers. This is provided for more advanced features, you'll almost always want to have this as pixel.IM so that the layers are not shifted.

If we run the code now:

As you can see, the bottom-left corner is the bottom-left of the map we drew in Tiled. While this is simple to do, it generally won't be much use if your map is bigger than the window you're drawing. Let's try moving around the map. There is nothing special about TilePix to learn that Pixel doesn't already teach you. Let's add a camera position and you can try moving around the map by running the code yourself:

package main

import (
	"image/color"
	"math"
	"time"

	"github.com/bcvery1/tilepix"

	"github.com/faiface/pixel"
	"github.com/faiface/pixel/pixelgl"
)

var (
	winBounds    = pixel.R(0, 0, 800, 600)
	camPos       = pixel.ZV
	camSpeed     = 64.0
	camZoom      = 1.0
	camZoomSpeed = 1.2
)

func run() {
	m, err := tilepix.ReadFile("map.tmx")
	if err != nil {
		panic(err)
	}

	cfg := pixelgl.WindowConfig{
		Title:  "TilePix basics",
		Bounds: winBounds,
		VSync:  true,
	}

	win, err := pixelgl.NewWindow(cfg)
	if err != nil {
		panic(err)
	}

	last := time.Now()
	for !win.Closed() {
		win.Clear(color.White)

		dt := time.Since(last).Seconds()
		last = time.Now()

		cam := pixel.IM.Scaled(camPos.Add(winBounds.Center()), camZoom).Moved(pixel.ZV.Sub(camPos))
		win.SetMatrix(cam)

		if win.Pressed(pixelgl.KeyA) || win.Pressed(pixelgl.KeyLeft) {
			camPos.X -= camSpeed * dt
		}
		if win.Pressed(pixelgl.KeyD) || win.Pressed(pixelgl.KeyRight) {
			camPos.X += camSpeed * dt
		}
		if win.Pressed(pixelgl.KeyS) || win.Pressed(pixelgl.KeyDown) {
			camPos.Y -= camSpeed * dt
		}
		if win.Pressed(pixelgl.KeyW) || win.Pressed(pixelgl.KeyUp) {
			camPos.Y += camSpeed * dt
		}
		camZoom *= math.Pow(camZoomSpeed, win.MouseScroll().Y)

		m.DrawAll(win, color.Transparent, pixel.IM)

		win.Update()
	}
}

func main() {
	pixelgl.Run(run)
}

All code added in this latest example is taken directly from Pixel; no TilePix specific calls were changed.