How to draw backgrounds?

[Alex]

I had mentioned to Erik the other day that it'd be nice to have a walkthrough for drawing images on games (and an introduction to sprites in general). I was wondering in particular, how you would go about drawing drawing backgrounds on games?

As an example, suppose I want to draw the ground on my game using the images attached to this post. Not having too much experience with this, I imagine you can take one of two approaches:

1. Draw out the entire background in another program like Photoshop and upload one large image to your game.
2. Use lots of smaller sprites and combine them together *within* the game to make it seem like one contiguous piece.

Intuitively the second one approach seems like the better one to me, but I'm not sure how to accomplish this in Excalibur without rendering lots and lots of actors. Is there a way to make sprites repeat within the context of a single actor? Thanks! -Alex

[Kamran Ayub]

Hey Alex,

Tiled games are totally supported in Excalibur and in fact that is how we built Kraken Unchained. Unfortunately, there are a couple issues with the current implementation of the CollisionMap class (what you use to draw tiles). In the ludum-dare branch of Excalibur, we have a new class called TileMap that supports drawing multiple sprites per tile, so that it can draw layered images for a map.

I will definitely be doing a post at some point (probably when TileMap is stable and implemented in the main Excalibur branch) on how to use an editor liked Tiled and import it into Excalibur.

If you want to just jump in, you can look at how we implemented Level in Kraken. Essentially, we read the exported JSON from the Tiled map editor and the Tilemap just draws the tiles for us, taking care of off-screen culling. It's pretty sweet. Collisions are also fixed in the TileMap implementation.

A couple things to note:

1. Tiled can do custom arbitrary properties. So we assume every filled tile is solid unless it has a custom property where solid == "false". Terrain tiles in Tiled are handled separately but we assume the same there. If you open our map in Tiled (game\maps\Level0.tmx), and you right-click on the water tile in Tiled's Terrain editor, you'll see I also made a solid property set to false there.
2. You should use the latest Apr 25 build of Tiled because there was a bug where it didn't export terrain properties to JSON
3. We used Polylines and Objects in Tiled to place enemies and create paths. We then simply read the x, y of the objects and their Type to spawn enemies and the player (I called them Object Factories in the code). Polylines are passed to the enemy to create a path the ships move on and auto-rotate at each join.
4. We used a TopCamera but for a platformer you can use a SideCamera. The TileMap works the same way.

Hope that's enough to get off the ground. I will do a full tutorial sometime soon when things are stable.

[Alex]

Great, thanks for the response! Hoping to try it out later this week.

[Kamran Ayub]

Hey Alex,

Erik has merged in the new TileMap changes to the master branch, so it should be good to go.

1. Create your map in Tiled
2. Import Tileset into Tiled using a tileset of your preference (you may need to make one in an image editor). It should be a grid of your cells, fixed size.
3. Create some layers for your map, I suggest a Terrain layer (even if you don't use terrain tool). Usually you'll need a bunch of layers.
4. File -> Export. Export it as a JSON file.
5. Read in the JSON file using Excalibur and TileMap. We implemented Level as an ILoadable so that we could simply add levels as resources and have the loader load them. I also parsed the JSON to find the images used in the map and then also load them as well, so everything is loaded as soon as the map is loaded.

For #5, you can almost copy/paste our level and remove the Kraken-specific stuff. We plan to make importing Tiled maps into a plugin/extension that you can easily just use.

If you're doing development against Excalibur regularly, we recommend using the Git Submodule approach. That way you can keep a reference to the repository and can update whenever you want, even between releases. For more information about submodule workflow, check this out: http://blogs.atlassian.com/2013/03/git-submodules-workflows-tips/

[Kamran Ayub]

The other thing to mention is the TileMap is mostly used for drawing tiles and doing collision checking for you in an efficient manner.

You don't have to fill the TileMap totally. For example, in a platformer, maybe you position the tile map on the entire viewport/screen (let's say your map is 1500x400). Your "ground" level is at row 100, which means you have 300 tiles high for the sky. Most of the sky tiles will be blank. You'd put platforms and everything else that should be above ground there. So what do you do about the "background" of your map? That's up to you, but you could do a fixed size background image you make in an image editor and then fix it to the viewport and have it move at a slower x velocity than the player. You can layer different backgrounds and do the same thing to create a parallax effect.

On Saturday, May 3, 2014 3:42:01 PM UTC-5, Alex wrote:

[Alex]

Thanks for your replies - they were indeed enough for me to add a tilemap to my game (yay):
http://bitsonbitsonbits.com/Excalibur-Jumper/

I had a couple of questions/comments while working on this:

• Will `BaseLevel` be implemented at some point? I ended up copying the code from the Ludum-29 project and stripping it down to just read my json file. Seems like a barebones version of it would be useful, either as part of the Excalibur.js framework itself or as a plugin.
• Kamran, I see what you mean now about including the project as a submodule. Unfortunately I didn't understand its implications the first time :) and ended up using `bower install excalibur#master` as an alternative. I like the submodule approach more since it keeps commits cleaner.
• One of the biggest surprises I had was that I had to change my code to call the `addChild` method on my newly created level object (which contained the background) instead of my game object (which did not). It makes sense now that I've done it - just making a note of my revelation.
  

[Kamran Ayub]

Hey Alex,

1. Yes, in some form or fashion. This is something I want to provide as an "extension" to Excalibur probably, i.e. "excalibur-tiled" that will let you create levels as resources and load them in to construct your levels/maps.
1. I am not sure if we'll make it inherit Scene like we did for BaseLevel, or if it'll simply be a resource you reference.
2. Good to know! Didn't know you could do that with bower.
3. Yah, I'll let Erik think about that. What is happening is that engine.add(...) is really doing engine.currentScene.add(...) for you. Maybe that's too much of a shortcut that hides the details that are important. Scenes are what you add primitives to, not the game. In practical games, there is usually more than one scene, so having that shortcut off engine might be hiding why scenes are important. There's always a default scene in Excalibur as well.

Dude, that game is looking good!

I am hoping this weekend I'll get down and dirty writing some Getting Started tutorials on using scenes, actors, tile maps, loading resources, sprites, animation, etc. Hopefully that'll make it clear how to use these classes in practice (maybe I'll do a platformer example). Maybe also I can create the Tiled extension :)

[Kamran Ayub]

Hey Alex,

You can reference our PDJam entry for an example of how to draw parallax backgrounds:

http://excaliburjs.itch.io/sleepy-hollow

https://github.com/excaliburjs/PDJam1

On Saturday, May 3, 2014 3:42:01 PM UTC-5, Alex wrote:

[Alex]

Cool - thanks for the example. That game is looking really sharp!