3 May 2018.

Here's one thing that got the ball rolling:

Luigi: Hello Andrea. Sorry to bother you. I would like to learn how to develop an app. Am I crazy?

Me (Andrea): Hmm... I don't have your number... who are you?

Reading those two WhatsApp messages now makes me smile. But there are also two other pieces of interesting information:

First, that was May 2018. Now it is 2022... 3 years and some months later, we have published our very first game DEMO. So yes, it took us 3 years to release a demo.

But we are now producing at a steady pace, and in the first months of 2023 we will release the whole game.

That said, if you are planning to develop a game yourself, it won't necessarily take you 4 years…and I have some advice that hopefully will help!

Second, an app – everyone wants to make an app. Do we really need another app? What about a game instead? What I mean is: an adventure game is like a book, you install it, play it, enjoy and eventually uninstall it. It is not yet another app polluting your phone's memory.

Before I start, let me step back and explain what this article is about.

What We'll Discuss in This Article

This article is about how I (Andrea) and Luigi developed Occulto, our first adventure game.

It will cover some technical aspects of the project, as well as how we managed creating and developing it. I'll discuss both psychological and practical parts of the journey.

I'll also provide a shallow comparison between using web technologies (like WebGL) for development vs Unity 2D.

This article consists of:

• A brief story about my passion for Adventure P&C games, and how I ended up developing my own game.

• A section about Occulto, the game I am developing

• A tech section with a comparison between web technologies and Unity 2D

• A section about what I learned through the process, along with some advice if you're creating your own game.

How I got Into Adventure Games

Many years ago, a good friend introduced me to Machinarium. Machinarium is one of the best adventure games I've ever played.

After I finished it, I felt the need to create my own adventure game. This feeling was not immediate, but grew stronger over time. Eventually it led me to find Luigi and be actually able to create my own indie game.

First adventure game attempt

In my first attempt at building a game, I contacted some friends and created a small group of people who were enthusiastic about creating an artistic P&C game.

We managed to create a draft of the first scene (see the illustration above). The idea was to make an apple fall on Newton's head, who is resting under the tree.

I used the Playn Java framework to write in Java and export to Android, iOS and web. At the time I was a Java developer. Playn is still an active project, it may be worth considering if you are looking for a Java 2D game framework.

This first attempt didn't last long. We had a dinner all together, and asked two friends to present us with a draft story of the game. And then I didn't get any feedback from the others and the project vanished into nothing.

Second attempt

In my second attempt I managed to create four scenes and some game-play among them. But the project failed because I wasn't ready to lead the project. You'll read about that soon.

Below you can see an image of one of the scenes of the game. It was intended to be a modern revisiting of Little Red Riding Hood were wolves were not bad :).

Third and Final Adventure Game Attempt: Occulto

Developing Occulto is my 3rd attempt at creating an adventure game – and hopefully this one is successful!

Unity Editor: 1° Village

Intro to the game

It is a beautiful morning, and Eliot, a young mage apprentice, is going to the studio of his magister for a lesson about magical potions. Something is wrong from the first moment: why isn't the magister opening the door?

Inside the studio everything is a mess, and a note tells Eliot to go to the church in the village. What is going on? Where is the magister?

2° Magister studio

Will you help Eliot in his journey to find his magister and regain possession of the powerful forbidden book titled "The never written book" that an evil figure is trying to steal?

The demo consists of four scenes:

3° Monastery

and one secret passage between the monastery and the private studio of a monk.

4° Secret passage

Below you can see the last scene of the demo.

5° Monk private studio

Tech I Used to Build My Adventure Game

We developed Occulto in the beginning using Pixi.JS and HTML. Then, later, I switched to Unity using the 2D features that are now included as default in the editor.

Since this article is quite long, I will not enter in the details of the code. But I will provide a description of the technologies we used and the process of creating the game.

I am planning to write a second article for the technical part.

We are a group of 3 people:

• Myself, Andrea, the developer and project/technical manager. I contribute to the story and game/riddle design as well. I am a software engineer.

• Luigi, the wonderful artistic designer who designs and draws the scenes. He is also responsible for the game story and game-play. If you like the illustrations above, then you like Luigi's work :). He graduated in Mathematics.

• Antonio is the music and sounds designer. He is a software engineer.

Luigi draws the scenes using Photoshop and makes the animations using After Effects. Then he exports everything into images (jpg and png) that I later use to assemble the scenes.

In addition Antonio provides me with the sounds and music for the scenes. We are using mp3 files at the moment, but we are planning to switch to FMOD in the future.

The game uses FHD (1920x1080) images, and runs also on low end mobile devices. If you want to run on a device with 1 GB of RAM, you need to reduce the amount of FHD images. If you load in memory more than 50/60 FHD images, the game may crash on devices with not enough memory.

In normal Unity memory management, the entire scene is loaded on memory, so you have to pay attention to what you add to the scene.

A simple and classic solution to reduce the memory imprint, is to use sprite sheets for the animations. Most of the time an animation will fit in a 2048x2048 sprite. I use Texture Packer to create and import animation sprite sheets in Unity.

In addition I use ImageMagick CLI to trim images with an object inside. My input is a FHD transparent PNG with an object inside placed in the right position. Then I use:

magick mogrify -trim -verbose *.png > trim.txt

to trim the image and get the precise position of the object.

Finally I add the trimmed image to the scene and place it using a script I made that maps the coordinates inside trim.txt file to the x,y values of the Unity scene.

By trimming and using sprite-sheets, I solved all memory problems. Also smaller images means lower time when loading a scene. In cheap mobile devices, loading a scene can require like 5 or 6 seconds (whereas in more powerful devices it takes less than a second).

Regarding fps and performance, Unity is good – so basically you don't have to do anything special. You just need to avoid bad design. And pay attention to time complexity. For example, avoid searching for an element on every tick of the game loop.

As I mentioned earlier, I am planning to write a tech article about how I developed the game using Unity 2D. If you are interested, follow me or follow us on one of our social accounts.

Unity vs WebGL

Even if I used both technologies, I am not an expert (this is my first game). So below I will just list some of the pro and cons of both technologies.

Pros of WebGL

• Easy to port everywhere with Capacitor or Electron.

• Programmers friendly: PixiJS makes it very easy.

• Almost the only working solution if you need a web responsive version.

• Continuous integration and delivery to web is very easy, since the output is a bunch of files.

• Web development is mature, and you have access to tons of libraries, utilities as well as a web packers, like Webpack.

• Collaboration is very easy and mature with Git. There is something about collaboration in Unity, I didn't explore it. I don't know what happens if two people work on the same scene.

Cons of WebGL

• Slightly lower performances compared to more native frameworks.

• Subject to WebViews bugs (which you cannot solve).

• It can be difficult for programmers who do not know web development.

• WebViews doesn't seem to be ready to perfectly support WebGL. The game wasn't working well on my Neffos, and who knows on which devices it had issues. Maybe WebViews are not yet ready for gaming, but they are definitely ready for HTML and hybrids app.

Pros of Unity

• Graphical editor: it is easier to visualize/update the scene and fine tuning.

• Easy and complete: it has almost everything you need.

• Good performance: 60 fps even on low end devices at 1920 x 1080 resolution.

• Cross platform, but the WebGL version does not work well on mobile phones.

• A lot of indie games are made using Unity. If the Unity team introduces a bug, it will be found very soon.

Cons of Unity

• Graphical editor: you need a working updated Unity editor in each of the computers you are going to use. With Linux it's not that simple.

• Closed licence but it has a free tier if you earned up to $100K in the last 12 months.

• At the moment the mobile web version is not officially supported.

• Linux Unity editor is alpha (and I managed to make it work after many attempts).

• Not a lot of helpful info about it: most of the posts I read to find help about a particular topic were low quality or were videos. That's far away from stack overflow quality. But the documentation is well done.

Keep in mind that this section is not intended to be an exhaustive comparison between Unity 3D and WebGl frameworks. Depending on your target, one technology could be better than the other.

That said, even if I am a web developer, I must admit that Unity is great for developing a 2D games (and I guess 3D games too).

What I learned While Building Occulto

Someone needs to lead the project

This is my first insight: if it is you who propose a project to others (a game, an app or whatever), they will assume you will lead the project.

At the time I was thinking that I was just a programmer, and didn't act like a project leader. It won't work if someone doesn't actively follow every person in the project.

Have the right attitude

It is important to have the right attitude towards people that are participating in the project. You also need to understand if they can be productive.

In this context, "productive" does not have the same meaning it has at work. Productive means "actually able to produce". At work it means how much you produce and how good is your output.

Before I go on, let me tell you a story:

Before embarking on Occulto game development, I decided to help a guy develop the interface for his board game. I did it because I thought the game he invented was a good game that had some brilliant parts to it.

