Using Arrays to Generate Tile-based Graphics

Ok, so here's the thing... I've been looking all over the forums trying to find info on using arrays. I've found a few threads on them, but nothing that tells me how to use them in construct. I apologize if I'm simply missing them, but I'd really appreciate an example .cap that shows me how to...

a. call numbers from an array in a txt file (or ini, though I'm not sure how to make one)

b. use a called number to tell a sprite what frame of animation I want it to display

c. how to change what part of the array a given sprite might be accessing (so I can have only enough tiles to fill the display, yet have a much bigger map in the array)

If someone (or someones, plural ) could help me to learn this, I'd greatly appreciate it. My goal is to use all of this to create an efficient graphics engine for the game I'm working on, and perhaps even create a level editor that creates the txt or ini files the engine calls from) Thanks in advance.

I've been working on something like this for a project of my own. Not sure about c, but a and b I've covered in it.

You can take a look at the cap and see how I did it.

In the rar file there's the cap and a grid.txt file. Just click the load button when running the cap and pick the grid.txt and the array will be loaded. I used ROJOhounds 2D array editor to make the array.

You'll need the File Dialog plugin.

http://www.box.net/shared/l98tp0crvg

It can be a bit daunting at first but after a bit of work, it gets pretty easy. I don't have the time right now to make a .cap for you, but I'll try to explain a few things as best I can.

If you don't know already, an array is basically a grid, like any other grid, except on each point it can store a value. For instance, 1,1 would be a value (1X and 1Y) and 4,3 could have a different value. Most arrays can be 3 Dimensional, it helps to think of it like a spreadsheet in Microsoft Excel or OpenOffice Calc, most are set up on a grid for your X and Y and each sheet would be like a Z.

With that said, once you create an array, it's completely blank. From here you can choose to load a file (and no, I'm sorry, you can't exactly load straight from a .txt file, hopefully C2 will have that feature), or input a value.

