Understanding the Basics of Arrays

2

Tagged

Stats

2,606 visits, 3,228 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 9 May, 2020.

The Basics: Intro

Arrays are very simple in concept but, as I have found both personally and from others who have used Construct 2 and 3, sometimes they are challenging to grasp when applying them to your projects (I'm also looking at you, Functions!!).

Since some people learn through visual means, I drew up some simple (I hope they're simple enough) images to show how Arrays work. This is only meant to be a very basic "entry level" tutorial to help establish the concepts so I won't be going into how to use more than maybe a few conditions or action lines that are associated with Arrays.

To keep with the picture theme of Arrays, the best illustration is to think of Google Spreadsheets or MS Excel. An Array is literally a "grid" of cells that hold information. I like to call Arrays the multi-variable variable. Where a global or instance variable can only hold one instance of one type of data (eg: number or string), Arrays can contain multiple data instances of both number and/or string. However, each cell, like a regular variable, can only hold one type and not both at the same time.

Defining an Array

An Array is, technically, a 3D object in Construct. To keep with this mental visual, although Arrays do not occupy space on the Layout, they do occupy digital space all the same. And even though Construct is a 2D game engine, the Z-axis is still an aspect one must consider.

Setting the Parameters

Once you have created an Array in the Project window, you should see the Parameters window load with information regarding the Array. We're going to kill two birds with one stone by 1) defining the dimensions of the Array, itself, and 2) addressing how even the Parameters field is an Array (of sorts).

As mentioned, an Array is (technically) a 3D object in Construct. Like a real 3D object, it has a Width (X-axis), Height (Y-axis), and Depth (Z-axis). Unlike actual (or virtual) 3D objects, there are no fractional cells in Arrays, so the dimensions are always positive whole numbers - you can't have 1/2 of a cell, for example. This is very important as it can potentially cause your game to break even when everything else is actually working: if any property - width, height, and/or depth - is set to 0, the Array will virtually be non-existent in the project. Even a sheet of paper, as thin as it can be, still has a depth to it. If you have a paper that is 8.5 inches wide, 11 inches tall, but 0 inches thick, you will literally have no sheet of paper at all. Thus, even if you only plan to use a 2D Array, you will still want each Property to be at least 1. On that note, there is no wrong way to define your Array aside from what I just mentioned. You can have the size of your Array be just about anything you want it to be.

Referencing Cells

2D Arrays

When you begin to call upon Arrays in the event sheets using [ArrayName].At(X,Y,Z), you'll need to first recognize how cells are defined in an Array. Just like the Layout, the "beginning" of an Array is in the top-left and extends outward to the right along the X-axis and downward along the Y-axis. (Unlike what we learned in math class while studying graphs, the Y-axis going down does not decline into the negatives.)

Arrays start at index 0. This means that the top-left cell would be (0,0,0). This can get a little confusing when you think of the fact that we just defined the Properties - width, height, and depth - as a minimum of 1. So long as you keep these two things separate in your mind, it'll be a lot easier to process.

When we look at the Properties fields in the Parameters window again (see above), you'll notice how the cells on the left (which cannot be edited) are all text. The fields on the right (which is where you define the Properties of the Array) can be edited and take only numeric values. What's important to note here is that this is all set up very much like an Array. The Properties of this "Array" would be width = 2, height = 3, depth = 1. Remember that the depth (or any other Property) must always be at least 1 or it doesn't "exist" in the project.

If this was a real Array we could reference in the project, we could reference the cells we want similar to how we define a point in graphs.

Let's say we want to reference the cell with the text value "Height" in it.

First we reference the X index and then the Y index.

Since the "Height" text value is in the first cell column, X=0.

It is also in the second cell row, so Y=1.

We would use [ArrayName].At(0,1) to reference this cell (and specifically draw upon the value stored in it).

(In 3D Arrays, which we'll get to later, we'd also reference the Z index, but for 2D Arrays, it's not necessary and defaults to Z=0).

3D Arrays

If you've only just begun using Construct and are not familiar with some of the common terms of programming, don't worry - it'll become second-nature to you soon. As I stated at the beginning, remember that while this game is still a 2D engine, that doesn't eliminate the third dimension altogether. Objects in the Layout are drawn flat like on a piece of paper, but there is an order, a variable "depth" to how they are drawn. This is known as the Z-order - objects "in the back" versus objects "closer" to the player run along this Z-axis. If that makes sense, then you're already on the right track to understanding depth for Arrays.

Picture a Rubik's Cube or a series of tall, skinny filing cabinets lined up next to each other. Whichever visual helps you the best...

In a 3D Array (and still true for 2D Arrays), each cube or cabinet drawer represents a cell in the Array.

A Rubik's Cube is perhaps the easiest to visualize (or I can just give you the picture).

Each individual cube of the larger whole cube is a cell in the Array. We already know X and Y, so the Z-axis is how far "back" the Array goes.

Or, using our filing cabinet image, X would be how many filing cabinets are stacked next to each other along the floor. Y is how tall, or how many drawers per cabinet there are. And Z would be how deep the drawers go back into the cabinet (assuming the drawers were equally segmented).

In one of my own projects, I'm storing numeric values into cells to later reference as X/Y coordinates in the Layout. The data, themselves, are not what's important, so don't worry about that. The key here is to focus on how the cells are arranged in the Array. I'm using a 6x6x3 Array. This means that there are 6 columns of 6 rows that are 3 cells deep.

First, I'll show you how I drafted this data in a spreadsheet.

Don't mind the actual spreadsheet cells but rather the black squares I drew - these are the representations of each cell in the Array. You'll notice that each cell (black square) has three values. Off to the right you'll how I color-coded these three values to represent which cell depth (Z-axis) each value falls into. (It was the best I could do in a strictly 2D Array spreadsheet.) What this means is that each cell is first cited by its place along the X-axis, then along the Y-axis, and finally how deep it goes at those coordinates along the Z-axis.

In my project, I'm using these values to determine where to place certain objects in the Layout. At each X/Y coordinate, I use the Z=0 and Z=1 values in each cell to determine the X and Y placement of that object. The values in each of the Z=2 cell determine its fade-in time using the Fade behavior.

So, let's say I needed to know where to place the object in question along the Y-axis on the Layout. I placed all my Y values in the Z=1 depth of cells. If it came to be that the value I needed was in the Array at (3,5,Z), then I would use [ArrayName].At(3,5,1), because Z=1 is where all Y-axis Layout values are stored. That object would be set to Y=105 on the Layout. Let's say I needed to know how much time was needed to fade-in that object with the Fade behavior: [ArrayName].At(3,5,2) is 1.05 (I'm using these values as seconds).

Here's another way to visualize the first pair of X/Y coordinates of the Array and their three Z-axis cells.

If you cross-reference this image with the previous one I shared above, you'll see how the values align a bit better, I hope.

In Conclusion...

I do hope I didn't over-explain things too much, but more-so I hope this makes things clearer about the basics of how Arrays are structured. There are, certainly, far more advanced details to Arrays but creativity and research can really help you expand on making Arrays work for you.

I also highly-recommend this tutorial on Arrays - https://www.construct.net/en/tutorials/arrays-beginners-170 - as it dives into the particulars of how to manipulate Arrays and their values.

  • 2 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • Thanks for this short and nice guide :)

    • Hey! Sorry about the lack of response there. I didn't see the notification that you commented.

      Thank you for reading it! I hope it was helpful and clear (I do have a habit of over-explaining things).