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.