In this case I was the developer, and he was leading the project (being the inventor of a game, doesn't unfortunately imply that you are also good as a project leader).

In the beginning everything was good, and I enjoyed developing the game. In addition I was learning React, which I used as the framework to build the game app. (It is a board game, not a classic one, so React was a good choice, and also it had a lot of pages, not just the game page).

Then things started to become weird: he started asking for deadlines, complaining about delays on the development, and asking for features which I thought weren't really useful in the first version of the game.

In the end it didn't work out and I couldn't work well with him, so I blocked all communication. Remember that I worked on his game for free, and I even solved a nasty bug that caused the back end side of the game to stop working.

So, why this story? To tell you that making a game with a bunch of friends is a very different job than what you do at work. Some advice:

• Don't push people too hard: if you are making a game for fun, it must be fun. Motivate people and help them. They are working (as you are) for free on a project they believe in.

• Don't act like a boss: even if you direct and follow every step of the game, people should regard you more as a project manager/team leader than a boss.

Work in your spare time

Being able to be "productive" applies also to you. Are you able to work in your spare time on the game? Can you provide a steady output, without long periods of time away from the project?

This is the first obstacle I encountered in my previous attempts. I wasn't able to provide a constant, timely output and people thought the project was falling apart.

In this case, as a programmer, it is important to integrate the output of your other team members (images, animations and sounds) as soon as possible. People will be more engaged if they see their work quickly integrated in the game. Also the sooner you integrate others' work, the sooner you will find and solve problems.

Remove as many obstacles as you can

In order to work in your spare time, you have to reduce or remove all the obstacles. These can be physical (slow computer, too small a screen, ...) or psychological. The psychological ones are the most subtle. I will try to list some of them:

Feeling guilty for not working: this is hard, and I think is one of the main reasons for quitting. You have to enjoy working on your project. So deadlines, pushing others to produce more, threatening (like "If you don't work enough you are out") do NOT work.

It is better to motivate people and help them understand what's blocking them (or you) to produce some output.

Obstacles that delays the moment you can actually work: you may think something like "I'd like to finish that thing I started, I think I can complete it in 10 minutes." Then you think: "But the PC is slow and it will take forever to start... may be tomorrow, now I'll just serf on Instagram".

It is important that when you think you can work a bit on the game, you can actually do it without any delay or obstacle.

Too tired to work on the game: indeed you must not overdo it. It is important to find a balance between how much you work and how much you rest. But it is also important to avoid long periods of not working on the game.

I noticed that small actions can help: for example for me it is enough to start the Unity Editor to increase the chances that I'll actually work on the game.

Share your results with the others: even though non technical people may not fully understand what you are doing (and vice-versa), it is satisfying to explain that you solved a performance problem, or that you reduced the bundle size, for example.

In fact, in agile methodologies, telling what you did and what your are going to do is one of the main points.

Persist. Not everything will be easy. You will have to persist. Even though you are probably making a game because of passion, it is still requires a lot of work and sometimes you have to persevere and overcome problems/blocks. You probably do that all the time at work, you can do it also for your game.

Not every moment is a moment of pleasure. Imagine when I discovered that the demo, almost ready to be published, wasn't working on some mobile devices and I had to rewrite everything in Unity. I really had a bad weekend.

But then I manage to change my attitude, start with Unity, and regain pleasure in working on the game.

Fortunately Luigi, my partner in the game, understood it and accepted that we needed to delay the release date of the game demo. While it took a lot of time to write the demo (2 years, if you count from the first commit), it took me 3 months to rewrite it.

Focus on developing the game

It is extremely important to focus on making the game, and not the framework for the game.

Being a programmer you will probably want to write more code than necessary and use your preferred language. Chose a framework based on your needs (cross platform? 2D or 3D? ...) and try to develop a simple level to understand if you made the right choices.

When you start, you won't necessarily have a clear view of the possible frameworks/technologies available to build a game – and there are a lot. In addition you will be biased towards some languages/features.

About that, I can tell you 2 mistakes I made:

I used PixiJS and HTML technologies at first. As opposite as you may think, I was able to go at 60 fps with FHD (1920x1080) resolution even in medium performance mobile devices.

This is because most of the work is done by WebGL. But at a certain point the game started flickering on my old mobile phone (Neffos X1 Max) when ported to a mobile app using Capacitor (webview). But it was working well on the browser and on the other phones I had. Even on my Motorola Moto G first generation (2013 low end device).

I should have tested earlier on mobile (not just with the browser). Also the game wasn't smooth on the my lower end device Moto G (still it was running near 30 fps).

I decided that I wanted my game to run smoothly even on low end devices, so I switched to Unity 2D. Unity is used by a lot of indie game developers, and C# is quite easy. I didn't try Unreal Engine, because I am too rusty on C++. Now it runs smoothly also on my Moto G (60 FPS).

The second thing that was almost a mistake is that I developed a library to find the shortest path on polygon areas with polygon holes. Here you can find the JS code (I have ported it to C#, but not yet release on GitHub).

I took me 3 attempts to get it working properly, and a lot of time. Fortunately by the time I started developing Occulto, the library was ready and working. Now I can just draw the walkable area and have the main character move inside it, avoiding obstacles (polygon holes).

The fact is that having an algorithm to move things inside a walk-able area is not strictly necessary, and it is better to focus on actually making the game. Other P&C games do not use this feature, they just move characters along predefined paths.

So, before you embark on something that is not strictly necessary for the game, see if you can find something already implemented or if it is really worth it.

Release a one scene version of the game

After you've chosen the right framework, take a scene, and develop the entire game which will consist on one scene plus a menu and every UI component that is cross scene. It is important to learn everything you need and to find problems as soon as possible.

Also, submit the game for internal testing (not public) to the stores you are going to use. Yes, do everything that's necessary from developing to publishing (privately) the game.

When I published the game demo on iOS, one animation wasn't working. It was working on Android, Desktop, and even on iPhone with the developer build. So yes, you need to test everything as soon as possible, even the process of publishing.

I made the mistake to first develop the whole demo (four scenes, plus menu and some other screens) just to find out that WebGL technology was not the right choice for my game.

Final Notes

I hope you enjoyed reading this article and found some interesting advice. Maybe I will write another article when I have published the whole game, sharing other insights.

If you are curious about Occulto game, follow us on:

• Twitter: https://twitter.com/SirioArtGames

• Instagram: https://www.instagram.com/sirioartgames

• Our website: https://www.sirioartgames.com

or try the demo: http://onelink.to/occulto!

According to the game's creator, Lynn Zheng,

Learn to Code RPG is an interactive visual novel game where you will teach yourself to code, make friends in the tech industry, and pursue your dream of becoming a developer. 🎯

If this is the first time you're hearing about this game, you can download it and play it first on your own.

And if you want to learn more about the game from Lynn herself, check out this introductory article.

Learn to Code RPG Story Milestones

These are the achievements that you get for sure by following the storyline.

3, 2, 1, Learn to Code! You'll get this achievement the first time you start working on the quizzes.

Got My First Interview! You get this achievement once your character goes through their first interview after completing the curriculum.

Got My First Offer! Once you receive your first job offer you get this achievement.

Gotta Crush Those Technical Interviews! Once you start preparing for the technical interviews you get this achievement.

Nailed the Curriculum! You unlock this achievement once you reach a CS Knowledge of 60 or more, enough to allow you to go to the next step.

Now Streaming: My Dream Dev Job You unlock this achievement once you accept an offer for a dev job.

Submitted My First Dev Job Application! When you submit your first job application, you get this achievement.

Learn to Code RPG Story Easter Eggs

You can unlock these special achievements mostly by making certain choices in the game, by employing some skill, or in some cases by pure chance.

Applied to CupcakeCPU Through a Recruiter: This achievement has the prerequisite of getting all the questions of the trivia quiz at the Hacker Space right. This will give you the opportunity to apply to CupcakeCPU.

Asked My Tech-Savvy Friends about Tech Buzzwords: Ask about one of the buzzwords you discovered by eavesdropping on people's conversations.

Barista Is My Undercover Identity for Collecting Buzzwords: You unlock this one during your first Barista shift.

Beat Up AI at Pong: beat the Pong AI to unlock this achievement.

Chill Beats to Code to: listen to music during one of your rest days.

Chill Beats to Smash Keyboard to: play the rythm game during one of your rest days.

Flunked All Quizzes in a Session: Get all questions in a session wrong.

Got Beaten Up by AI at Pong: lose at Pong.

Got a Nearly Perfect Score on ALL Music Tracks: Get above 95% for all tracks. See next achievements for details.

Got a Nearly Perfect Score on My Favorite Music Track: Get this achievement for reaching a score above 95%. For reference to reach 90% you need at least 3/4 of your scores to be perfects (100pt each) and 1/4 to be goods (60pt each).

Hanging Out at the Hacker Space: you get this achievement after hanging out at the Hacker Space for the first time.

I Might Get a Puppy Just So I Can Go to the Park: Go take a walk on one of your rest days.

Late-night Cookie Crunch: When confronted with all the certifications available in the freeCodeCamp curriculum, choose Quality Assurance and go grab a cookie.

Maxed Out ALL CS Knowledge Stats: Max out all of the CS Knowledge Stats.

Maxed Out One CS Knowledge Stat: Max out one of the CS Knowledge Stats.

Nailed All Quizzes in a Session: Get all quizzes in a session right.

Referred by a VIP Member: In the intro, after the disaster of an interview you are asked how you came across the opportunity. If you say you were referred by certain people, for example, me, you can get the achievement. (Fine, the complete list of names is Quincy, Lynn, Abbey, Estefania, Jessica, Oliver, Ilenia, Dionysia, Naomi, Yoko, Daniel, Beau.)

Rejected? Well, The First One Seldom Works Out: Be rejected by a job you applied to for the first time.

Rejected Again? I Thought Third Time Was the Charm: Be rejected by a job you applied to for the third time.

Set a New High Score in the Rhythm Game: available from the second time you play a song, just get a new high score!

Tech Buzzword Encyclopedia: collect all buzzwords at the coffee shop.

Tech Trivia Guru: Answer correctly to all questions in the Trivia quiz at the Hacker Space.

The Hacker Space Is My Second Home Now: Experience all events at Hacker Space.

This Job Needs Me to... ?: there are 6 achievements of this kind, related to job interviews. You could find job postings that have strange skill requirements, and finding those you unlock these achievements. The whole list of skill requirements is: Brew Coffee, Fix Fax Machines, Fuse Cables, Handle Angry Customers, Pacify Office Pets, and Retrieve Lost Passwords.

Travel in Time and SAVE the World: unlock one of the alternative endings (ones that are not getting a dev job) and then go back in time to continue playing.

You Can Never Be Too Careful with Prod: get a dev job, and once it's time to push your code to production, check your code again and again as many times as possible.

Quiz Question Easter Eggs

These are achievements that are unlocked by chance while you complete the quizzes. If you get one of the questions about freeCodeCamp right, you unlock one of these achievements.

• Contribute to Open Source with freeCodeCamp!
• Dr. DevDocs.io
• Hello, Earth to Code Radio!
• The Launch of freeCodeCamp
• The Mission of freeCodeCamp
• The Tech Stack of freeCodeCamp
• What inspired freeCodeCamp?
• freeCodeCamp Has a Chat Server? Fancy!
• freeCodeCamp Has a Forum? Neat!
• freeCodeCamp Has a Mascot? Cute!

Alternative Learn to Code RPG Endings

These are the achievements you unlock by playing the six different endings. There's one you can get to easily just by following the main storylines – but the others are all about chance. There is a small chance of the event that unlocks the ending happening in certain moments.

Cat Who Codes: this ending involves Mint the cat, during the night you could be woken up by the cat doing something...
Coding It Forward: during dinner you could have the chance to become a coding tutor, accept the offer to unlock this ending.
Dev Who Brought Down Prod on the First Day: get a dev job and play till the end to unlock this one.
Just Another Day at the Office: while going through job postings you could find one unrelated to coding, for an office job. Accept that job to unlock this ending.
Nature Lover at Heart: each day of forced rest there is a small chance that the character may come to the conclusion that learning to code is too much and decide to do something different...
Now serving 0xc0ffee: you could be offered a promotion at the Coffee Shop, accept it to unlock this ending.

Conclusion

This is the list of achievements for the release on December 22nd. I hope you can satisfy your completionist spirit with this guide. Have nice replays!

If you want to learn more about the game you can read the article Learn to Code RPG – A Visual Novel Video Game Where you Learn Computer Science Concepts from the game dev herself about the process of creating the game.

Fact Sheet

Developer

freeCodeCamp.org, a 501(c)(3) nonprofit

Platform

Windows/Mac/Linux

Available on

itch.io

Price

Free

Source Code

GitHub

Release Date

December 22, 2021

Developer Contact

Quincy Larson, quincy@freecodecamp.org

Lynn Zheng, lynn@freecodecamp.org

Description

Learn to Code RPG is an interactive visual novel game where you will teach yourself to code, make friends in the tech industry, and pursue your dream of becoming a developer. 🎯

In this game, your choices shape and drive the story forward: What will you do on a day-by-day basis? Learn to code? Work as a barista? Visit the Hacker Space? Or chill, relax in the park, or cuddle with a kitten over some video games?

Will you stick to your dream – getting a job in the tech industry – and more importantly, keep that job? The choice is in your hands.

Features

• 2+ hours of gameplay 🎮

• Original art and music 🎨

• 600+ CS quiz questions 📚

• 50+ Easter Eggs you can tweet about 🚀

• 6 different endings 👀

• Friendly characters and an adorable cat 🐱

• Minigames! 👾

Dev Log Article

https://www.freecodecamp.org/news/learn-to-code-rpg/

Screenshots

Learn to Code RPG Splash art

Learn to Code RPG Game Menu

Hanging out at the Hacker Space with your best friend Annika

Chill at home with your cat Mint

Take CS quizzes

Quiz question explanation screen

NPCs

Rhythm Minigame

Videos

Trailer

Let's Play

Logo

Character Cards

In this article, we'll learn how random number generators work.

How an Analogic Random Number Generator Works

The simplest form of a RNG is throwing dice or flipping coins.

Using a single die or coin means that each value has the same probability of occurring. Using multiple dice or coins instead will give a lower probability to the highest and lower values, and a higher probability to the middle values.

The oldest known tabletop game, the Royal Game of Ur, uses four 4-sided dice. Each die can give a value of 0 or 1 meaning that the value obtained by a single dice throw can go from 0 to 4.

All the possible combinations obtained by throwing 4 dice, each can give a value of 0 or 1

There are 16 possible combinations, of which one gives a value of 0, 4 gives a value of 1, 6 gives a value of 2, 4 gives a value of 3, and one gives a value of 4.

In this case there is a 1/16 or 6.25% chance of getting 0, 1/4 or 25% chance of getting 1, 3/8 or 37.5% chance of getting 2, 1/4 or 25% chance of getting 3 and 1/16 or 6.25% change of getting 4.

More complex games have manuals full of tables to determine something randomly.

Part of a table for random effects after drinking a potion. Here's the whole table.

Any game that uses dice has an analogic random number generator.

How Random Number Generators Work in Video Games

In video games, RNGs are much less noticeable and more complex, and players might not even be aware they exist. There are many ways you can generate a Random Number, but how do you actually use one?

Breaking it down into the simplest terms, using a RNG is not dissimilar from what you saw above with the dice throw used to determine an effect from a table. You just don't see the dice throw.

In a video game, you can use a RNG to determine what kind of loot might be dropped by a fallen enemy, or what you can find in a chest, or what kind of random encounter will await you, or even what the weather will be.

RNGs are used, for example, to live up open world games without the developers having to code every single section of forests and roads and deserts. Instead, developers code some possibilities and let chance determine what happens when the player reaches a certain point in the map.

Will you meet a bear, a wolf pack, or some bandits? The game does its version of rolling a die to determine that.

Let's see how to code a simple example of a Random Number Generator to better understand how they actually work.

How to Code a Random Number Generator

Most programming languages contain a random function. This function returns a random number, and what kind of random number depends on its implementation.

For example, in JavaScript, Math.random() returns a random number between 0 (included) and 1 (not included). In Python, randint from the random module returns a whole number in a range (Python has also a function that does the same as JavaScript's Math.random).

Let's consider a pretty common video game situation: we have an enemy that often drops a common item, but now and then drops something rare. This enemy may be, for example, a wolf that could drop a wolf pelt (common) or a wolf fang (rare).

How do you determine what is "rare"? That depends on you – it can be that 1 in 10 drops is a rare item, or that 1 in 100 drops is a rare item. A middle ground may be a chance of 1 in 25 for a rare items. And to complicate it a bit, there could be also a 1 in 10 chance of no item.

In this case you would need a function that returns a value between 0 and 1.

A chance of 1 in 25 is 4%, and a chance of 1 in 10 is 10%. In decimal form that would be 0.04 and 0.1, respectively.

In this case you can say that a number in the range from 0 to 0.04 gives the rare item, and a number in the range from 0.9 to 1 gives no item.

The percentage breakdown of the wolf drop

To avoid sticking to one language, let's first see how we can code this using pseudocode. This is not a real programming language – rather, it's a way to break down the code logic. It's like taking notes, as it's personal and will have varied syntax depending on the person writing it.

FUNCTION wolfDrop
  randomNumber = random(0,1)
  IF
    randomNumber < 0.04
    THEN
     -> wolf fang
  ELSE IF
    randomNumber < 0.9
    THEN
     -> wolf pelt
  ELSE
    -> empty
  END IF
END FUNCTION

Or a more verbose version:

Create a function called wolfDrop and inside it store a random number between 0 (included) and 1 (excluded) in the randomNumber variable. If randomNumber has a value less than 0.04 the drop will be a wolf fang, else if the randomNumber has a value less than 0.9 the drop will be a wolf pelt, and otherwise there will be no drop.

With the pseudocode ready, we can implement the code snippet in any language. Let's see, for example, how to code it in a few different languages:

function wolfDrop () {
  const randomNumber = Math.random();
  if (randomNumber < 0.04) {
    return "Wolf fang";
  } else if (randomNumber < 0.9) {
    return "Wolf pelt";
  } else {
    return;
  }
}

import random
def wolfDrop():
  randomNumber = random.random()
  if randomNumber < 0.04:
    return "Wolf fang"
  elif randomNumber < 0.9:
    return "Wolf pelt"
  else
    return

(defn wolf-drop []
  (let [random-number (rand)]
    (cond (< random-number 0.04) "Wolf fang"
          (< random-number 0.9) "Wolf pelt")))

func wolfDrop() string {
    randomNumber := rand.Float64()
    switch {
        case randomNumber < 0.04:
            return "Wolf fang"
        case randomNumber < 0.9:
            return "Wolf pelt"
        default:
            return ""
    }
}

fun wolfDrop(): String {
    val randomNumber = Random.nextFloat()
    when {
        randomNumber < 0.04 -> return "Wolf fang"
        randomNumber < 0.9 -> return "Wolf pelt"
        else -> return ""
    }
}

def wolf_pelt() do
  random_number = :rand.uniform()
  cond do
    random_number < 0.04 -> "Wolf fang"
    random_number < 0.9 -> "Wolf pelt"
    true -> nil
  end
end

string WolfPelt() {
  var random = new Random();
  double randomNumber = random.NextDouble();
  if (randomNumber < 0.04) return "Wolf fang";
  if (randomNumber < 0.9) return "Wolf pelt";
  return null;
}

extern crate rand;

fn wolf_drop() -> &'static str {
  let random_number: f64 = rand::random();
  if random_number < 0.04 {
    "Wolf fang"
  } else if random_number < 0.9 {
    "Wolf pelt"
  } else {
    ""
  }
}

#include <stdlib.h>
#include <string.h>
#include <time.h>

int wolf_drop(char *drop_item) {
  srand((unsigned) time(0));
  double random_number = 1.0 * rand() / RAND_MAX;
  if (random_number < 0.04) {
    strncpy(drop_item, "wolf fang\0", 10);
  } else if (random_number < 0.9) {
    strncpy(drop_item, "wolf pelt\0", 10);
  } else {
    strncpy(drop_item, "\0", 1);
  }
  return 0;
}

function wolfdrop()
    randomnumber = rand()
    if randomnumber < 0.04
        return "wolf fang"
    elseif randomnumber < 0.9
        return "wolf pelt"
    else
        return ""
    end
end

(Thanks to alpox for the code snippets in Clojure, Golang, Kotlin, Elixir and C#, and to Jeremy for the snippets in Rust, C, and Julia.)

Other examples of math.random

If you want to learn more about all this, you can read this article about the Math.random function in JavaScript and create a Dice Rolling Game.

You can also read this article on using the random walk algorithm and create a random dungeon map with JavaScript to experiment some more with RNGs.

Conclusion

Random Number Generators, or RNGs, are used in many games. In this article, you have learned how and why they are used, and you've seen an example implementation.

Next time you play a video game, will you be able to spot where a RNG may be used?

In this article, I'll teach you how to make a basketball using materials and textures in Unity. You can extend this micro-concept to create any kind of ball like a football, tennis ball, or snooker balls.

That said, these techniques aren't just limited to creating round 3D objects like balls. You should be able to use this concept to customize the look of any type of geometry (or mesh).

Here is what you will create👇🏻

Basketball🏀

Think of the basketball as a sphere (that is, a mesh) wrapped up with a pretty paper (that is, a texture).

Let’s get started.

Prerequisites

To make the bouncing ball, your sample scene should have  the following:

1. A plane
2. A sphere with a custom material

Let's see how to do that first.

Step 1: How to Add a Plane and a Sphere to the Scene

First go to the Hierarchy Panel in Unity. Right click and select plane to drop a plane in your scene. Do the same to add a sphere.

Add a plane and a sphere to the scene

Step 2: How to Create a Folder that Contains All the Colors

It’s always a good practice to begin by creating a folder that contains all your colors and materials. This helps you create a palette (or a collection of colors and materials) and makes it easier for you to apply the assets in your palette to the Game Objects.

Simply go to the Projects panel. Then right click in the assets sub-panel, click create, and then select folder. Name this folder "Materials".

Right-click in Assets Panel > Create > Folder > Name it “Materials”

Step 3: How to Create a Material for the Plane

The next step is to create colors (or materials) for the plane.

Go inside the materials folder that you created in the above step by double clicking on it. Right click and select create. Then select "Material" from the dropdown.

Go inside Materials Folder > Right-click > Create > Material > Name it “MyColor”(or whatever you want)

Step 4: How to Change the Albedo Property of the Material

Next select the created material and check out its properties in the Inspector Panel on the right-hand side.

Note that you only need to change the albedo property of the plane's material and not the sphere's material. We will create a material for the sphere later in this article.

It is important that your sphere has a custom material in this step. Otherwise, you will not be able to view or modify the various properties of the Material.

Change the “albedo” property to whatever color you want.

Great! Now you can create a collection of colors using the same technique.

Now we can apply the color to any Game Object like this👇.

Drag and drop the material into the Game Object (in our case it will be a plane instead of a cube)

Step 5: How to Add the Rigidbody Component to the Ball

Since we need our ball to obey the laws of physics, we will have to attach the Rigidbody component to it.

To do so, select the Sphere from your Scene Hierarchy panel. Click on Add Component and then make sure the "Use Gravity" box is checked. We don’t want the ball to float off into space 😅.

Select the Sphere > Add Component > Rigid Body > Keep “Use Gravity” box checked

Step 6: How to Create a "Bouncy" Material

Go to the assets panel. Right click and then click create. Make sure you select the "Physic Material" and not Material. Name the material anything you want to. I named it "Bouncy" for obvious reasons.

Right-click in the assets panel > Create > Physic Material > Name it “Bouncy”

Step 7: How to Change the Properties of the Bouncy Material

Select the Bouncy Material. You should be able to view the properties of this material on the right-hand side in the the Inspector panel. Now change the properties.

Set Friction to 0 and Bounciness to 1

Step 8: How to Apply the Material to the Sphere

Now apply this material to the sphere (that is, the ball) in our scene by simply dragging and dropping the bouncy material to the sphere.

Drag and drop the Bouncy Material into the Sphere

That’s it! 🎉 This step confirms that the sphere will bounce on the floor.

Step 9: Hit the Play Button

On top of the Game panel you will find the play button. Click on it and the ball will start bouncing.

Our ball is bouncing now. Yayyy!

Notice how the bouncing stops after some time. This is expected behavior and we will fix this in the next step.

Step 10: How to Change the Properties of the "Bouncy" Material

Different balls bounce differently. You can control the number of times the ball bounces. Try experimenting with different properties of the “Bouncy” material.

Select the "Bouncy" material in the Materials folder and try changing the values of the properties. If you want the ball to bounce forever set the value of Bounce Combine to Maximum.

Set the value of Bounce Combine to Maximum and our ball won’t stop bouncing at all

Alright. Now let's make that ball look like a real basketball.

Step 11: How to Create a Folder that Will Contain All Your Textures

To keep things organized, let’s create a folder that will contain all the textures.

To do so, go to the assets panel and create a new folder called "Textures". This is where we will store all our textures.

Right-click in Assets Panel > Create > Folder > Name it “Textures”

Step 12: How to Download a Texture

Since we need a texture for a basketball, simply download one online. A texture is just an image in .png or .jpg format. For now, you can download the basketball texture from here:

Make sure you have the appropriate license to use a texture that you download. The above textures are free to use.

Step 13: How to Drop the Texture into your Unity Project

Simply drag and drop the textures into the Textures folder as shown below👇

Drag and drop the downloaded texture into the “Textures” folder that you created in Step 1 above.

Step 14: How to Apply the Downloaded Texture to the Sphere

Select the sphere to view all its properties in the Inspector panel. Then drag and drop the "BasketballColor" texture to the square box on the left hand side of the Albedo property.

Drag and drop the downloaded texture to the box at the left of the Albedo property.

You've successfully used Materials and Textures to create a basketball. Now you can do the same for all your games or AR/VR experiences that you develop.

Different types of balls behave differently. Try experimenting with the bounciness and tweaking the different parameters of the Rigid Body Component attached to the sphere to create a golf ball, a football, or a tennis ball.

Enjoy!👏🏻

You can connect with me on social media here:

• Twitter id: @knightcube
• Subscribe to my YouTube channel to learn more about AR/VR
• Read more articles on my Medium profile here

Three.js is a library that we can use to render 3D graphics in the browser. The whole thing is in JavaScript, so with some logic you can add animation, interaction, or even turn it into a game.

In this tutorial, we will go through a very simple example. We'll render a 3D box, and while doing so we'll learn the fundamentals of Three.js.

Three.js uses WebGL under the hood to render 3D graphics. We could use plain WebGL, but it's very complex and rather low level. On the other hand, Three.js is like playing with Legos.

In this article, we'll go through how to place a 3D object in a scene, set up the lighting and a camera, and render the scene on a canvas. So let’s see how we can do all this.

Define the Scene Object

First, we have to define a scene. This will be a container where we place our 3D objects and lights. The scene object also has some properties, like the background color. Setting that is optional though. If we don't set it, the default will be black.

import * as THREE from "three";

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000); // Optional, black is default

...

Geometry + Material = Mesh

Then we add our 3D box to the scene as a mesh. A mesh is a combination of a geometry and a material.

...

// Add a cube to the scene
const geometry = new THREE.BoxGeometry(3, 1, 3); // width, height, depth
const material = new THREE.MeshLambertMaterial({ color: 0xfb8e00 });
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0); // Optional, 0,0,0 is the default
scene.add(mesh);

...

What is a Geometry?

A geometry is a rendered shape that we’re building - like a box. A geometry can be build from vertices or we can use a predefined one.

The BoxGeometry is the most basic predefined option. We only have to set the width, height, and depth of the box and that’s it.

You might think that we can't get far by defining boxes, but many games with minimalistic design use only a combination of boxes.

There are other predefined geometries as well. We can easily define a plane, a cylinder, a sphere, or even an icosahedron.

How to Work with Material

Then we define a material. A material describes the appearance of an object. Here we can define things like texture, color, or opacity.

In this example we are only going to set a color. There are still different options for materials. The main difference between most of them is how they react to light.

The simplest one is the MeshBasicMaterial. This material doesn't care about light at all, and each side will have the same color. It might not be the best option, though, as you can’t see the edges of the box.

The simplest material that cares about light is the MeshLambertMaterial. This will calculate the color of each vertex, which is practically each side. But it doesn't go beyond that.

If you need more precision, there are more advanced materials. The MeshPhongMaterial not only calculates the color by vertex but by each pixel. The color can change within a side. This can help with realism but also costs in performance.

It also depends on the light settings and the geometry if it has any real effect. If we render boxes and use directional light, the result won't change that much. But if we render a sphere, the difference is more obvious.

How to Position a Mesh

Once we have a mesh we can also position it within the scene and set a rotation by each axis. Later if we want to animate objects in the 3D space we will mostly adjust these values.

For positioning we use the same units that we used for setting the size. It doesn't matter if you are using small numbers or big numbers, you just need to be consistent in your own world.

For the rotation we set the values in radians. So if you have your values in degrees you have to divide them by 180° then multiply by PI.

How to Add Light

Then let's add lights. A mesh with basic material doesn’t need any light, as the mesh will have the set color regardless of the light settings.

But the Lambert material and Phong material require light. If there isn't any light, the mesh will remain in darkness.

...

// Set up lights
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);

