Frogatto & Friends

Frogatto sprite Avilable on the App Store

Frogatto & Friends is an action-adventure game, starring a certain quixotic frog. Give it a try!
We're trying to push 2D platforming, pixel-art, and music into uncharted territory. We hope you like the results!
Also, Frogatto has a very flexible game engine you can use to make your own creations.

Ranges – a shorthand for MTPs

August 19th, 2010 by Jetrel

I’m well aware in writing this that I haven’t written that primer post I’ve been meaning to write describing what MTPs are. I’m going to try and pretend I’ve done so already so as not to clog up this post, and will fix that retroactively.

To sum it up, though a “multi-tile-pattern” lets you define a tile pattern that’s drawn across more than just one 16×16 tile. It allows us to draw elaborate set pieces that will be put onto a level if the underlying tiles are laid out a certain exact way. For example, it’s what allows us to draw the “obviously larger than one tile” corners of the house interiors. Remember – everything in frogatto is auto-tiled, so this means those large set-pieces will just “appear” if you arrange the tiles the right way.

A key problem we ran into was scaling for the work-time of the guy scripting them (me). These multi-tile-patterns had to have each individual tile in them, specified by hand. For a little 2×2 house corner, this was trivial. For a huge 3*5 layer of plants, with two layers of graphics, and with an alternative graphic option, this time-cost exploded exponentially. This, for example, is the tile pattern for a center section of grass (as seen in the first section of the game):

To help people visualize, this is the tile sheet being drawn. We’re drawing the stuff inside the red boxes. The very short boxes are a foreground overlay – everything else is behind frogatto. Because frogatto’s feet never reach below a specific height, we only needed a 1tile tall overlay. The bottom two boxes are “alternates”; at times, they’ll be randomly used instead of the first set of boxes, to make stuff less repetitive and more organic.

This whole pattern will get used when the game detects a grass tile at the left end of of a row of grass tiles. It gets drawn slightly-offcenter, over that tile.

[multi_tile_pattern]
chance=100
pattern=" ->tile1 , ->tile2 , ->tile3 ,
->tile4->tile4fg, ngs->tile5->tile5fg, ngs->tile6->tile6fg, ngs
->tile7 , ->tile8 , ->tile9 ,
->tile10 , ->tile11 , ->tile12 , "

[tile1]
image=tiles/plants.png
tiles=00
zorder=-4
[/tile1]
[tile2]
image=tiles/plants.png
tiles=01
zorder=-4
[/tile2]
[tile3]
image=tiles/plants.png
tiles=02
zorder=-4
[/tile3]

[tile4]
image=tiles/plants.png
tiles=10
zorder=-4
[/tile4]
[tile4fg]
image=tiles/plants.png
tiles=50
[/tile4fg]
[tile5]
image=tiles/plants.png
tiles=11
zorder=-4
[/tile5]
[tile5fg]
image=tiles/plants.png
tiles=51
[/tile5fg]
[tile6]
image=tiles/plants.png
tiles=12
zorder=-4
[/tile6]
[tile6fg]
image=tiles/plants.png
tiles=52
[/tile6fg]

[tile7]
image=tiles/plants.png
tiles=20
[/tile7]
[tile8]
image=tiles/plants.png
tiles=21
[/tile8]
[tile9]
image=tiles/plants.png
tiles=22
[/tile9]

[tile10]
image=tiles/plants.png
tiles=30
[/tile10]
[tile11]
image=tiles/plants.png
tiles=31
[/tile11]
[tile12]
image=tiles/plants.png
tiles=32
[/tile12]

[alternative]
[tile1]
image=tiles/plants.png
tiles=60
zorder=-4
[/tile1]
[tile2]
image=tiles/plants.png
tiles=61
zorder=-4
[/tile2]
[tile3]
image=tiles/plants.png
tiles=62
zorder=-4
[/tile3]

[tile4]
image=tiles/plants.png
tiles=70
zorder=-4
[/tile4]
[tile4fg]
image=tiles/plants.png
tiles=a0
[/tile4fg]

[tile5]
image=tiles/plants.png
tiles=71
zorder=-4
[/tile5]
[tile5fg]
image=tiles/plants.png
tiles=a1
[/tile5fg]

[tile6]
image=tiles/plants.png
tiles=72
zorder=-4
[/tile6]
[tile6fg]
image=tiles/plants.png
tiles=a2
[/tile6fg]

[tile7]
image=tiles/plants.png
tiles=80
[/tile7]
[tile8]
image=tiles/plants.png
tiles=81
[/tile8]
[tile9]
image=tiles/plants.png
tiles=82
[/tile9]

[tile10]
image=tiles/plants.png
tiles=90
[/tile10]
[tile11]
image=tiles/plants.png
tiles=91
[/tile11]
[tile12]
image=tiles/plants.png
tiles=92
[/tile12]
[/alternative]
[/multi_tile_pattern]

😯 Yeah. This makes it a pain in the ass to change stuff. And it’s dumb, because in “plain english”, all we’re doing is telling the game to “draw this single, large rectangular section of 12 tiles from our tileset.”

So we made a shorthand to do precisely that:

[multi_tile_pattern]
chance=100
pattern=" ->tile1 , ->tile2 , ->tile3 ,
->tile4->tile4fg, ngs->tile5->tile5fg, ngs->tile6->tile6fg, ngs
->tile7 , ->tile8 , ->tile9 ,
->tile10 , ->tile11 , ->tile12 , "

[range]
image=tiles/plants.png
from=tile1
to=tile12
tiles=00
zorder=-4
[/range]

[range]
image=tiles/plants.png
from=tile4
to=tile6
tiles=50
[/range]

[alternative]
[range]
image=tiles/plants.png
from=tile1
to=tile12
tiles=60
zorder=-4
[/range]

[range]
image=tiles/plants.png
from=tile4
to=tile6
tiles=a0
[/range]
[/alternative]
[/multi_tile_pattern]

Much better. 😀

The specific meanings of the FML keys there are:
from= and to= indicate the upper-left and lower-right tiles in the pattern=””

tiles= indicates a position in the tilesheet. The first character indicates row, the second, column (reverse of the usual order). They’re written in (IIRC) base-52, so that indicating a position is only one character long. The position indicated here is the upper-left-corner of the range; the lower-right corner is derived, you don’t need to (indeed, can’t) specify it.

The other FML keys will get covered in my primer on MTPs.

FacebooktwitterredditmailFacebooktwitterredditmail

One response to “Ranges – a shorthand for MTPs”

  1. Lily S says:

    This is a very inspiring post. Thanks to it I implemented MTP support in the tile code I was writing for a game in Python, which has turned out very useful when calling from it for non-map objects and the like.