Introduction
Not a big fan of instance variables? Do you like to use arrays and to create complex data? It’s you’re lucky day since I’m going to teach you how to use multidimensional array and to handle it.
Being a Java programmer (OOP) I pretty much know about arrays and array List. Here’s some extra knowledge for you about Java. The array in Java should have one type of data and once it is initialized, you can’t add more blocks of data or as known in C2 (X and Y Index), while in array list in Java can add and insert data of same type but it can expand and add new X’s and Y’s. The point is, JavaScript has better index (x,y,z) and it can expand as much as you want.
We will learn what is an array, multidimensional arrays, what their benefits are and how to load array by JSON and AJAX, and how to download a JSON and how to create a c2Array JSON File, and explain some features of array in C2. The other main lesson in this tutorial (guide) is how to use one array to retrieve data for each sprite object of the same type without using any instance variables. All is going to be explained in step by step. Please read carefully to gain as much information as possible. I also provided some capxs to explain it better if you didn’t understand this.
Arrays: The Basics
What is an array?
In general, an array is a number of items arranged in some specified way - for example, in a list or in a three-dimensional table. In JavaScript and HTML5 , one array can have multiple types, while in Java they must all have the same type, which I see a huge advantage to HTML5 game developers. Here is a small example for an array: array at 1 has value 5, array at 2 has value 50.
What is a multidimensional array?
Multidimensional array is an array within an array. It’s like one array block can contain three array blocks thus this block has 1x3 = 3 values. It’s like an X and Y coordinate. Let’s say X = 1 has Y = 5, thus this x has 5 values stored in it. A multidimensional array can have different Y values for each x but for now we will stick with multidimensional array with same Y value. So let say we have 5 Xs and each x has 3 Ys so the array store 5x3 = 15 values!
What are the benefits of arrays?
Array is the most important element for building data and storing it. It helps us create complex data to be used and saved since they can be sorted and inserted and reversed and popped and deleted and pushed. Thus we have a full control on arrays. Remember that multidimensional arrays promote complexity.
Make Array by Construct2
In this heading we are going to learn how to make an array and download it as JSON file to use it later in our next project. First make a new project called “Array Maker”, and set the layout with the following (note: anything between <> is the name of the object preceding it): One array object <Array>, two buttons <Download> and <Add>, three text fields <TheX> , <TheY>, and <TheValue>, a browser object <Browser> and finally a text object <ArrayData>. To begin within in construct 2 if an array is set to 10, the X are 9. Why? That’s because the array is 0 indexed so when you tell c2 to set the property of an array to have x of 9 it will make 8 starting from 0. So array of x 10 is [0,1,2,3,4,5,6,7,8,9]. Notice also that in the an array if you set the x that exceed the array with initialed value, let say you set value “10” at 10 in an array of x of 5, the array will be have ArrayIndexOutOfBoundsException (in Java and maybe also in JavaScript). Set the location of objects to look like this:
Then in the code tab add the following:
You will see that you can add new values and when you click the download button a JSON File will be downloaded. Use Notepad++ to open this file since I recommend Notepad++ because it colors the syntax and supports multiple programming and scripting languages plus hypertext link structure and CSS.
You can see how the JSON file is structured. Now close this file.
Manually making of array JSON File
If you want to make your own JSON file without the Construct2 project you can. This is the structure of the JSON for the c2Array:
{"c2array":true,"size":[5,2,1],"data":[[[0],[0]],[["Bananna"],["Lemon"]],[["Apple"],["Lime"]],[["Watermelon"],["Avocado"]],[["Grapes"],[0]]]}
The structure of JSON is like the following: all the data is between {}, there are three strings of JSON (where data is retrieved) c2Array to check if it is a c2Array or just a regular array, size to set the initial xyz index, and data to set values for that size. Use notepad++ to script it and then save it with the extension .json .
Load a JSON file for an array
Now we’ll learn how to load data. With the same project delete the first event for the text. Import the file “myArray.json” to the project. Add new object AJAX <AJAX> . Delete Objects <TheValue> , <Download>., and change <Add> to <Check> . set the following design to this:
And set the code to this:
Using Arrays Instead Of Instance Variables
Now we’re going to use the array to retrieve data from as an instance variable for each object. Each array is going to represent one object type, each X in the array will represent its IID of the object which is unique to each type and the Y will represent it’s instance variable or its global variables.
For example let’s take Car for example. The array “Car” will have X number of cars and each car will have 5 Ys: fuel amount, speed, color, brand, and mass. This way we will retrieve data for the cars.
In our demo we will make change each instance of an object’s angle by the value of an array.
First let’s work on this project for demonstration: add a sprite and choose it graphics on your own. Make sure to make at least 2 instances of the sprite. Add a new array named with their shortcut (for example “crn” is an array for Corn).
Now set the array to the properties to the following: Width to number of instances, height and depth to 1. Notice that the height is 0 & 1, since array is zero indexed. Now add a text <Text> and add it to the bottom. We will do the following code; on start of layout we will initialize the values of each array in x 1, 2, and 3 (if there are three sprites) and Y=0 to an integer from (0 to 360).
Then we add new condition that when we press A (by keyboard) , for each sprite set angle to array equal to the instance IID+1 for X and 0 for Y. Since IID is also zero index so the first instance of an object is zero, thus we add one to the IID to matches with the array X=1. I don’t like zero index since it confuses me but if you are okay with zero indexation just begin to set array from X=0 and remove +1 from the action. And we also add to the text the value of the array when A is pressed.
Another small optional event is when a mouse is clicked the text changes to the instance.IID to check the IID of the object.
Here is the code and the design:
Here what happens when you press A. It retrieves value stored at X of the object's IDD+1:
Handling Arrays
Since we are using arrays, the situation is different of an object’s instance variable, so to maintain the values we use some of the array’s features in JavaScript which is to push and pop, delete and insert, etc….
For example when an object is destroyed the values of the object remain in the array since they are found in the array while an instance variable is destroyed with the object. Also when an object is created there is no room in the array to set values for the new object which will return values of null. To maintain this have some few tips to do it.
To delete an array, go to array action and delete the X index at Object.IID +1
To push a new value for an exceeding object than the initial Xs, we add a condition that says if (Object’s count > array’s width) we set action for the array to push a new X with value 0 to the front. We add a sub event that say for number of Ys times, push Y in front.
Conclusion
We have learned lots of things in arrays and multidimensional arrays; we learned how to make JSON Files by a c2 project and manually and how to load array state from a JSON file with AJAX. We also learned the benefits of arrays and how to add them for replacing object instance variables. Hope it helped you!