• Projects

  • [UPDATED: Jan, 17] UBGames.io - Online HTML5 Social Games

###Latest Changes###

  • A number of bug fixes
  • Added support under-the-hood for non-room-based scene loading to allow for tutorials and character setup screens.
  • Added support under-the-hood for individual game / user save data.

###Introduction###

Howdy! I have been wanting to expand my networking knowledge, specifically when it comes to browser-based games. I figured I would try implementing some old classics from my child-hood as a way to dip my toes in.

The project I am presenting to you is extremely alpha and mostly a learning experience at the moment. I effectively wrote a multiplayer lobby container that can remotely load in and launch games off the server so as to allow me to easily try out multiple games.

###About###

So what can you play? I currently have 2 mostly-finished games. There is minimal audio and graphical fluff at the moment but game-play wise they are more-or-less completed. YARN

The first game is "Yarn". This is where 3 to 8 players have to write a story together. It moves one round at a time where each player submits an idea in secret and everyone votes on their favorite. Winner with the most votes gets their piece added to the story and are given some points. This game was roughly based on an old game memory from GameSpy.

You can give it a go here: https://ubgames.io/yarn

Game 'technically' supports mobile but is really focused for desktop use. This game taught me how to write a game w/ WebSockets (it has now been rewritten using WebRTC)

Sketch It Effectively online Pictionary. You can have a simple doodle session with no gameplay between 1 and 12 players or an "easy" or "hard" game between 2 and 12 players. This game was roughly based on the old "isketch.net" game.

You can give it a go here: https://ubgames.io/sketch%20it

Canvas and input is broken on mobile. Requires desktop. This game taught me how to write a game w/ WebRTC.

###Feedback / Bugs###

Both games are still pretty rough and I plan on polishing them further. However, I am specifically looking for ideas, feedback, and any bug reports you can come up with!

There are a couple known bugs that I am working on / aware of:

  • Game won't update and/or send/receive signals if it is on an unfocused tab.
  • Connection occasionally closes due to handshake issues before loading game (seems to occur w/ slow connections).
  • Mobile clicks can hit LineEdits hidden behind other things (due to JS work-around code)

There are some features that I have planned as well:

  • Cursing / Swearing filter will be added
  • Potentially improve Sketch It's line quality as it is very hacky at the moment (compromise in the case of very large doodles).
  • Better input from failed commands (such as trying to mute yourself, kicking outside a room, etc)
  • Improve mobile support to have a custom mobile layout and better scaling
  • Support for host reassignment on certain games so hosts can leave the room without everyone being kicked
  • Friend lists
  • Chat tabs to focus on, for example, just friends' messages or all messages w/o server messages etc.
  • Interface for switching between games rather than relying on URL paths
  • More games!

Once I get both these games more polished I hope to recreate a larger more complex game. If anyone remembers good-ol' Robostrike, that is what I'll be going for.

If it turns out to be too much to do reasonably I will likely implement a board-game first or something more intermediary.

For testing purposes you might want to implement a bot that will only stay in the room so long as there is only one player, so that it can be tested out. It'd be fine even if the bot only ever submits the same 1 line be it "testline" or whatever.

Thanks for the idea. I assume this is to see if the server got your message? If you see your message pop up in the chat then the server got your message. The game doesn't print it locally, it sends it to the server then the server sends it back to everyone (including the initial sender). You can also open multiple windows in your browser and connect as multiple clients.

You gave me an idea for a /bot command, however, which will end up being a mild interactive 'help' and 'report' system.

9 days later

Doing a small bump as I have fixed a number of issues as well as roughly implemented a new game .

Updated the main topic.

These two games were my 'learn-how-to-do-this' games. Now that they are functional on a basic level I will be working on polish, cleaning up some code, and implementing some more complex games.

EDIT: If anyone has any ideas on how to better handle the canvas for Sketch It I'm all ears.

At first it was going to keep the aspect ratio but then it turned out that in half the cases it would be really small if the user had the chat open (which they have to guess through). Expanding the canvas dynamically didn't work because then some people couldn't see what was drawn if they had a small window.

Just went for the 'stretch' idea as it was an okay compromise but I'm not totally satisfied with it.

EDIT 2: Just fixed a significant WebRTC bug that would start the game when everyone was connected to the host rather than connected to everyone else. This has been fixed. Game now waits until everyone has confirmed connection to everyone else. Also added some temporary SFX to Sketch-It to mimic my memories.