Posts

Showing posts with the label html5

GitHub Releases for Shield Bearer and Bee-Flat

I've been focusing on my full time job, but I wanted to make a quick post to say that I made releases for Bee Flat and Shield Bearer .  They are for my Game Off 2019 Build of Bee Flat and my JS13K Games 2019 Build of Shield Bearer .  I hope to someday be able to return to those projects and make them better.

JS13K 2020 Game Jam Day 23

Image
 *Sigh*  It happened again!  Oh, well.  Let's just see how much I can get done before the deadline.  If I don't finish this one, I'll add it to the pile of games to finish:  right next to Shield Bearer. I've been brainstorming a bit on how I could do a menu.  I feel like I should treat a menu like Levels themselves:  the graphics will be drawn on the world, Ratio-Vision will capture that one section and render it, and all the inputs will be driven by a menu controller object.  In fact, I've been brainstorming of a way to handle controls as well:  I feel like there needs to be some sort of abstraction layer so I'm not checking the Unicode for each key, I just have to make sure that a player or controllable object implements certain actions from this controller object.  I'll call this Master Controller!  Yeah, it's not as original as Ratio-Vision, but I wanted a simple name that perfectly describes its functions. I want Master Co...

JS13K 2020 Game Jam Day 14

Image
Oh no! Did I really spend fourteen days not coding! No need to really panic, I've been designing most of the game in my spare time. Though I lost so much valuable time not coding! If I didn't tell you already, the theme for 2020's JS13K Game Jam is 404.  One of their example interpretations  was "something missing".  So, I came up with this idea of a Memory-Puzzle-Platformer game where you play as a character that needs to go through this big door.  The issue:  parts of the door are missing and you need to collect the part(s) on the other side of the map to get them.  You will have to avoid enemies and jump on platforms to get to the other side of the map while trying to remember the part of the door that you might be missing.  Once you get to the other side of the map, there will be multiple pieces that could be part of the door or bogus pieces that will waste your time.  I decided to call this game Whole Door.  It's both the objective o...

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 B...

Metroidvania Month 7 Day 21

Image
I don't think I'm going to make it.  I'll drop out of Metroidvania Month if I can't get anything playable by then, but I will continue to work on this game. So, I started to get back into things by just modifying the SaveFile class.  I figured that I might not want to reload the Player's Health and Ammo every time they reload the game.  It would have made it very easy to cheat the game:  get to a Save Room by a boss, save, refresh the page to restart the game, load the old Save Slot, and you're now at full Health and Ammo.  Now the SaveFile has the hp, filledTanks, and heldMissles to keep track of the Player's Health and Ammo to help avoid that cheat. While I was editing the SaveFile class, I also figured I should refactor the way I keep track of explored areas.  My original idea was to have a new field in the SaveFile and that field would be a 2D Array for each Area.  That means to set if the Player has visited a spot on the "map" for the Test...

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 fir...

Metroidvania Month 7 Day 7

I managed to get some code started today.  It's mostly just copying Bee Flat and taking out all the Bee and Arcade related items.  So, I want to say thank you to Jedulz for all the work he did helping me with Bee Flat that I'm placing into Daemon. Once I had most of Bee Flat copied and cut to it's bare bones, I started creating the SaveFile class.  I decided to go with 1D Arrays for storing ability pickups, tanks, and missiles.  There is a 2D Array for the Test Area that I'll used to test out my "Room Load" idea.  To make it easier to create new Cells in that 2D Array, I made the generateGrid(gridRows, gridColumns) function in the file with the SaveFile Class.  That function allows me to just specify the number of Rows and Columns for the Grid, and it will then create a Grid of that size with each Cell containing an Object with visited = false and foundItem = false.  Meaning, every Cell is marked as not visited.  I did use some w3Schools artic...

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...

Metroidvania Month 7 Day 4