...

We'll add two lights - an ambient light and a directional light.

First, we add the ambient light. The ambient light is shining from every direction, giving a base color for our geometry.

To set an ambient light we set a color and an intensity. The color is usually white, but you can set any color. The intensity is a number between 0 and 1. The two lights we define work in an accumulative way so in this case we want the intensity to be around 0.5 for each.

The directional light has a similar setup, but it also has a position. The word position here is a bit misleading, because it doesn’t mean that the light is coming from an exact position.

The directional light is shining from very far away with many parallel light rays all having a fixed angle. But instead of defining angles, we define the direction of a single light ray.

In this case, it shines from the direction of the 10,20,0 position towards the 0,0,0 coordinate. But of course, the directional light is not only one light ray, but an infinite amount of parallel rays.

Think of it as the sun. On a smaller scale, light rays of the sun also come down in parallel, and the sun’s position isn't what matters but rather its direction.

And that’s what the directional light is doing. It shines on everything with parallel light rays from very far away.

...

const dirLight = new THREE.DirectionalLight(0xffffff, 0.6);
dirLight.position.set(10, 20, 0); // x, y, z
scene.add(dirLight);

...

Here we set the position of the light to be from above (with the Y value) and shift it a bit along the X-axis as well. The Y-axis has the highest value. This means that the top of the box receives the most light and it will be the shiniest side of the box.

