Are you coding, son?

 Sadly, I've just been coding stuff for my job: very boring websites and no games.  I'm sorry that I lied about coding on the 7th of March 2020.  Things got pretty hectic during the pandemic!  Now, I want to get ready for JS13K games 2020!  So, let's work some more on Daemon to re-familiarize us with how to make games in HTML5!

I haven't been actually coding, but I've been brainstorming on what to do about how many pixels I should try to make each cell on my grid.  I eventually had the thought that it was the wrong question to ask.  What I eventually came up with was a way to force a certain aspect ratio for a canvas that would be used to draw the sections of the map/world as my "camera".  I call it Ratio-Vision!

Ratio-Vision is an object with functions to normalize the display between different screen sizes.  One of the problems I found out with my games was that they would play differently depending on the size of my screen.  Shield Bearer is an obvious example:  the spiders randomly spawn according to the screen width at the time you start the game.  If you resize the window, you can lose site of the Shield Bearer or create an empty void.  I can also enable itch.io's "Full Screen" mode for their embedded player with Ratio-Vision.  I had to disable it for Un-Bee Leap-able: it would break the HUD elements because they were absolute positioned (the pixels of the screen) instead of relative position (percentage of a whole screen).  Now, I can send the HUD elements to Ratio-Vision and have it draw them so that they can be seen on any window size.

The Ratio-Vision uses HTML's onResize Event.  You can set a function to execute whenever someone changes the size of the screen.  So, I created a function in Ratio-Vision to calculate the new height and width of the display (area where stuff will be drawn), as well as a new X and Y position for the display to sit on the screen.  This makes the display automatically add a letterbox or pillarbox when needed.  What that means is I created it to add black lines to the top and bottom of the window if it is too thin for the ratio, and it will add black lines to the left and right if it is too short.  All that is done to make sure the display, or main view of the game, always sits in the middle of the screen.

I managed to get that letterbox or pillarbox to display with a bunch of math.  I have the JavaScript for Ratio-Vision first try to use all of the width of the window, if that doesn't work, it then uses the whole height of the window and sets pillarboxing for the width it cannot use.  It always tries to calculate how much letterboxing it has to do for the display.  I figured if it can use the whole height, then the X position will be calculated as 0.

For Daemon, I have the initial constructor for Ratio-Vision set the ratio as 16 by 9.  I figured this would be a common widescreen format.  However, I have noticed other ratios as well: my computer monitor is one of the old style 16:10 and I have a phone that is 20:9.  That's why I developed Ratio-Vision: to solve the issue with multiple screen ratios.  If someone tries to play Daemon on a very old 4:3 monitor, then they're going to have to enjoy it with letterboxing.

The points value in Ratio-Vision is how many places per one unit of ratio.  It's better if I use an example to explain it:  if I use 100 points and the ratio of 16:9, then I have a display of 1600 by 900 that I can draw stuff on.  If I resize the window, then everything drawn to it should scale with the size of the display.  I currently have a function to draw lines and I used it to draw a whole grid to check the ratio and scale.  You can now try the grid out now!  No matter how you resize the window, you get sixteen boxes across and nine boxes vertically.  I'm hoping to add more features to Ratio-Vision soon: a way to render part of another canvas to the display, add shapes to it, and draw text on it.  Hopefully, it won't be another five months before I start coding again.  Like I said, I want to take part in the JS13K game jam this time!

Check out the latest source code for Daemon!

Comments

Post a Comment

Popular posts from this blog

Game Off 2019 Day 4

After a few days of trying to find a good idea for Game Off 2019 , I think I managed to come up with either the dumbest idea...or the best idea:  Un-bee leap-able! You play as a ninja that starts the level by leaping straight up into the air, and then you pull out a giant kite that you use to glide through the air.  Your objective is to land in a designated zone on the map.  While gliding through the air, you have to avoid giant bees.  If you touch a bee or land in an area that isn't the designated zone, you restart back at the starting point but with cash to spend on upgrades to help you glide around better. It's a really crazy idea!  I know!  I just came up with it while listening to  Jack Stauber's Micropop , and I think the idea has enough quirky charm to go really far in the competition. Now, the question is: what engine or whatever should I use to create the game?  I would love to make the game 3D and have it feel like gliding around a...
Read more

Hacktoberfest 2019 Day 8

Image
It's been a few days since I tried to contribute anything to the Hackoberfest this year, but I think I found a decent project for my last Pull Request: Super Tiny Icons .  It's a collection of logos made using Scalable Vector Graphics , with the goal of each logo being under 1 KB. I originally was going to create the logo for Kotlin Programming Language , but then I saw this "issue" where they requested the Microsoft logo .  I'm surprised no one took it!  The latest Microsoft logo is just four squares with a solid color for each square !  With such a simple request, I forked the project and got to work! I wanted to hand code it, because Inkscape made my shrub for Jedulz's game super huge.  It ended up being smaller to just export as a PNG.  Since I've never hand coded an SVG, I searched the internet and found this guide to hard coding an SVG . After reading that guide, it seemed appropriate to download the the PNG of the Microsoft logo and take so...
Read more

Metroidvania Month 7 Day 6

Hey, I know it might say "Published 2/21/2020" so it should be Day 7 instead, but I was thinking about an idea I had for the save files just now and I wanted to type them up before going to bed. The question rattling around in my head was this:  how do I save the exact power-up that I've collected?  Simple: we store an ID in an Array.  The save file will be a JSON object and within that we could have arrays for each max ammo and max health power-up type.  Say in the game we have Tanks that store extra health.  In our SaveFile JSON object, we would have an Array called "tanks" that just stores IDs of collected Tanks.  When we enter a room that has a Tank, we search SaveFile.tanks array for the ID of that Tank.  If the ID is found, don't spawn that Tank, otherwise, we spawn it if it hasn't been collected.  What is the maximum collected Tanks that we should fill?  SaveFile.tanks.length should give us the maximum Tanks to fill. After answerin...
Read more