Metroidvania Month 7 Day 9
Yeah, I missed a day. Hopefully, I can still get Daemon in a working state on time.
I was looking into possible control schemes for the game and managed to find some documentation on Gamepads for HTML5. It seems like it is just like adding the Gamepad's "keyup" Events to the window, but you have its connect/disconnect Events as well. I think it would be nice to have a Gamepad and have the game play like Super Metroid. However, I don't think all the controllers are the same: a button on an Xbox controller plugged into the PC might use a different Event than the same button on a PS4. They might confirm to the standard Gamepad setup, but I don't want to add any extra complications at this time. So, I'm just going to focus on WASD and Arrow Keys on the Keyboard for now. Maybe add a touchscreen control pad for smartphones later. I'm just trying to get stuff to a working state first, then I'll add those extra features in the future.
My first objective I wanted to tackle was to create the Load Screen. The first thing you see when you boot up any Metroid game, except the original and II for the Game Boy, is a screen to select your "Save Game" from a list of three "Save Slots". I'm thinking that I can just do this with a "Save Select" screen that is placed in a div labeled by the ID of "save_select". That way I can quickly setup three buttons to do the job, get our selected "Save Slot", and then start the game with our save loaded.
If you don't have the "key" value in your LocalStorage variable, you'll get a null or undefined returned. For example, if my "key" is slot1 and I try localStorage.getItem("slot1"), I get a null returned. Null is a falsy, meaning it is counted as false in a conditional statement. The falsy makes my logic really simple: if the "key" in LocalStorage exists, load the data in LocalStorage, else we create a "New Game" Save File.
What I ended up doing was I stopped the game from starting after pressing "any key". Now, it brings up that "Save Slot" select screen. Once the User selects a "Save Slot", then I have the page start the game. When the "Save Slot" select screen opens, it reads the LocalStorage for each "Slot", and updates the text on the buttons accordingly. I would love to display a "progress" on the buttons, but I just have "New Game" and "Continue on Slot X" for now.
If you do click "New Game", the game will create a new Save File as your current save file. I did put in some code to load or parse a JSON to place it as the current save file, but I won't be able to test it until we get "Save Rooms" working to write the current save file to LocalStorage. Hopefully, it's just as easy to convert the Save File object into JSON string that can then be parsed back into the Save File object.
Also, I made a mistake in my blog post: we don't access the 2D array going currentSave.area[gridRow, gridColumn][0], it's actually currentSave.area[gridRow][gridColumn]. That's the issue of building basic websites all day and then working on something advanced like this: you tend to forget things like how to access a 2D array.
Thank you for reading! You can view the code on the Daemon repository or play the game on GitHub.io.
I was looking into possible control schemes for the game and managed to find some documentation on Gamepads for HTML5. It seems like it is just like adding the Gamepad's "keyup" Events to the window, but you have its connect/disconnect Events as well. I think it would be nice to have a Gamepad and have the game play like Super Metroid. However, I don't think all the controllers are the same: a button on an Xbox controller plugged into the PC might use a different Event than the same button on a PS4. They might confirm to the standard Gamepad setup, but I don't want to add any extra complications at this time. So, I'm just going to focus on WASD and Arrow Keys on the Keyboard for now. Maybe add a touchscreen control pad for smartphones later. I'm just trying to get stuff to a working state first, then I'll add those extra features in the future.
My first objective I wanted to tackle was to create the Load Screen. The first thing you see when you boot up any Metroid game, except the original and II for the Game Boy, is a screen to select your "Save Game" from a list of three "Save Slots". I'm thinking that I can just do this with a "Save Select" screen that is placed in a div labeled by the ID of "save_select". That way I can quickly setup three buttons to do the job, get our selected "Save Slot", and then start the game with our save loaded.
If you don't have the "key" value in your LocalStorage variable, you'll get a null or undefined returned. For example, if my "key" is slot1 and I try localStorage.getItem("slot1"), I get a null returned. Null is a falsy, meaning it is counted as false in a conditional statement. The falsy makes my logic really simple: if the "key" in LocalStorage exists, load the data in LocalStorage, else we create a "New Game" Save File.
What I ended up doing was I stopped the game from starting after pressing "any key". Now, it brings up that "Save Slot" select screen. Once the User selects a "Save Slot", then I have the page start the game. When the "Save Slot" select screen opens, it reads the LocalStorage for each "Slot", and updates the text on the buttons accordingly. I would love to display a "progress" on the buttons, but I just have "New Game" and "Continue on Slot X" for now.
If you do click "New Game", the game will create a new Save File as your current save file. I did put in some code to load or parse a JSON to place it as the current save file, but I won't be able to test it until we get "Save Rooms" working to write the current save file to LocalStorage. Hopefully, it's just as easy to convert the Save File object into JSON string that can then be parsed back into the Save File object.
Also, I made a mistake in my blog post: we don't access the 2D array going currentSave.area[gridRow, gridColumn][0], it's actually currentSave.area[gridRow][gridColumn]. That's the issue of building basic websites all day and then working on something advanced like this: you tend to forget things like how to access a 2D array.
Thank you for reading! You can view the code on the Daemon repository or play the game on GitHub.io.
Comments
Post a Comment