The light is also moved a bit along the X-axis, so the right side of the box will also receive some light, but less.

And because we don’t move the light position along the Z-axis, the front side of the box will not receive any light from this source. If there wasn't an ambient light, the front side would remain in darkness.

There are other light types as well. The PointLight, for instance, can be used to simulate light bulbs. It has a fixed position and it emits light in every direction. And the SpotLight can be used to simulate the spotlight of a car. It emits light from a single point into a direction along a cone.

How to Set up the Camera

So far, we have created a mesh with geometry and material. And we have also set up lights and added to the scene. We still need a camera to define how we look at this scene.

There are two options here: perspective cameras and orthographic cameras.

Video games mostly use perspective cameras, because how they work is similar to how you see things in real life. Things that are further away appear to be smaller and things that are right in front of you appear bigger.

With orthographic projections, things will have the same size no matter how far they are from the camera. Orthographic cameras have a more minimal, geometric look. They don't distort the geometries - the parallel lines will appear in parallel.

For both cameras, we have to define a view frustum. This is the region in the 3D space that is going to be projected to the screen. Anything outside of this region won't appear on the screen. This is because it is either too close or too far away, or because the camera isn't pointed towards it.

With perspective projection, everything within the view frustum is projected towards the viewpoint with a straight line. Things further away from the camera appear smaller on the screen, because from the viewpoint you can see them under a smaller angle.

