Gian's Game Dev/Tech Blog

My NotATimelapse of my game that I made for uni called Teleorb.

Thought I’d show some art I did today. Made to replace my old display picture for my in game name.

Start to finish made in Affinity Designer:

I used these for references:

LONG POST AHEAD!!!

Since July 9th, I’ve been coding in Haxeflixel to get back into coding and understanding it more. While I haven’t exactly been making games, I’ve been creating stuff like rebindable keys, multi language support and LAN (couldn’t successfully test online).

The only “game” I made was for my cousin’s birthday and it was just a meh clicker game that used audio from a youtube video and quick image editing skills (won’t say Photoshop as verb, since I used Affinity Designer), which I spent around 18 hours straight doing, although some of that time I was just getting sidetracked and testing various things. I don’t really count it as a game, since it had stuff that I didn’t make or have a license for.

I’m now gonna quickly go through all the projects I did from the start.

[2018-07-09] Making a Sprite

Yep. That’s a square alright. Was slowly remembering constantly checking the docs to make that square.

[2018-07-10] Experimenting with FlxNestedSprite & Multiple Tilemaps

Here I was messing with FlxNestedSprites. I couldn’t get everything to stop when that little square collided with something, instead that square just moved by itself and repositioned itself when it had free space.

I also was experimenting with placing tilemaps in random places and using multiple tilemaps.

[2018-07-11] FlxGroup things and audio

Here you click on the screen and it spawns that sprite that falls down plus makes a sound, when the sprite is no longer on screen, it kills it.

My goal here was mainly to test how FlxGroup’s recycle() works, but I ended up doing it a different way - .getFirstAvailable() from the FlxGroup and .reset(FlxG.mouse.x, FlxG.mouse.y) on the sprite whenever I clicked and doing a check if there are no dead members in FlxGroup ( if(shots.countDead() < 1) ).

This is also where I learned how to add audio and also how to do a recording in Reaper.

This is also where I learned that you could put classes within classes.

[2018-07-12] Nape, Keys and Key Rebinding

Here I learned something completely new to me: Nape - a 2D physics engine for Haxe, made easier with FlxNape. Nape uses it’s own “space” by doing FlxNapeSpace.init(); having it’s own gravity and more. Spent a lot of time trying to make it work.

But majority of the time wasn’t spent on nape. No it was the start of the saga of rebindable keys.

I spent many hours trying to find how to do it online using Haxeflixel, but I couldn’t find one post even talking about it. So I took it upon myself to teach myself how. This day I failed to do so.

But I was able to make a Key History and the Keys that are currently pressed. I was inspired by fighting game’s practice modes where you see all the buttons pressed. I’ll probably reuse this code and instead of text, It’ll be sprites representing each key. Still need to do a gamepad version though.

[2018-07-13] The Key Rebinding Saga - Episode 02 - Part 01/05

Semi Successful, main problem was rebindingKey stayed on after being true. Forgot why this works.

[2018-07-13] The Key Rebinding Saga - Episode 02 - Part 02/05

Was trying to use the number keys to rebind certain keys, also added a button to start the rebind, but couldn’t find a way. Did worse than the previous one. Note: The green bit at the end was the GIF recording program.

[2018-07-13] The Key Rebinding Saga - Episode 02 - Part 03/05

The moment where I found out, you can’t use an array of string for keys, even though you can do “ONE” or “W”. I couldn’t be bothered fixing this when I tried testing it again.

[2018-07-13] The Key Rebinding Saga - Episode 02 - Part 04/05

Success! Was able to press ENTER to go into rebinding mode, switch a key, then press enter again to confirm it. Also was able to implement a menu kinda thing, while also learning about borders and borderstyles for FlxText.

The solution to that array problem was to make a Array<FlxKey>, however the problem with that was it came up as numbers when you want to see what was pressed, so I had to make a function to translate the keys using the FlxKey.toString().

[2018-07-13] The Key Rebinding Saga - Episode 02 - Part 05/05

Just added movement to a sprite, using the binded keys. Also demonstrating the multiple keybindings (which was available before).

[2018-07-14] The Key Rebinding Saga - Episode 03

Here I put all that keybinding stuff into a FlxSubState, to open up like a pause menu and rebind on the fly, in addition to that, I added sound effects to when the sprite moved, moving in the rebind menu, and rebinding a key.

[2018-07-15] The Key Rebinding Saga - Episode 04

Here I think I just cleaned up some code and made the menu WASD & Arrow Keys, while also adding a cancel key (ESCAPE).

[2018-07-16] The Key Rebinding Saga: A new UI - Episode 01

