Teaching the Basics of 2D Array Games, Tilebased
2021 - October, 27: Everyone wants to make a roguelike, let me show you how to start in HTML, followed by Godot. == Under Construction ==
Hello! #Let's get started, this section features code snippets!
So you want to make a roguelike? Or any other game that uses a 2D Array, lets get looking at one.var Array = [["player", 0, "kobold"],[0,0,"kobold"],["kobold",0,"ogre"]]
Yes that's a 2D array and that should work in both JavaScript and GDScript, my tools of choice. If arrays aren't in the language you're using, go ahead and implement them. You can learn from a source like Wikipedia if you have the dire need to develop your own iteration of the array. So now that we have an array, feel free to copy that one, we need to get something on screen, I will show you in JavaScript first and then more generally.
So let's review our goals, we need to cover "player", the number 0, "kobold", and even an "ogre". My task for you now is to get those assets ready, but if you want to be simple, use "@", "0", "k", and "O". Best to capitalize the ogre as it is strong. As for the @ symbol, well some programmer used to represent the player and we've been using it ever since.
Now we need to display it, and I hope you have those assets ready and an IDE with HTML/CSS/JavaScript capability, cuz we're going in hot!
This will do the brute labor, it will iterate through the length of mapArray
so set Array
to be mapArray
best not to be too generic! If you didn't know weHave a specialWay of naming variables, but you can really name it anything. I mean that! As long as what you choose doesn't cause errors that is! But that's basics.
Next!
I hope you have tile grass, cuz 0 is next! I just threw some new curveballs at you. You need JQuery for this, it didn't work well without it for me. I included tileGrass.advDetail
as a dictionary containing the term "advDetail" and that looks like this! So we're using jQuery to append a class, but to what? Yes you need a div called Yes that's my comment there, if you've gotten this far, maybe you want to review my first major failed project. If you click that, you agree to learn from my mistakes! Also copy this code over to your IDE to get a better typecasing, yes even this tutorial is under construction! You can uncomment that div to get the grass to display! But wait we don't have a grass class! (that rhymed!) That's 0 covered! Try it out yourself, I hope this worked! Let me get the full script for you! See you in part two!
Here is the script, download to a html file and run! All good to go. Though if you followed the first part, you should have this, if you don't, raise an issue on Github. Hope you got all that, now if that doesn't work bother @KaizarNike on Twitter. Now to get crazy! Let's, instead of implementing ECS, have two arrays! mapArray=[[0,0,0],[0,0,0],[0,0,0]] actorArray=[["player", 0, "kobold"],[0,0,"kobold"],["kobold",0,"ogre"]]
Hmm now how's it look? Nine squares in a row, we can do better. Add this to style. #containerMap {
height: 60px;
width: 60px;
}
So what have we done? We have nine boxes in a cube. Cool, time for dudes. I got stuck in dev hell, so look what I have wrought! The second array is gone, and we are left with the origin. Now let's finish the job! We need to add two more tiles, of the kobold and ogre, can you guess it? This is just one way of organizing things, now lets round this out! Let's continue the sprint with the drawMap, the final step! Here is the result! ==> And here is the final code, check it out!Now let's walk through the code step by step. We define the html and head tags first. (tags are Html's way of identifying things. We then import jQuery as a tool. Then we define the indoc styles we need. .grass
,.grass p
, and#containerMap
These all allow the page to be styled properly to our liking. For some quick tips on the attributes background-color
in grass turns it green. height
and width
in grass define the size of each tile, hope you kept those assets small! After the styling, we come across mapArray
and tilesMain
which store our needed data. I usually put stuff like that in a data.js that gets loaded first for housekeeping. mapArray is a 2D array, which means its nested. You have to go two levels deep to get the data out. The reason for mapArray[i][j]
later in the code.
Whew. I'm tired. Lets keep going. We call windows.onload = function(){drawMap()}
to get things started before the player sees. It calls drawMap, so let's talkl about it. drawMap is made of a nested for loop that allows you to access the nested array. Finally we used jQuery to append the data set in our tilesMan array, made of dictionaries.
That's all for part two, stick around for Godot. But I hope you can use something from this web tutorial!