...

// Perspective camera
const aspect = window.innerWidth / window.innerHeight;
const camera = new THREE.PerspectiveCamera(
  45, // field of view in degrees
  aspect, // aspect ratio
  1, // near plane
  100 // far plane
);

...

To define a perspective camera, you need to set a field of view, which is the vertical angle from the viewpoint. Then you define an aspect ratio of the width and the height of the frame. If you fill the whole browser window and you want to keep its aspect ratio, then this is how you can do it.

Then the last two parameters define how far the near and far planes are from the viewpoint. Things that are too close to the camera will be ignored, and things that are too far away will be ignored as well.

...

// Orthographic camera
const width = 10;
const height = width * (window.innerHeight / window.innerWidth);
const camera = new THREE.OrthographicCamera(
  width / -2, // left
  width / 2, // right
  height / 2, // top
  height / -2, // bottom
  1, // near
  100 // far
);

...

Then there’s the orthographic camera. Here we are not projecting things towards a single point but towards a surface. Each projection line is in parallel. That’s why it doesn’t matter how far objects are from the camera, and that’s why it doesn’t distort geometries.

For orthographic cameras, we have to define how far each plane is from the viewpoint. The left plane is therefor five units to the left, and the right plane is five units to the right, and so on.

...

camera.position.set(4, 4, 4);
camera.lookAt(0, 0, 0);

...

Regardless of which camera are we using, we also need to position it and set it in a direction. If we are using an orthographic camera the actual numbers here don’t matter that much. The objects will appear the same size no matter how far away they are from the camera. What matters, though, is their proportion.

Through this whole tutorial, we saw all the examples through the same camera. This camera was moved by the same unit along every axis and it looks towards the 0,0,0 coordinate. Positioning an orthographic camera is like positioning a directional light. It's not the actual position that matters, but its direction.

How to Render the Scene

So we managed to put together the scene and a camera. Now only the final piece is missing that renders the image into our browser.

We need to define a WebGLRenderer. This is the piece that is capable of rendering the actual image into an HTML canvas when we provide a scene and a camera. This is also where we can set the actual size of this canvas – the width and height of the canvas in pixels as it should appear in the browser.

import * as THREE from "three";

// Scene
const scene = new THREE.Scene();

// Add a cube to the scene
const geometry = new THREE.BoxGeometry(3, 1, 3); // width, height, depth
const material = new THREE.MeshLambertMaterial({ color: 0xfb8e00 });
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
scene.add(mesh);

// Set up lights
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight.position.set(10, 20, 0); // x, y, z
scene.add(directionalLight);

// Camera
const width = 10;
const height = width * (window.innerHeight / window.innerWidth);
const camera = new THREE.OrthographicCamera(
  width / -2, // left
  width / 2, // right
  height / 2, // top
  height / -2, // bottom
  1, // near
  100 // far
);

camera.position.set(4, 4, 4);
camera.lookAt(0, 0, 0);

// Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);

// Add it to HTML
document.body.appendChild(renderer.domElement);

And finally, the last line here adds this rendered canvas to our HTML document. And that’s all you need to render a box. It might seem a little too much for just a single box, but most of these things we only have to set up once.

If you want to move forward with this project, then check out my YouTube video on how to turn this into a simple game. In the video, we create a stack building game. We add game logic, event handlers and animation, and even some physics with Cannon.js.

