Nueva Naturaleza

Hello again! I made a lot of progress getting my foundation down, and I’m getting ready to progress into the content of the game.
.
.
Mobile Touch Sensing:
This is the biggest thing by far! I added listeners for all of the key presses for the computer controls, and then added all the logic for mobile controls. It will detect each touch, and call the same function associated with each button. It also keeps track of variables of the state of each button.
.
The biggest challenges I encountered were when I first tracked clicking instead of touching, and had to redo everything to let it handle multiple touches .-. The next thing was doing all the math for everything. Since i don’t have a perfectly square touchpad, and since us humans have fat fingers, I wanted to be as generous and accurate with the touchpad as I could, and so I combined rectangle detection with diamond detection.
.
.
mini stuff:
I added a buffer as all the images load. I started out with a black screen, and then a gray screen, but in each one it was too sudden. I instead used what’s called a skeleton frame, which is displaying the content before the content has loaded. I made my own gradient to roughly match the one seen when loading in, and it was a lot smoother.
.
I also adjusted the timing so that the text fades in sooner, and I restructured it so that the animated background and the timer for the text fading in are separate variables.
.
.
Be sure to stay tuned for the next devlog, it’s gonna be a good one! I hope to have a real starting sequence to my game, and maybe even some beginning hitbox detection and menus.

Over the past couple of days, I’ve added some features so it really looks like I’ve got a website! This is my first time really coding in HTML or Javascript, so I’ve been doing a lot of research and learning a lot. Here is what I added:
.
Image loading
In my research, I noticed you needed to load images first before displaying them. I saw methods using something called a promise, but I didn’t want to figure out what that was, so instead I stuck with what I knew. It’s more clunky, but each image is tied to a function which increases a variable. Once all images load, the main loop starts!
.
Images:
As shown in the picture, I used Pixilart to make pixelart images for the main screen and the control pad for mobile. The canvas kept trying to use anti-aliasing, so I had to figure out how to turn that off.
.
Main loop:
I learned how to create and run a main loop, and by using online forums I used a method that doesn’t take up too much processing power. Unfortunately, this method also didn’t sync up my animations, so the animation on mobile was so much slower than it should be. I eventually remedied this by tying my animation variable to the current time. For some reason it’s still a little bit out of sync, but not bad enough that I’m worried about it.
.
Text: I loaded my text files just like my image files. The canvas was anti-aliasing it too when I displayed them, and there is no way to turn it off! I used some code from a forum to make it all solid, but then it looked off. I decided to leave the main screens code looking blurry (claiming that the words are clouds) and then I’ll use a different font for the other text in my game.
.
.
Thanks for reading! My next goals are to make the mobile game pad feel responsive, and load the starting section of the game.

Today was all about setting up the interface for the game.
My goals were:
-get the canvas in the middle of the screen
-get the canvas to take up as much of the screen as it can without going over
-support resizing the screen
-support mobile interfaces
-make the canvas slightly longer on mobile devices, so that it can leave room for a gamepad

After way too long, I achieved two things. I discovered that HTML doesn’t like me, and I met all my requirements!

As shown in the pictures, the website works on both mobile and desktop, it supports resizing, and there’s an extra white rectangle only on the mobile device. I even had time to make a cool gradient (nature themed) and make some test visuals. I’m very excited to work on the javascript section next!

My original plan for this game was to code it on a small raspberry-pi like device. Unfortunately, my hardware is aimed for educating students, the code editors are very limited, and the hardware even more so (6 second loading times for one image :0).

After fighting with it for a long time, I’ve decided to change my plans and instead make the game on a website using the HTML5 canvas. This might impose some changes in my original plans, but I’m just glad my previous efforts won’t go to waste

As I start working on this video game and posting my first devlog (woohoo!), I’m going to back up a bit to document some of the planning I did beforehand.

After brainstorming and communicating with friends and family for weeks, I got a cohesive idea of what I want my game to look like. Here are some of the skethces and notes that I took!