Supercharge Your Game’s Social Features with Nakama

Rate this content
Bookmark

Explore the impact of social features on game success and learn how to integrate them swiftly with Nakama OSS game server. This session will guide you through code examples, revealing how to enhance your game’s social capabilities. Discover a faster, simpler way to supercharge your game development journey and unleash your game’s social potential with Nakama!

This talk has been presented at JS GameDev Summit 2023, check out the latest edition of this JavaScript Conference.

FAQ

Nakama is an open-source game back-end created by Heroic Labs, designed to power large multiplayer games across mobile and desktop platforms.

Nakama can add various social features including friend systems, leaderboards, chat functionalities, group or guild memberships, achievement tracking, live event participation, and more.

Social features like multiplayer and cooperative experiences can increase the time players spend in a game, drive in-app purchases, help form player communities, and encourage players to invite friends, all of which can lead to increased player base and retention.

Apart from Nakama, Heroic Labs also offers Satori, a live ops platform; Hero, a game framework; and Heroic Cloud, which provides managed server hosting.

Nakama supports various authentication mechanisms, including device authentication, email and password, and third-party integrations like Apple, Google, and Facebook, as well as custom authentication that allows for the creation of user accounts if they do not already exist.

Nakama's game server can be extended using TypeScript, allowing developers to write custom code, interact with lifecycle hooks, and implement additional functionalities such as daily rewards or profanity filters for chat messages.

Developers can access Nakama documentation at Heroic Labs' documentation portal, heroic.labs.com/docs, and seek support or discuss issues at the community forum, forum.heroic.labs.com.

Developers can start by installing the nakama.js package, setting up the client and session objects, and then implementing features like authentication, friend lists, and leaderboards as demonstrated in the provided code examples.

Tom Glenn
Tom Glenn
17 min
28 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Social features in games increase player engagement, drive in-app purchases, and allow for community building. Nakama is a tool that enables the addition of multiple social features to games, such as authentication, friend management, and leaderboards. The implementation process involves installing the nakama.js package, creating a client object, and using custom authentication. Users can log out, manage friends, view user information, and interact with leaderboards. Additionally, Nakama allows for the implementation of player participation rewards through custom code.

1. Introduction to Social Features in Games

Short description:

Hi, I'm Tom Glenn, a software engineer with 15 years of experience. Heroic Labs is a team of 40 people, creators of the open-source game back-end Nakama. Social experiences in games, like adding friends and participating in leaderboards, are important because they increase player engagement and allow for community building. These features can also drive in-app purchases and monetization opportunities.

♪♪ Hi, I'm Tom, and welcome to this talk on how to supercharge your games' social features with Nakama. Before we begin, let me give you a brief background on who I am. I'm Tom Glenn, I'm a software engineer with roughly 15 years of experience across a wide variety of sectors, including web development, banking, 3D simulations, and more. I'm also an engineer and part of the developer relations team here at Heroic Labs, as well as a content creator and educator over on YouTube, and you can find me at CodeWithTom.

So who are Heroic Labs? Well, we're a team of roughly 40 people and creators of the open-source game back-end, Nakama. We power some of the largest multiplayer games across mobile and desktop, and our clients include the likes of Paradox Interactive, Lightheart Entertainment, Lion Studios, and more. Our other products include our live ops platform, Satori, as well as our game framework, Hero, and Heroic Cloud for our managed server hosting.

So what are social experiences? I have no doubt you will all have experienced these before, but social experiences in games can include things like being able to add friends, participate in leaderboards, chat to other players, join groups or guilds, complete achievements, and show them off on your public profile, take part in live events, and so on. There are so many different kinds of social experiences that you can encounter in games today. But why are these important? Well, multiplayer and cooperative experience have been shown to increase the amount of time that players spend in your game, and social competitions such as leaderboards keep your players coming back for more. They can also allow your players to form communities with shared interests and experiences, and this can lead to an increased player base as players are incentivized to invite friends, share achievements, and collaborate to complete goals. Social features, such as gifting or live events, can also drive in-app purchases and open the door for other monetization opportunities.

2. Adding Social Features with Nakama

Short description:

I will demonstrate how to add multiple social features to your game using Nakama. We'll cover authentication, adding and listing friends, viewing leaderboards, submitting scores, and rewarding player participation. To implement these functions, we'll install the nakama.js package, create a client object, and use the custom authentication method. The authenticate function returns a session object, allowing us to access different user account information. After implementing the restore session flow, users will be automatically logged in when they return to the application. Finally, we'll implement a log-out function to complete the authentication flow.

So rather than talk to you about the theory of adding social features to your game, what I want to do is give you a practical demonstration of how you can add multiple social features to your game using Nakama. We're going to quickly run through how to add authentication, adding and listing friends, viewing a global and a friend-specific leaderboard, submitting scores to that leaderboard, and then rewarding that player participation by giving the player some coins for participating in that leaderboard.

So let's jump over to the code. Okay, so you can see we've got our demo application running here. It's a simple React application with a login screen that if I try to log in right now, nothing's going to happen because we haven't implemented any of these functions here which the React application is expecting to call to perform various things such as authenticating, getting the account details, adding a list in friends, and so on. So what I'd like to do is quickly run through how easy it is to implement these functions using Nakama.

So before I start, what I have done here is I've ran npm install and I have installed the nakama.js package which you can find at heroic.labs.nakama-js. Once you've done that, we can then import the client and session object from the nakama.js package. We're then going to create a client object. Now, this client object expects to take a server key, the default one is default-key, the host address of the Nakama instance, in which case I'm currently running this using Docker on my local machine, and the port number for where the Nakama instance is running. We're then gonna implement the authenticate function. Now, Nakama supports various different mechanisms for authentication, these include device authentication, email and password, Apple, Google, Facebook, and custom authentication to name a few. We're gonna use custom authentication here just because it allows us to pass in a custom identifier as well as a username, and this true flag here also allows us to specify if the user account doesn't already exist, then we will go ahead and create it. Now, this authenticate custom function as well as all of the other authenticate functions will return a session object, which you can see we have up here. This session object allows us then to call into various other functions within Nakama to get different pieces of information for that user account. If we save this file now and come over to our login screen and try and log in again, you can see that we are now logged in. It says, hi, CodewithTom. We can't access anything such as friends or leaderboard right now as we haven't implemented those functions, but let's go ahead and do that now. I'll just quickly log out.

And before we go any further in to get an account or anything else, what I'd like to do is implement a restore session flow so that the next time the user comes back to the application, they don't have to re-log into their account. To do that, we're going to set, we're going to get rather two items from local storage. These are going to be session token and refresh token. Now, we're also going to have to set these items. So what we'll do is just after we authenticate, we will go to local storage and set the session token as our session.token value and the refresh token as the session.refresh token. We'll also implement a function here called restore session. And what we're going to do here is we're going to get the two values for session token and refresh token just to make sure we have the most up-to-date version. And if they have a value, then we're going to use the session.restore. Now this is a function that lives on the session class itself passing the session token and the refresh token and assign that value back to our session variable. We will save that and let's log in here code with Tom and you can see now if I refresh the page I'm automatically logged back in, which is great. Now, the last thing we need to do is implement a log-out function and that is our authentication flow complete.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Building Fun Experiments with WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
Top Content
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
Watch video: How Not to Build a Video Game
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
Boost the Performance of Your WebGL Unity Games!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
Boost the Performance of Your WebGL Unity Games!
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.
Web 3 Gaming: What it is and Why it Matters
JS GameDev Summit 2022JS GameDev Summit 2022
36 min
Web 3 Gaming: What it is and Why it Matters
Web3 gaming enables decentralized identity and finance, allowing game developers to bypass centralized platforms. It is driven by wallets, ERC20 tokens, and NFTs. Web3 games focus on collaborative world-building, ownership, and open-source collaboration. The challenge is achieving decentralization while addressing economic and technological limitations. Web3 aims to redefine the gaming industry by using economic tools and exploring new genres like RPG and RTS games.

Workshops on related topic

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.
Tiny Game Live Coding Workshop
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Tiny Game Live Coding Workshop
Workshop
Frank Force
Frank Force
Dive into the captivating world of micro-game development with Frank Force in this interactive live coding workshop. Tailored for both seasoned developers and curious newcomers, this session explores the unique challenges and joys of creating games and demos with extreme size constraints.