If you have any feedback or questions on this tutorial, feel free to Tweet me @HunorBorbely or leave a comment on YouTube.

Live2D is a technology that allows artists to easily transform traditional 2D illustrations to create fluid expressions and motions.

The most popular software for Live2D modeling and animation is Cubism, which also provides well-documented SDK for web, native apps, and the Unity game development engine.

In this tutorial, I will walk you through how to build on top of Cubism's official Live2D Web SDK sample and deploy it to Heroku, a popular cloud app-hosting platform.

How to Set Up the Environment

To follow along with this tutorial, clone my GitHub repo and checkout the start branch. The finished project is on the develop branch.

I've also recorded a video tutorial on YouTube.

git clone https://github.com/RuolinZheng08/heroku-live2d.git
git checkout start

# update the submodule, Cubism's Live2d Web Framework
git submodule update --init

Install Node.js and npm using Homebrew:

# if you need to install homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# homebrew will install node and npm at the same time
brew install node

I'll be using Visual Studio Code as my main IDE, but you may follow along using any editor of your choice.

How to Run the Starter Code Locally

The directory structure is as follows. Our web app will be served from Samples/TypeScript/Demo.

.
├─ .vscode          # Visual Studio Code project setting
├─ Core             # Live2D Cubism Core JavaScript and TypeScript source code
├─ Framework        #  Source code for the rendering and animation features
└─ Samples
   ├─ Resources     # Live2D model files and web image assets
   └─ TypeScript    # [IMPORTANT] TypeScript sample project

Inside the heroku-live2d directory, run the following commands:

cd Samples/TypeScript/Demo/

npm install

npm run-script build

npm run-script serve

Navigate to http://localhost:5000/Samples/TypeScript/Demo/ and you should be able to see a Live2D character.

To interact with the model, hold down your mouse cursor and the character's head and eyes will follow your cursor. Tap on the body of the character to see a special animation. Tap on the gear icon in the top right corner to switch between different models.

Mark from Samples/Resources/Mark

How to Deploy to Heroku

The starter code uses npm, TypeScript, and webpack.

To deploy our project to Heroku, we need to create a package.json file that Heroku can use to build our project in our project root directory. We also need to modify Samples/TypeScript/Demo/package.json and the webpack configuration in Samples/TypeScript/Demo/webpack.config.js.

Top-level package.json

The boilerplate package.json for a Node.js Heroku app looks like this:

{
    "name": "heroku-live2d",
    "description": "Live2D Cubism Heroku Demo",
    "scripts": {
        "start": ...,
        "build": ...
    },
    "dependencies": {
        ...
    }
}

Inspect the dependencies and devDependencies attributes in Samples/TypeScript/Demo/package.json and add both sets of dependencies as dependencies to heroku-live2d/package.json.

Remember that when building and serving locally, we used npm run-script [build|serve] from inside the Samples/TypeScript/Demo directory.

Therefore, to run these npm commands from the project root, we need to prepend cd Samples/TypeScript/Demo before the npm commands. The build command, for example, will become:

cd Samples/TypeScript/Demo && npm run-script build

With these changes, the top-level package.json should look like this:

{
    "name": "heroku-live2d",
    "description": "Live2D Cubism Heroku Demo",
    "scripts": {
        "start": "cd Samples/TypeScript/Demo && npm run-script start",
        "build": "cd Samples/TypeScript/Demo && npm run-script build"
    },
    "dependencies": {
        "@typescript-eslint/eslint-plugin": "^2.18.0",
        "@typescript-eslint/parser": "^2.18.0",
        "eslint": "^6.8.0",
        "eslint-config-prettier": "^6.10.0",
        "eslint-plugin-prettier": "^3.1.2",
        "prettier": "^1.19.1",
        "rimraf": "^3.0.1",
        "serve": "^11.3.0",
        "ts-loader": "^6.2.1",
        "typescript": "^3.7.5",
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.10.1",
        "whatwg-fetch": "^3.0.0"
    }
}

Samples/TypeScript/Demo/package.json

On localhost, we were running on port 5000. However, Heroku will dynamically assign our web app a port stored in a variable $PORT. Therefore, we need the npm run-script start command inside Samples/TypeScript/Demo/package.json to start the webpack server on port $PORT.

Append to scripts > start > webpack-dev-server --progress so it looks like this:

"scripts": {
    "start": "webpack-dev-server --progress --port $PORT",
    ...
}

Samples/TypeScript/Demo/webpack.config.js

Add disableHostCheck to the configuration of devServer and remove port since we have configured it dynamically above.

module.exports = {
    ...,
    devServer: {
        contentBase: path.resolve(__dirname, '../../..'),
        watchContentBase: true,
        inline: true,
        hot: true,
        port: 5000, // delete this line
        host: '0.0.0.0',
        disableHostCheck: true, // add this line
        compress: true,
        useLocalIp: true,
        writeToDisk: true
    },
    ...
}

Add watchOptions so that our node_modules won't be watched. If we don't do this, we will run into an error about exceeding the maximum number of watchers when we deploy to Heroku.

module.exports = {
    ...,
    watchOptions: {
        ignored: /node_modules/
    },
    ...
}

Deploy to Heroku

To download the Heroku command line client, run

brew tap heroku/brew && brew install heroku

Log into Heroku from the command line using heroku login.

Create a Heroku app and append some numbers (for example, 123) to the app name to ensure uniqueness.

heroku create heroku-live2d-NUMBERS

Set up Node.js as the buildpack:

heroku buildpacks:set heroku/nodejs

Add and commit your project using git. Note that we don't necessarily need git push:

git add .
git commit -m "Ready to deploy to heroku"

Push the project to Heroku, assuming you are following along on the start branch. You can always check the branch you are on and push from that branch.

# check which branch we are on
git branch

# the syntax is
# git push heroku GIT_BRANCH_NAME:HEROKU_BRANCH_NAME
git push heroku start:master

You may need to wait for a few minutes for the build process to complete.

After that, navigate to YOUR-HEROKU-APP-NAME.herokuapp.com/Samples/TypeScript/Demo. In my case, the URL is https://heroku-live2d.herokuapp.com/Samples/TypeScript/Demo/. The Live2D characters will be there to greet you :)

Notice that the highlighted URL is already on Heroku

How to Redirect index.html to Samples/TypeScript/Demo

You might have noticed that YOUR-HEROKU-APP-NAME.herokuapp.com shows a list of the directory structure instead of the Live2D models. We can solve this by adding a dummy top-level index.html that redirects to Samples/TypeScript/Demo.

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <!-- Just a dummy html to redirect to my subdirectory -->
    <meta http-equiv="refresh" content="0; url=Samples/TypeScript/Demo">
</head>

<body>

</body>

</html>

Rerun the deployment command git push heroku start:master. Now when you visit YOUR-HEROKU-APP-NAME.herokuapp.com, you will be automatically redirected to the Live2D model page.

Congratulations on making it to the end of this tutorial! You now have a Live2D Web App deployed to Heroku.

I hope you enjoyed this tutorial. Let's keep in touch! Connect with me on LinkedIn, GitHub, Medium, or check out my personal website.

Resources & Links

My GitHub repo for this tutorial

My Heroku App

My YouTube Video Tutorial

Cubism's Official SDK Documentation

Unity is a cross-platform game engine developed by Unity Technologies, which is primarily used to develop video games and simulations for computers, consoles and mobile devices. First announced only for OS X, at Apple’s Worldwide Developers Conference in 2005, it has since been extended to target 27 platforms.

Overview

Unity is an all purpose game engine that supports 2D and 3D graphics, drag and drop functionality and scripting through C#.

Unity is particularly popular for mobile game development and much of their focus is on mobile platforms. Unity3D’s 2D pipeline is a more recent addition to the engine, and is less mature than the 3D pipeline. Despite this Unity is an adequate platform for developing 2D games even when compared to other dedicated 2D engines, particularly if you plan to release the game across multiple mobile devices.

Unity is also a good choice for VR development, although VR is a very small market at the moment. The mobile and PSVR markets are the largest in VR, and Unity is already well positioned to port games to many platforms such as PS4 and PC, or many different mobile markets.

The engine targets the following graphics APIs: Direct3D on Windows and Xbox One; OpenGL on Linux, macOS, and Windows; OpenGL ES on Android and iOS; WebGL on the web; and proprietary APIs on the video game consoles.

Additionally, Unity supports the low-level APIs Metal on iOS and macOS and Vulkan on Android, Linux, and Windows, as well as Direct3D 12 on Windows and Xbox One. Within 2D games, Unity allows importation of sprites and an advanced 2D world renderer.

For 3D games, Unity allows specification of texture compression and resolution settings for each platform that the game engine supports, and provides support for bump mapping, reflection mapping, parallax mapping, screen space ambient occlusion (SSAO), dynamic shadows using shadow maps, render-to-texture and full-screen post-processing effects.