Image
One of the things I feel is necessary in a game that isn't a small Arcade Title is the ability to save and load my game.  If you have a story in your game, you need to be able to save your progress and return to it later to experience the whole thing.  So, I went searching.  I found a question on Stackoverflow and an answer that explained the difference between internet cookies and localStorage .  After some more research, I chose to go with this localStorage.  It's new to HTML5 and is available on nearly every browser .  Plus, I found some really great examples on w3schools for Web Storage .  The Metroid games have three save "slots"; so I think I can create a JSON for the save "slot", turn it into a string, and then set the localStorage "slot" for it.  Then, when I need to load the game, I just get that localStorage "slot", transform it back into a JSON, and then use it to set the game back to a state before the player left.  We'll ...

Metroidvania Month 7 Day 3

Image
Don't worry, there's no Metroidvania Month 7 Day 1 or 2.  It would have just been me telling you that I'm still working on a title.  I wish I could just start creating something, but GitHub wants me to name my repositories first before starting on my project.  I guess I could have created the files on my computer, but I hate the idea that my work could be lost without backups or commits that I can roll back in case I mess something up.  I could have also given this game a "Project Name", but I feel like I might accidentally create one that is better than the end product (see Project Scorpio and Project Revolution for example). Anyway, I came up with thirteen names for the game and ended up settling on Daemon . The game is about a robot that has gained sentience in a lab and now has to collect power-ups to help it escape.  Daemon, in computing , means a computer program that runs as a background process.  I felt the name could be fitting as the robot ...

Coder's Log 1/28/2020

Hey, you know the drill by now. I've been trying to find motivation to work on a project that I could use to learn Spriter Pro , but my job has kept me pretty busy.  There was some projects that needed to be completed at my workplace, short deadlines, pushy customers, and our Project Manager has left.  Now I'm the Project Manager, but only temporarily, as my employer finds someone else for the job; though, I think I got the experience and skills to handle the job. Anyway, you didn't come here to read about my professional life.  I'm hoping you're here to see what fun stuff I'm creating.  So, to help get me motivated, I decided to find another Game Jam to join to give me an incentive to work on something.  I think I found the perfect jam:  Metroidvania Month 7 !  It's another Game Jam hosted on itch.io and I'm liking that it's not going to force me to do a theme.  Well, besides the fact that it forces me to make a game of a certain genre. ...

Game Off 2019 Results

Image
Hey!  I know it's been a while, but I've been pretty busy with the Holidays. Anyway, I had some time to check out how Game Off 2019 went.  Here's the results and I found Bee Flat on Page 7 .  I captured them below There were 236 entries and the score was out of 5.  So, overall the game was placed just below half the entries.  Which, is pretty good given that the game was incomplete when I submitted it.  Yeah, next time I'll try to actually submit a finished project.  I might pull a No Man's Sky and complete the game, but I'll do that later.  I still have Shield Bearer to finish as well.  However, I want to actually start a project that isn't bound to some weird theme from a competition. I want to build a Mega Man X fan game.  I've been watching videos that JKB Games have put out on their fan game called Mega Man X: Corrupted .  I'm a bit worried about that game since it runs on Flash and every browser is ditching it at t...

Game Off 2019 Day 27 to 31

Image
Day 27 I was hoping to do some work on Bee Flat, but I was over at my dad's helping him prepare the Thanksgiving Turkey.  I had brought over my laptop, but my Atom text editor was on the fritz.  It thinks I need to Publish my source code, but I cloned it from the GitHub repo using Git for Windows .  I've been trying to do a fresh install on the program, but the installer just puts Atom files wherever it wants to without telling me. Thankfully, Jedulz is on it with the commits!  He added a building for the player to leap off of, made the player character look like a ninja, and the player character can launch off of the building.  He said the way the player character looks is only temporary, but I'm down to keep the character looking like that if we run out of time.  He also made a private Trello Board to keep track of what we need to do to finish the game.  Jedulz, you're awesome! Day 28 I was too busy stuffing my face full of turkey to work o...

Game Off 2019 Day 26

