timetocode

Games in Vuex+Vue.js

Vuex/Vue.js can be integrated with game logic with a simple wrapper:

const gbind = (stateSelector, callback) => {
    // watch for future changes
    store.watch(stateSelector, callback)
    // gets current state immediately
    callback(stateSelector(store.state))
}

The selector is a function that returns the correct piece of state.

The callback is invoked whenever the state changes and once right when we bind it.

Usage:

gbind((state) => state.settings.nickname, (old, value) => {
    console.log('nickname', value) // our reaction to the change
})

So in this scenario right when we invoke gbind we’ll receive the state.settings.nickname, and we’ll also receive any changes to it going forward.

We only need to do this for features that aren’t essentially dom manipulation. Regular dom+css reactivity is already handled by typical vue usage. So if we had an inventory system that renders as html, then we would just make Inventory.vue and write that part of the program in the usual vue fashion instead of inventing our own reactivity.

But let’s say we wanted something unrelated to the DOM to occur as a result of state. Don’t feel forced to make actions full of game-related side effects! I’m working on a first person shooter and I’m displaying 3D models in webgl as reactions to state changes in vuex.

For example my player holds a gun which can be an assault rifle, sub-machine gun, or sniper rifle. These are 3D models that appear in the player’s hands and bob around as the player runs. In vuex, I store this property as state.game.entity.weaponType. My binding looks like the above example, and the code that ‘reacts’ to the state change of weaponType uses Babylon.js to dispose of the previous weapon mesh and load a new one. So there we have it: vuex integrated right into game logic with a reactive effect that isn’t vuejs rendering – it’s webgl vertices and textures etc.

To set a vuex store property from our game logic, we can use either of the following:

store.dispatch('moduleA/actionName', payload)
store.commit('moduleB/mutatorName', payload)

Just like in normal vuex code its up to us whether we commit directly or have an action commit on our behalf. My particular game is multiplayer, and many of the state changes come from the server. So in my case I frequently go from reading the network to dispatching things such as store.dispatch(’game/setHitpoints’, value). I can react to the change in hitpoints via qbind in any way I want if needed, and my HUD.vue also reacts to the same change and makes the hitpoint bar flash red via a css animation if my character is in danger via a standard looking vue component.

Enjoy!

More technical details/tips…

store.watch returns a function that when invoked destroys the watcher – so if you want to be able to destroy watchers return and/or save this function

it is possible to create an infinite loop if our reactivity to a state change triggers a mutation to the same piece of state (same as within vue, but perhaps easier to forget here)

be mindful of where the line is between the ‘functional program’ and the dirty mutation spaghetti that is normal game code… i like to put the important pieces of state that are likely to cause bugs in vuex b/c bugs are much easier to find in a functional pattern. I also put every variable that the ui needs in vuex b/c the ui for me is almost always html (as opposed to being rendered in webgl/canvas)

JigsawPuzzles.io is now in beta! Come try some jigsaw puzzles right in your browser: https://jigsawpuzzles.io/

These are multiplayer puzzles, so you can invite friends and play together in real time. Although this is a jigsaw puzzle game, its engine was made for multiplayer action games – get a friend in there and you’ll see what I mean.

The homepage shows an assortment of public puzzle games that anyone can play.

It is also possible to browse a catalog of images and start your own private puzzle to play solo or with friends.

To access the catalog and create private games, you just have to sign in (so we can save your puzzle). All games have an invite button at the top which you can use to get your friends into the same game.

If you find any weird bugs please let me know! :D

speed+bandwidth difference between JSON and binary

For people making multiplayer browser games the question often comes up of whether JSON is sufficient for networking, or whether they should go the whole way to making the game send data as binary.

My network code has been binary since ~2013, but I figured it was worth revisiting the performance differences. The tldr; is JSON is viable for small games, and a pleasure to work with compared to binary.

Here are tests demonstrating the time to deserialize data as well as the total size of the data. The data is going to be simple, with 1000 game objects having an id, x, y. These objects will be serialized with 3 techniques: JSON, binary, and a custom string parser.

Keep reading

See, that’s what the app is perfect for.

Games in Vuex+Vue.js

speed+bandwidth difference between JSON and binary