Unity also offers services to developers, these are: Unity Ads, Unity Analytics, Unity Certification, Unity Cloud Build, Unity Everyplay, Unity IAP, Unity Multiplayer, Unity Performance Reporting and Unity Collaborate. Besides this, Unity has an asset store where the developer community can download and upload both commercial and free third party resources such as textures, models, plugins, editor extensions and even entire game examples.

Unity is notable for its ability to target games for multiple platforms. The currently supported platforms are Android, Android TV, Facebook Gameroom, Fire OS, Gear VR, Google Cardboard, Google Daydream, HTC Vive, iOS, Linux, macOS, Microsoft HoloLens, Nintendo 3DS family, Nintendo Switch, Oculus Rift, PlayStation 4, PlayStation Vita, PlayStation VR, Samsung Smart TV, Tizen, tvOS, WebGL, Wii U, Windows, Windows Phone, Windows Store, and Xbox One.

Unity is the default software development kit (SDK) for Nintendo’s Wii U video game console platform, with a free copy included by Nintendo with each Wii U developer license. Unity Technologies calls this bundling of a third-party SDK an “industry first”.

Interface

In picture above, you will notice five section:

1. Section 1. Scene View: This is where you will be creating level for your game, scene or 3D project. All of your Game Objects will be placed and manipulated right here.
2. Section 2. Game View: This is where you will see your results, how your level or scene looks like. You need to have a Camera on the scene to see how it looks like. Sometimes its called Camera View.
3. Section 3. Hierarchy: This window will display all Game Objects placed directly on the scene. Basically everything that you see in Game View, needs to be listed here. This will include non-visual and visual game objects.
4. Section 4. Project: This is your project window. Basically it show whats inside Assets folder on your disk. Everything from Game Objects, Scripts, Textures, Folders, Models, Audio, Video and etc… will be accessible from this window.
5. Section 5. Inspector: This panel will display different attibutes and properties of selected Game Objects. Depending on the selection, the appropriate attributes and components will be listed.

Noteworthy Games:

• Assassin’s Creed: Identity
• Temple Run Trilogy
• Battlestar Galactica Online
• Hearthstone: Heroes of Warcraft
• Inside
• Cuphead

History

Two other programming languages were supported: Boo, which was deprecated with the release of Unity 5 and UnityScript which was deprecated in August 2017 after the release of Unity 2017.1.

Unity formerly supported 7 other platforms including its own Unity Web Player.

Unity Web Player was a browser plugin that was supported in Windows and OS X only, which has been deprecated in favor of WebGL.

Unity is the engine used by Rust, Kerbal Space Program, and Cup Head.

More info on Unity:

• Ultimate beginner's guide to game dev in Unity
• How to create a 2D game in Unity (video)
• Take a tour of Unity 2D (video)
• Comparison of Unity and other game engines

Unity

Probably the most popular engine, Unity, has its own article here. Check it out and learn all about its many features.

GameMaker Studio

GameMaker Studio, previously known as GameMaker, is a cross-platform game development software primarily focused on creating 2d games using drag and drop action sequences or a scripting language known as Game Maker Language (GML).

Overview:

GameMaker allows it’s users to create and prototype games quickly without the need to learn a programming language. GameMaker games usually consists of at least 3 things: sprites (images & animations), objects (logic & interactivity) and rooms (screens & levels). Each game needs at least one room which is used for both menus and levels, and the transitioning between each.

GameMaker Studio 2 released on 2 November 2016.

Supported Platforms:

• Microsoft Windows
• macOS
• Ubuntu
• HTML5
• Android
• iOS
• Amazon Fire TV
• Android TV
• Microsoft UWP
• PlayStation 4
• PlayStation Vita
• Nintendo Switch (September 2018)

PlayStation Portable and Raspberry Pi support was demonstrated but not released.

Popular games made with GameMaker Studio:

• Spelunky
• Hotline Miami
• Hyper Light Drifter
• Crashlands
• VA-11 Hall-A
• Undertale
• Nuclear Throne

Unreal Engine

Unreal Engine is a cross-platform game engine developed by Epic Games. The Unreal Engine was initially developed for the 1998 FPS title Unreal, but has been subsequently used for many thousands of commercial and non-commercial titles. The most recent version of the engine, Unreal Engine 4, targets PC, PlayStation 4, Xbox One, Mac OS X, iOS, Android, many VR systems, Linux, SteamOS, and HTML5, and the editor can run on Windows, OS X and Linux.

Uscript is the engine’s native scripting language, used for creating game code and gameplay events before the release of Unreal Engine 4, and was designed for high level programming. The script was written and programmed by Tim Sweeney, also the creator of another scripting language, ZZT-oop.

Since 2015 the Unreal Engine has been free to use, with Epic charging a 5% royalty on sales of titles produced using the engine. Epic make the majority of their codebase freely available via their Github, although source for closed platforms such as the Playstation 4 and Xbox One is only available for registered platform developers.

Unreal Versions

Unreal has gone through 4 major revisions. Although some code is common between releases, each major version is a separate engine and projects cannot be moved between them. Within each major engine release, there are multiple minor versions.

• Unreal Engine 1 Released in 1998 and targeted Windows PC, Linux, Mac, PlayStation 2 and Dreamcast. The engine was written in C++, and easily moddable using the Unreal Script language.
• Unreal Engine 2 Released in 2002 and targeted Windows PC, Linux, Mac, Playstation 2 and Xbox. The engine was written in C++, utilized the Unreal Script language.
• Unreal Engine 3 Released in 2004 and targeted Windows PC, Linux, Mac, iOS, Playstation 3 and Xbox 360. Development is split between Unreal Script and C++, with an additional visual scripting interface called Kismet.
• Unreal Engine 4 Released in 2015 and targets PC, PlayStation 4, Xbox One, Mac OS X, iOS, Android, many VR systems, Linux, SteamOS, and HTML5, and the editor can run on Windows, OS X and Linux. Unreal Script has been removed and replaced with dynamically reloaded C++ modules, and a more advanced visual scripting interface called Blueprints.

Popular Games made in Unreal

• Batman Arkham City
• Mass Effect
• Bioshock
• Borderlands
• Gears of War

Pygame

Game Development with Pygame

Pygame is an open source, cross platform python library used for game development, written by Pete Shinners. The Pygame documentation and more information can be found on their website at https://pygame.org.

Overview

The project started in the year 2000 as a result of the death of PySDL. The Pygame library version 1.0 was released after six months development in April of 2001.

libGDX

libGDX is a free and open-source game-development application framework written in the Java programming language with some C and C++ components for performance dependent code.

Overview

LibGDX supports both 2d and 3d game development, and is written in Java. In addition to Java, other JVM languages, such as Kotlin or Scala can be used to program libGDX games. At it’s core, libGDX uses LWJGL 3 to handle basic game functions such as graphics, input, and audio. LibGDX offers a large API to simplify game programming. LibGDX has an informative wiki on it’s Github page, and there are many tutorials on the internet.

Phaser

Phaser is an open source framework for developing HTML5 games for desktop and mobile. You can read more about it on their website here.

Minecraft Forge

If you've heard of Minecraft, chances are you've also heard of and used Forge. It allows you to mod your Minecraft game to make it do a bunch of cool stuff. Check it out in this article here.

Something a little different: Terasology

An open-source voxel sandbox game!

The Terasology project was born from a Minecraft-inspired tech demo and is becoming a stable platform for various types of gameplay settings in a voxel world. The creators and maintainers are a diverse mix of software developers, designers, game testers, graphic artists, and musicians. We encourage others to join!

Source: http://terasology.org/

Terasology is an open-source platform for gameplay of any kind in a voxel world. If you read that sentence attentively you can see I did not use the word ‘Game’. The reason behind that is the fact that Terasology itself is not a finished game! It’s merely a platform for you to modify yourself with your own code or pre-made modules. Do not worry though, there are loads of modules constantly developed by the multidisciplinary team.

The open-source spirit

Another really cool aspect of this game is fact that MovingBlocks (the organisation behind Terasology) participates in large events such as GCI (Google Code-In), GSOC (Google Summer of Code) and more! This makes the environment especially lively and it really empowers the community spirit. This is not some random product made by a greedy multinational, this is the work of a team. A team with a passion.

Want to contribute?

You too can contribute! Check out the repository here on GitHub and start hacking into the code! Make sure you format everything properly, use clear code and follow all of the repository-specific conventions! https://github.com/MovingBlocks/Terasology/wiki

More info on Game Development:

• What is Game Development?
• Learn Unreal Engine by coding 3 games (video)
• Ultimate beginner's guide to game dev in Unity
• Code a Super Mario Bros game to learn game dev (video)

What might be even more embarrassing is that at one point I had convinced myself that 10 players per server was normal.

It all started with an idea at the beginning of the summer. I was standing in my room trying to think of an io game to make (I decided if I were to make a game, I constrained myself to making an io game for maximum viral potential — that’s a thing, I swear).