Image
This day was all about trying to get some graphics into my game.  I know, they're not really that important, but I feel like having some graphics will help out with designing the world. As a warm up, I created a favicon for the webpage running the game.  I went into Microsoft Paint and designed a small, happy, bee.  I used the circle tool to draw the body and the paint brush at 1 px to add the outline, face, and wings.  I saved it as a PNG and then threw that into GIMP .  With GIMP, I can add an Alpha channel to the image, select the white part of it, and delete it to make everything around that bee transparent.  I just find that white box very unsightly.  Here's the image: It's a very small bee, only 16 by 16, but I thought it was pretty good.  The bees in the actual game will be much bigger.  It's just the standard size for favicons . The character for the original "Un-Bee Leap-able" was supposed to be a ninja.  I got the id...

Game Off 2019 Day 25

Oh, man!  I've been so busy with work and stuff, that I forgot to make any progress on my game.  I'm going to have to abandon Godot and Blender for now, sorry.  I just don't have the time now to learn the tools and finish my game.  I'm moving back to HTML5 Canvas and JavaScript! This new game will actually be a spin-off game titled "Un-Bee Leap-able: Bee Flat".  Can I even have a spin-off game before the actual game is finished?  Sure!  Why not? Anyway, here's the GitHub repo for Bee Flat .  I'm hoping that I can take the platforming elements from Glide 4.0 and combine it with the upgrade system of Paper Plane !! to make an interesting game. I had made some progress, I got the HTML page and CSS going, when I noticed that Jedulz had made some progress on the JavaScript.  I pushed the code that I had for it into my repo and then I performed a tricky merge request.  It was tricky since we both create HTML and CSS for the game....

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...

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...

Hacktoberfest 2019 Day 5

Image
I feel like helping Jedulz, today!  I've been thinking about his fishy game , it's pretty good so far, but I'm feeling like the game might have a huge  issue if you want to play on mobile: your finger would cover up your fish and you wouldn't be able to tell the size of it. I hope Apple doesn't mind me doing this, but for a solution, I was thinking about how they solve this issue in iOS: It would be hard to see where I would be placing the cursor because my finger would be covering that space.  However, Apple placed this feature in iOS where this magnifying glass shows you the area that supposed to be covered by your finger.  I think that would be nice to have for the fishy game.  I just don't know how I would accomplish something like that in HTML5, CSS, or JavaScript. I spent about an hour searching for a solution.  Eventually, I ran into this stackoverflow question asking how to code a magnifier to use the canvas as a source  and that lead me...

Hacktoberfest 2019 Day 4

Image
I know, I've skipped a day.  Hopefully, I can get three more pull requests real soon.  In fact, I'll try to get one, right now! Alright, I've been looking around GitHub, but I couldn't find anything I could use to quickly get a Pull Request.  There's also a ton of stuff that are using languages and tools I'm not familiar with: Go, Ruby, Node.js, etc.  So, I'm going to try something Jedulz told me about: I can get generate a Pull Request by merging branches of my own projects into the master branch (or other branches really). I think my GitHub.io website could really use some work.  I was more focused on quickly getting something up and running, rather than having something that looked good.  Look at it (as it was at the time of writing): It's horrible!  It's baby's first web page!  If I'm going to have the title Web App Developer at my workplace, then I have  to do better than this! I want to center the index's content when the ...

Hacktoberfest 2019 Day 1

Hey, everyone!  I joined Hacktoberfest this year!  Which means I have about a month to get four Pull Requests in to be able to get a T-Shirt! I was able to find a fairly simple project for my first Pull Request: Benny wants a Portfolio Website .  I looked at his live site for the project and saw that his picture in the main body was off-center.  With some minor CSS , I was able to center that image in Chrome's developer console.  I then forked the repo on GitHub, cloned my fork using Git Bash/GUI, opened it in Atom (text editor), and added CSS for the profile_image id.  After that, I pushed my changes to my fork and created a new Pull Request to send my code to Benny's project.  Sweet!  One down, three more to go!