Kynto is a showcase project, that is my way of sharing with you my unique experience and capabilities as a front end Javascript developer with a full stack foundation. I feel this is really relevant to the position I’m applying for with Trek Bikes.
Kynto use of React was a natural and appropriate solution. It allowed me to create a modular and loosely coupled code base, that is a joy to build on (even 6 months down the line) Plus – Backbone just wouldn’t cut it, and this isn’t 2010!
Attached is a screenshot of the chunk/ grid based rendering that allows for extremely large worlds.
Kynto is a very exciting project for me.
Don’t let the pixel art fool you, there is a large amount of tech leveraged in order to make this work and function as it does, and I’m very excited to have the opportunity to walk you through some of it right now.
Purpose
My desire here is to create a user generated world composed of rooms, tiles, and items that allow users with as few rules as possible, to build sharable creations.
This example allows me to attach a decoupled function to the action of having an enter traverse or stand on a tile.
Kynto.on(‘kynto:avatar.on.tile’, (e) => {
This can be coupled with invoking other actions, or chains of behaviours.
Kynto.dispatchServerEvent(Kynto.EVENTS.ROOM_JOIN_REQUEST, {
id: room,
chunkSize: 40,
//row: row,
//col: col
});
Let’s create a teleport tile. Now if you walk on tile 0, 10. It will trigger a teleportation to the next room.
I plan on providing some of this functionality to users by furnishing them with a drag and drop interface to connect hooks, to actions, with dynamic and static properties.
What tech is involved?
Websockets – Real time TCP based communication for client, and server information sync.
React/ JSX – The entire user interface is built out, and programmed in and with React. This has allowed me to create complex user interfaces.
The user interface talks to the server, and the client via an event dispatcher bridge
Canvas/ WEBGL – Bitmap rendering! Allowing the game client to display tens of thousands of tiles at various zoom levels. I did experiment with a complete DOM based renderer but the results were not nearly as responsive!
NodeJS – The server is programmed in NodeJS allowing a large amount of code reusability between the front, and backend.
React Native – Push notifications, app containers for iOS, and Android with relative ease
AWS – Kynto is built to scale by leveraging Lambda to create and destroy controllers as rooms are created, and loaded.
MongoDB – Schemas are defined and queried with the help of Mongoose
The power of the Event Dispatcher
This bridge handles everything from showing the login form, to adding and removing avatars from a room.
I expanded on this bridge by exposing some calls to native app layers. A great example of this would be changing the native navbar you see on the bottom of the apps screen.
The native app listens for a login event, and is passed the user object that contains the users name, email, avatar, and picture.
Which then triggers a state change for the component, redrawing the navbar to contain tabs for rooms, chat, in-game camera, and avatar customization.
This STACK has allowed me to run Kynto on PS4, and PS5 browsers (utilizing Canvas as a fallback rendering technology).
There is also an iOS, and Android app available in the app stores right now
Since this is a hybrid React/ React Native app it of course runs as a website as well!
Features
Interactive world tile based world
Ability to hang out on top of Youtube videos (music videos, etc)
Dynamic asset loading
In game scripting/ logic chains (ie walk on a tile to trigger a teleport, or an item to move out the way)
Avatar chat, text chat, and Discord integration
In game gif generator – to create shareable videos and animated images to social network sites
The Build Process
Releasing websites or web apps used to involve a lot less steps. Now some React projects are composed of multiple React projects, some of which are leveraging other frameworks or template engines too!
Kynto is no different. So far it is composed of six unique projects!
- Game Client – This houses the game and rendering logic
- Game UI – This is where all the user interface that would be an absolute pain to recreate in Canvas/ Bitmap mode
- Kynto Server – This is responsible for hosting rooms, and routing data to and from the databases
- Kynto Expo – This is where I utilize React Native, Push notifications, etc
- Kynto Code Injector – In order to keep the users code base up to date and in real time. Whenever a user opens Kynto as a website, app or desktop program an injector service is responsible for dishing up the compressed and optimized JS bundle that is then executed as needed
- Kynto Site – Basic react website that displays privacy policy, eula, etc (although there is now a WordPress site that connects to the Kynto API (such as displaying a gif generated from the in-game camera, and ensuring the OG tags are populated so the appropriate image is shown when shared, or pasted into a Slack chat!
- Kynto Site API – NodeJS/ Express app that exposes RESTful methods for use by the WordPress Plugin/ site
I have also written a series of bash scripts/ build tools that update the git repos, install any new dependencies and then rebuild each project, and restart the server as needed.
Algorithms
The grid and tile based design has led to the implementation of all sorts of interesting algorithms. Some for fun, and some because the illusion would not be complete without them!
Bubble sort is what enables me to do depth sorting on all the layers, and entities within the layers. This allows me to show an avatar behind a tree, but must also show the avatar sitting on a chair, not under it. A simple failure here would break the illusion completely and take the user out of the game.
A fun example of the tiles was being able to leverage game of life for a game level. The maze responds to the user as they attempt to traverse the room. By walking on a tile the user is bringing that tile, and its neighbors to life (which is in this case makes the tile impassable). Injecting a cascade of energy as users navigate the level. All these processes add complexity to the game play.
This system could be expanded into all sorts of awesome things, as a way to spread a wildfire through a forest as I did here.
A+ is what allows the user’s avatar, and non player avatars to traverse the worlds in a convincing and logical manner. Tiles are weighted based on their traversability (i.e. the walk path should avoid water if the user is not already swimming). Forcing the avatar to follow a path next to, not in the water unless there is no other way to do the destination point.
I hope that this writeup goes some way to communicating my relevant experience, and my ongoing desire to build connected apps.
Conclusion
It is a time consuming and tedious process to get an app through the iTunes store. I’ve learned what it takes to get a large app, that was developed entirely by myself, through these hurdles.
Due to Kynto being categorized as a social network, a whole slew of guidelines apply requiring the implementation of reporting, and moderation tools. EULA, privacy policy, terms of service and user support functionality.
I’m looking for an opportunity where I can work on real time apps. Leveraging many or all of the capabilities I’ve listed here would be for a developer such as myself.