To input a value, simply pick the command "set value at X" or "X,Y" or "X,Y,Z". From there you are able to select the address for the value you want to store. Be forewarned, if you select an address that is outside the bounds of the array (for instance, if you set the X size to 10, and you pick the number 11, it won't show, but any number from 1-10 is fine, also remember that the arrays are always 1-based so 0 is also out of bounds).

After you have set a few values, you can save the array. Chose the save command, and pick the name of a file to save it to. If you aren't using a common dialog object to allow the user to choose a save location, it always helps to save the file as [AppPath+"yourarray.extention"]. You can save the file as anything you want, even make up an extension, heck call it, "yourarray.lol", it doesn't matter, the data will still be the same and construct will recognize it if you load it.

To load it, it's the exact same thing, except this time click the load command instead of save.

In calling a value from an array during an expression, all you need to do is say [yourarray(x,y,z)] then input the coordinates you wish.

Arrays have 4 conditions that can be used. 3 of them are for referencing coordinates either as a 1D 2D or 3D coordinate. The last one, for each, is a loop. Basically it will run through each element and perform actions based on the events and the conditions. For instance, you can say [for Each element - set value at yourarray.currentX,yourarray.currentY,yourarray.currentZ to "Ziggy like Chicken"] and every coordinate on that array will say "Ziggy like Chicken".

For level editors, it's a good idea to learn how to use values correctly to access a part of an array. For instance, the .CurrentXYZ will access the current section during a for each loop, but in your case you probably want it set to a grid. So, say you have your condition to when mouse left is clicked, instead of just saying "write value to 1,1,3", you'll probably want it to pick the coordinate that your mouse is pointing at, so say "write value to round(mouseX/32)*32, round(mouseY/32)*32, 1" and it will set the index to where ever your mouse is pointing on a 32x32 grid size. and of couse, also in this condition you can tell it to create a tile at that specific location, and all that fun stuff.

Now that you can place tiles, you'll probably want to load them too. All you need to to to load them is whenever the load is triggered run a loop, call it "load" one time. as a sub event in that load loop, do a for each element on your array loop. As a sub event to that, you're going to compare a value on your array. [if value at currentX,currentY,currentZ is equal to "tile" (or whatever value you indicated to be a tile in the placement event) then create a tile at currentX*32, currentY*32, currentZ*32]

And that's the basics, there are many more things you can do with a tile based editor, for instance, fringe tiling (which makes it so your tile changes based on the tiles around it), which I've got a fairly decent article on the subject here,

http://www.create-games.com/article.asp?id=1869

although that was written to be used in MMF2, construct uses the same logic.

Hope this helped a little bit, and if you're still stuck I'm sure someone will help you further.

http://dl.dropbox.com/u/16909290/VengeEdit.zip

This is a build of the level editor I'm currently designing. I'm not entirely comfortable posting the source code at this stage, but I can work on a lite version as an example for everyone when I get a chance.

The two boxes on the left with the X control the size of the layout, the one below that controls the scroll speed. The List next to that has all of the objects in the currently selected group that you can select to place. Next to that there are the 4 categories to choose from, foreground which is the collision type play area tiles, background which is the non collision type backing tiles, object which are all the placeable objects and items for the background, and misc which currently contains nothing yet (that's reserved for player starts, enemy spawns, level changes, ect.) The red box will hide the foreground when clicked. The colored boxes will change the tint of the object being placed, and you can fine tune it by changing the values at the bottom or click on the preview box to open the color picker. The list above the colors changes the backdrop, and the two boxes beside it change it's offset. And of course, the last 3 buttons save, load and erase the level. I've included an example level with the .zip.

Wow, thanks for all the info, definitely some intense reading for me to wrap my head around, but I really need to learn it. I'm creating a game demo for one of my university classes using construct and its just going to be way too ridiculous to hand place every induvidual tile in each map in each layout :S

I'm going for the epically underused Zelda II: The Adventure of Link model of an overworld map and turns into a side-scrolling platformer at specific locations. So arrays are going to be a must. But if anyone can spare the time, commented caps are DEFINITELY the best way for me to learn. The theory is wonderful, but seeing it in action really helps me to learn it, so if anyone can find the time, it would be intensely appreciated.

EDIT: VengeEdit looks crazy cool, definitely the idea I'm going for

EDIT: question, would it be better to make each different terrain type its own sprite, or would it be better to have each type be a different frame all contained in a single object? I'd think the single object would be easier on the cpu...?

How did VengeEdit work? Was it too slow? Because they uses separate objects. The other trick to loading levels for use in play is to use the "canvas" object. Basically, it takes whatever object you tell it to and pastes it to the canvas as it's own image. So rather than having multiple sprites, you have one large backdrop, which I may be wrong but it's a little less for the cpu to deal with. Someone else might be able to elaborate.

And thanks, I'm glad you like it.

How did VengeEdit work? So rather than having multiple sprites, you have one large backdrop, which I may be wrong but it's a little less for the cpu to deal with.

I don't know how Construct handles the graphics internally so this might be way off but I remember from my MMF/MMF2 days we had a discussion over at TDC about having big backdrops and such. The general conclusion was that having one large picture would be advised against since if you simply had smaller images they would only be calculated for when they were visible. But if you then had one huge picture the program would have to calculate the entire image every tick, not only the part that is visible, which would then possibly cause slowdown on not so powerful systems.

Now this was MMF2 so it may not apply to Construct at all, I could not say.

It makes sense. I haven't been using the canvas in the editor, and with leaving them as sprites I haven't witnessed any slowdown, although I have been restricting the size of the levels to 640x2-3 by 480x2-3, but we'll see as I make more progress into the game itself.

VengeEdit worked really well. It's definitely the idea I'm going for, I'm just still confused as to how to implement it all in Construct. I don't know if it's just me, but it seems really unintuitive with how Construct handles arrays. I don't really understand why the array object doesn't come with a spreadsheet style popup that let's you enter values into the field. Also, how should I handle scrolling, I would assume to simply have the layout load more of the array than is visible at any given time, but again, I'm not sure how to make construct do all of this...

I don't think anything has that feature built in. There is a tool that R0J0hound built here-

Although I don't have to use that to build the levels in that editor. I use it more for arrays that need inputs like a spreadsheet, like my animations list for my animation engine.

Don't worry too much about scrolling. What I do for mine is I always set the array size to round(layoutWidth/32), round(layoutHeight/32), whatever z, and 32 is substituted for the size of your tiles, that way, anytime the size of the layout changes, it changes the size of the array.

If you refer back to the article I posted, it should let you know how to do most of the basics. Like I said, it was written for MMF2, but it's basically the same structure as Construct (the wording on some of the commands is a bit different)

Most of the time with arrays, it's just getting your head wrapped around the concept. I'm sure by now you've read plenty on them, as well as the information we've provided you with here, eventually it's going to go BOOM and you'll be on track. If it's too difficult to muster at this point, try putting together something else and then come back to it.