So, I began analyzing what made certain io games (agar.io, slither.io, etc.) addictive. I was finding comparisons and similarities between such games, as seen in the picture below:

“Would Joey play it?” -> Joey is my little brother in middle school. Writing this question on the board forced me to always make a decision with the end users (users of the Joey type) in mind. Smart huh.

Finally, after a little more brainstorming, I landed on knckout.io. It’s the name of the game. Try to stay on the map, and knock others off. I loved it. Simple controls, clear objective, and a beautiful game mechanic.

After laying out how I wanted the game to look and feel, I got to work. I would come home from my summer internship everyday, work out, then code.

I first got the player to move how I wanted. Then I handled the boosting. Then the collisions. Finally the game was all done and ready to be tested out by the public. Or so I thought…

Last weekend (about a week ago), I was all amped and ready to show the world what I made. So I took to the interwebs and found a small subreddit called “playmygame.” I wrote up a short summary and posted it (p.s. in the post’s comments you can clearly see I was stressing about the ability of my server). I waited patiently, then HUZZAH! A player had joined.

We were going back and forth at each other in the game. All the meanwhile, I was stressing and worried about what this player was thinking. After this player lost all their lives and was booted from the match we were in, I waited to see if they would come back. And they did! But even better: the player set their name to “ilikethisgame.” My eyes grew wide and I had a rush of adrenaline! I was the happiest boy in the world.

Soon other players joined and some left comments on the Reddit post. More players said they had enjoyed the game! I was ecstatic. Then I checked on how my server was holding up (on 8/15)…

From a 1 GB, 1 vCPU Digital Ocean NYC server running Ubuntu NodeJS 6.9.5 on 14.04

It felt like someone had knocked the wind out of me. Was this real? This had to be fake, I thought to myself. Just two games and the server is having a hard time processing them.

I started thinking about where I went wrong in my code. I thought collision detection, for sure, had to be the bottleneck. But I was already using quadtrees to help narrow down the number of collision detection passes.

I had to do some dirty work, so I spun up a new Digital Ocean server to use as my development server. I then temporarily disabled collision detection completely and saw the problem was still there.

OK — if collision detection was not the problem, then what else could it be?

I thought about how much information I was sending from the server to each client every second. I had this broadcast function that sent out the state of the game every 22 milliseconds to each client. In this function, I was unnecessarily filtering out the given client’s local player in an allPlayers property, just to put the local player in its own property. So, not only was I putting a for loop (the filtering) in another for loop (the broadcast for each client), I was also customizing the data to be sent out by this broadcast function for each client.

This customization was not necessary. I should just be able to send out the state of the game to everyone with no customization. Everyone should get the same data (and the data should not be tailored to a specific client). This had to be where the CPU is being eaten up. So I optimized this function, pushed it up to the dev server, and checked the CPU graph. No fix.

With my ignorance, I began to convince myself that ~10–20 players per 1 core server was good. Now, how do I come to such a conclusion? Well, my extreme confidence in my technical abilities was clearly blinding me from reality. I stumbled onto a post where the creator of agar.io said his 1 core server can handle about 190 players. I quickly snapped out of it.

The next culprit I had lined up was: socket.io. I was using socket.io to manage the real-time communication between the client and the server. I had heard before that socket.io was not as lightweight as other alternatives.

Back in the day, if you wanted to send a message asynchronously, you had to implement some sort of hack: long polling or flash sockets. This was because not all web browsers supported websockets. But most browsers now offer native support. But in order for socket.io to establish a connection, it first does so by using one of the available hacks mentioned, and then upgrades the connection if the client supports a better way. Even though websockets are already widely supported. This approach comes at the expense of CPU and memory. But not as much as I had thought…

I hopped online and naively typed “socket io cpu problem” into Google. The first couple results were entitled “Node.js — How to debug Node + Socket.io CPU Issues — Server Fault” and “Node.js — Socket.io node server using high cpu — Stack Overflow.” My eyes lit up. I was reassured that this was the culprit to my problem. But I clicked on the first article and the author mentioned he was dealing with ~1,500 concurrent socket connections. I’m no math major, but 20 players is significantly less than 1,500 players.

Just for the heck of it, I switched my server-side Node app to use tiny websockets, then switched the client-side Node app to use native websocket support, right inside the browser. I pushed the changes up to the dev server, and checked the CPU graph. No fix.

My morale was at an all time low. I began to cringe every time I had to check the darn CPU graph. I thought I was never going to get that blue line to stop running away from me. This was the only time I ever felt completely incapable of handling some technical task. But then it happened…

I was sitting in front of the CPU graph wallowing in my misery when I noticed something. It didn’t matter how many full games were running or how close together they were all started. The CPU was increasing steadily at a constant rate. I had never stayed around long enough to observe this. Memory leak!

I scanned my code, line by line, looking for the bug (which I should have done at the very beginning). There it was.

In my game, an event is an object that captures info about things like player deaths, boosts, and collisions. So an event is created every time one of those things happens.

I have this loop that goes through each event and updates it. It’s called every 16 ms. After an event fulfills its duty, it’s supposed to be deleted. Keywords: “supposed to.”

Bingo. I had memory piling up as well as an increasing amount of unnecessary for-loop passes. I inserted a line of code and voila!

well i’ll be

Huge sigh of relief.

My next task is to see just how many games (4 players per game) one server can now smoothly support. (I know its at least 12 games, but I haven’t tried more yet). Now that I know the number of events makes a huge impact on CPU… what will happen in production when all players are firing off boosting, collision, and death events every second? My tests have not accounted for that.

Also, after this post goes viral, and my game follows suit, I will need to quickly scale the number of servers available. I will make that the topic of a future post along with: “How knckout.io grew to millions of players.” Follow me here for updates. :)

Today we have probably the most fun collection of Gitter communities — those for game developers. No matter if you’ve already spent hours developing and playing games, or if you are looking to get started; no matter if you are into indie fantasy games or tic tac toe — you will find something for yourself. (Our team’s personal favourite is Particle Clicker — game teaching the history of high energy particle physics). Get lost in the open source world of gamers on Gitter, and be prepared to stay there for hours…

• FreeCodeCamp/GameDev — FreeCodeCamp’s chat about designing and developing video games.
• Cockatrice/Cockatrice — A cross-platform virtual tabletop for multiplayer card games.
• superpowers/dev — 2D+3D game making for indies. Free and open source.
• MonoGame — One framework for creating powerful cross-platform games. The spiritual successor to XNA with 1000’s of titles shipped across desktop, mobile, and console platforms. MonoGame is a fully managed .NET open source game framework without any black boxes.
• GlowstonePlusPlus — The enhanced Glowstone fork with an emphasis on performance, control and compatibility.
• flying-squid — A minecraft server written in node.js, modularized.
• craftyjs/Crafty — JavaScript Game Engine.
• GLBoost — GLBoost is a new WebGL library for realtime 3D graphics geeks. It’s a low-level library that takes away the pain of having to deal with routine WebGL API tasks without limiting your expressive power.
• Planimeter/grid-sdk — The Grid SDK — A 2D game engine built on LÖVE. Grid makes powerful concepts from 3D game engines accessible in a 2D game environment. It’s a lightweight and fast engine, and it provides many abstractions that you would otherwise need to write by hand for your projects or game jams.
• SiliconStudio/xenko — Xenko is a powerful cross-platform game engine.
• FreezingMoon/AncientBeast — Ancient Beast is free and open source turn based strategy indie game project, being developed by Freezing Moon and community. It uses web technologies such as HTML, PHP, JavaScript and Node.js, so that it’s playable from modern browsers without requiring plugins.
• Circular-Studios/Dash — A free and open 3D game engine written in D.
• JoelOtter/termloop — Termloop is a pure Go game engine for the terminal, built on top of the excellent Termbox. It provides a simple render loop for building games in the terminal, and is focused on making terminal game development as easy and as fun as possible.
• ebkalderon/amethyst — Amethyst aims to be a fast, data-oriented, and data-driven game engine suitable for rapid prototyping and iteration. It also tries to push the Rust programming language to its limits, driving further improvement and hopefully attracting more game developers toward the young and vibrant Rust ecosystem.
• orx/orx — Orx is a 2D-oriented, data-driven, portable game engine focused primarily on ease of use and powerful features.
• PrismarineJS/prismarine-server — NodeJS Game Server compatible with Minecraft Client.
• Curvytron/curvytron — A web multiplayer Tron game like with curves.
• yeahrb/yeah — Practical Ruby video game framework.
• Particle-clicker — An addictive incremental game that teaches players the history of high energy particle physics
• ieee-tic-tac-toe — The CSU IEEE TIC-TAC-TOE game.

Looking for something else? Check out our Explore section or easily start your own channel here.

Did we miss an channel that you think should be featured? Drop us a line in the Gitter HQ and we will add it to the list.

Happy gaming!