So here I didn’t really do any rebinding stuff yet. But I did learn about FlxUIState, FlxUIButtons and firetongue. If I remember correctly, I spent most of the time making firetongue work and configuring it.

FYI, firetongue is a library for allowing multiple languages for your text, it also requires FlxUIState. I don’t know if you can use it on a normal state, I haven’t figured it out yet.

[2018-07-18] The Key Rebinding Saga: A new UI - Episode 02

Here I did a lot of stuff! Learned that FlxUIButton’s use a getEvent() function to detect each button’s status, they also have a params variable where you can add various parameters to do many things with the button and to change the label of the button you need to .getLabel().text on the FlxUIButton and add your string, in my case, I used firetongue!

Had a hard time figuring out how to “click” on a button using a Key and navigating through each button using keys. In regards to “clicking” with a key, I used FlxUIButton’s .forceStateHandler(”click_button”) when the ENTER key was just pressed.

Side Note: Had some issues recording this GIF with GifCam, then I found out a new version came out and fixed the issue I was having! Download & Donate: http://blog.bahraniapps.com/gifcam/

[2018-07-19] The Key Rebinding Saga: A new UI - Episode 03 FINALE

With this one, I added Text to the top and fading text on the bottom indicating what was rebinded (I got most of the fading text code from FlxSave).

[2018-07-21] The Key Rebinding Saga: A new UI - Episode 03.5 BONUS

Nothing really to see, all my classes up until this point was all in the PlayState.hx, this day I separated everything in separate classes.

[2018-07-22] (get, set) go? Variables in haxe

Here I tried to learn to use the var testArray(get, set):Array<Int>; just the things in brackets to try and get and set variables from other classes, instead of making a variable in that class and casting the variable from the PlayState. I pretty much failed at that and can’t even run it.

[2018-07-23] Help, Navigation Keys, Legend. I have no idea what to call the things in the bottom of the screen that menus have to tell what buttons to press.

Pretty much just put text in the bottom to say what keys the player can press, it directly reads what keys are binded, so it will change when the keys change.

[2018-07-24] LAN MULTIPLAYER?! - Part 01

No, not LAN, not just yet. But I did get a local sever running and connected to it. I used the library: extension-networking. Also, when the window isn’t focused, I think it stops listening for new network events, which is why the position doesn’t change on the server until I click on the window.

[2018-07-24] LAN MULTIPLAYER?! - Part 02

I got LAN working, although I had to change the IP in Client and Server Class the code in order for it to work. Was soo satisfying seeing my other laptop, GPD XD and my android phone all running this at the same time.

[2018-07-26] The Key Rebinding Saga: A new UI - Episode 03.7 BONUS

Just some code cleanup and making it easier to add more things using functions.

[2018-07-27] - 01 The Key Rebinding Saga: Return of the Sprite

I changed some colors, added collision to sprites spawned by mouse clicks (the first two sprites don’t collide).

[2018-07-27] - 02 FlxNape and FlxNapeSprite Dragging!

Now this took me a while, to get the ability to drag a FlxNapeSprite. I used some of the code from the FlxNape demo, specifically the shooter class, which contained the shooting and the dragging of FlxNapeSprites (which I noticed from the balloon demo). It was a lot of trial and error. In the end I found out it had something to do with anchors, FlxMouseEventManager  and a function from shooter class called createMouseJoint(). Still don’t know exactly how that last function works, hopefully I will soon.

[2018-07-28] Fun with Colors and Nape

So after doing soo a lot of non-gameplay stuff, I decided to do something a little fun. In this, I used FlxG.random.color() to get a random color, sets that as the background color and using FlxColor I get the complementary color and set that on the square.

I also added butons to switch between spawning and dragging sprites and a reset button to easily reset the game.

That’s all I’ve done soo far, besides one game I made for my cousin, which I won’t show here, because it has their face on it. The biggest issues I had with that game, was that I had 18 hours to do it, because the party was on the same day and I’ve been putting it off for a bit. Guess that was the first time I did crunch lol.

[2018-04-29] Transistor inspired UI and stuff

I started off trying to replicate the borders of some of the icons, then I ended up messing around with more effects, then started to mess around with masking, which opened up a lot more options for creating non destructive stuff!

[2018-04-26] More Anime Sci-fi Experiments!

Was supposed to be experimenting with computer monitors with text, but started off making super bright blooming windows, I eventually did make some monitors with text, while also improving one of my other styles.

Speaking of styles, I’ve been creating these by using non destructive effects (Layer Effects, transparency etc.), which means these styles can be applied to any shape!

Inspired mostly from Evangelion. I just love that dark background with desaturated green text.

[2018-04-22] Anime UI Experiments

First attempts at recreating classic Anime cyberpunk UI and hardware in vector for use in future games.