In this guide, I will show you how you can make your mouse more sensitive or less sensitive by changing its DPI.

What is DPI?

DPI stands for dots per inch. It is the measurement of mouse sensitivity and cursor speed.

The higher your mouse DPI, the faster your mouse responds to movement per inch and the farther it travels. The slower the DPI, the slower your mouse responds to movement.

How to Change your Mouse DPI on Windows 10

You can change your mouse DPI through the Settings app.

Step 1: Click on Start or press the WIN (Windows) key on your keyboard and select Settings.

Step 2: Out of the menu items you see, select "Devices".

Step 3: Click on the Mouse tab on the Devices page, then select "Additional mouse options" under “Related settings”.

Step 4: A pop-up will appear. Click on the "Pointer options" tab.

Step 5: You will see a slider under "Select pointer speed" which you can use to adjust your mouse DPI. Move the slider to the left to reduce the DPI and to the right to increase it.

Step 6: Click the "Apply" button to save changes and click "Ok" to close the pop-up.

Advanced mice such as those used for gaming often have buttons or sliders for adjusting their DPI, so you can change the DPI of those mice without opening the Settings app.

Final Words

In this guide, you learned what DPI is and how to change it on your Windows 10 computer.

Changing the DPI is useful if what you do requires a lot of precision.

If you game on your PC, you probably need a faster DPI to beat intervals. And if you're a designer, you might need the DPI slower for the sake of precision.

I hope this article helps you change your mouse DPI. If you find it useful, please share it with your friends and family.

Thank you for reading.

Computers also have a graphics processing unit (GPU), which renders images and videos. Your computer has a GPU from either Intel, AMD, or NVIDIA.

If your computer doesn’t have a graphics card with a powerful GPU, you might be unable to play the latest games, run infographics, and use video-intensive apps. And certain apps might not render correctly.

In this guide, I will show you 3 ways you can check your GPU in Windows 10, so you can know what you have and whether you need to upgrade it.

How to Check GPU with the DirectX Diagnostic Tool

Step 1: Click on the Start menu, search for “dxdiag”, and open it.

Step 2: You might be prompted to select “Yes”. Make sure you select “Yes” to proceed.

Step 3: Click on the Display tab and you will see your GPU vendor, model, and other info:

How to Check the GPU Through Device Manager

Step 1: To check the GPU of your Windows 10 computer under Device Manager, click on start or the search icon and search “device manager”. Then click on Device Manager or press Enter.

Step 2: Expand the Display adapters branch to view the model and vendor of your computer’s GPU:

How to Check the GPU Through Settings

Step 1: To check your computer’s GPU in Settings, click on Start and click on the gear icon to open settings.

Step 2: Select “System” from the list you see:

Step 3: Make sure “Display” is selected. Though its always the first in the list.

Step 4: Under “Multiple displays”, click on “Advanced display settings”:

Step 5: You should see the GPU info of the default display right away, including the model and vendor (Intel, AMD, NVIDIA).

If you have multiple displays installed, select the one for which you want to view the GPU info.

Conclusion

In this guide, you learned about 3 different ways you can check the graphics processing unit of your Windows 10 computer. This will help you learn more about your device and also know what next to do if the GPU is not powerful enough for your needs.

Thank you for reading. If you find this article helpful, please share it with your friends and family.

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?

Like a professional chess player, this algorithm sees a few steps ahead and puts itself in the shoes of its opponent. It keeps playing ahead until it reaches a terminal arrangement of the board (terminal state) resulting in a tie, a win, or a loss. Once in a terminal state, the AI will assign an arbitrary positive score (+10) for a win, a negative score (-10) for a loss, or a neutral score (0) for a tie.

At the same time, the algorithm evaluates the moves that lead to a terminal state based on the players’ turn. It will choose the move with maximum score when it is the AI’s turn and choose the move with the minimum score when it is the human player’s turn. Using this strategy, Minimax avoids losing to the human player.

Try it for yourself in the following game preferably using a Chrome browser.

A Minimax algorithm can be best defined as a recursive function that does the following things:

1. return a value if a terminal state is found (+10, 0, -10)
2. go through available spots on the board
3. call the minimax function on each available spot (recursion)
4. evaluate returning values from function calls
5. and return the best value

If you are new to the concept of recursion, I recommend watching this video from Harvard’s CS50.

To completely grasp the Minimax’s thought process, let’s implement it in code and see it in action in the following two sections.

Minimax in Code

For this tutorial you will be working on a near end state of the game which is shown in figure 2 below. Since minimax evaluates every state of the game (hundreds of thousands), a near end state allows you to follow up with minimax’s recursive calls easier (9).

For the following figure, assume the AI is X and the human player is O.

figure 2 sample of game state

To work with the Ti Tac Toe board more easily, you should define it as an array with 9 items. Each item will have its index as a value. This will come in handy later on. Because the above board is already populated with some X and Y moves, let us define the board with the X and Y moves already in it (origBoard).

var origBoard = ["O",1,"X","X",4,"X",6,"O","O"];

Then declare aiPlayer and huPlayer variables and set them to “X” and “O” respectively.

Additionally, you need a function that looks for winning combinations and returns true if it finds one, and a function that lists the indexes of available spots in the board.

/* the original board
 O |   | X
 ---------
 X |   | X
 ---------
   | O | O
 */
var origBoard = [“O”,1 ,”X”,”X”,4 ,”X”, 6 ,”O”,”O”];

// human
var huPlayer = “O”;

// ai
var aiPlayer = “X”;

// returns list of the indexes of empty spots on the board
function emptyIndexies(board){
  return  board.filter(s => s != "O" && s != "X");
}

// winning combinations using the board indexies
function winning(board, player){
 if (
 (board[0] == player && board[1] == player && board[2] == player) ||
 (board[3] == player && board[4] == player && board[5] == player) ||
 (board[6] == player && board[7] == player && board[8] == player) ||
 (board[0] == player && board[3] == player && board[6] == player) ||
 (board[1] == player && board[4] == player && board[7] == player) ||
 (board[2] == player && board[5] == player && board[8] == player) ||
 (board[0] == player && board[4] == player && board[8] == player) ||
 (board[2] == player && board[4] == player && board[6] == player)
 ) {
 return true;
 } else {
 return false;
 }
}

Now let’s dive into the good parts by defining the Minimax function with two arguments newBoard and player. Then, you need to find the indexes of the available spots in the board and set them to a variable called availSpots.

// the main minimax function
function minimax(newBoard, player){

    //available spots
    var availSpots = emptyIndexies(newBoard);

Also, you need to check for terminal states and return a value accordingly. If O wins you should return -10, if X wins you should return +10. In addition, if the length of the availableSpots array is zero, that means there is no more room to play, the game has resulted in a tie, and you should return zero.

  // checks for the terminal states such as win, lose, and tie 
  //and returning a value accordingly
  if (winning(newBoard, huPlayer)){
     return {score:-10};
  }
    else if (winning(newBoard, aiPlayer)){
    return {score:10};
    }
  else if (availSpots.length === 0){
      return {score:0};
  }

Next, you need to collect the scores from each of the empty spots to evaluate later. Therefore, make an array called moves and loop through empty spots while collecting each move’s index and score in an object called move.

Then, set the index number of the empty spot that was stored as a number in the origBoard to the index property of the move object. Later, set the empty spot on the newboard to the current player and call the minimax function with other player and the newly changed newboard. Next, you should store the object resulted from the minimax function call that includes a score property to the score property of the move object.

If the minimax function does not find a terminal state, it keeps recursively going level by level deeper into the game. This recursion happens until it reaches a terminal state and returns a score one level up.

Finally, Minimax resets newBoard to what it was before and pushes the move object to the moves array.

// an array to collect all the objects
  var moves = [];

  // loop through available spots
  for (var i = 0; i < availSpots.length; i++){
    //create an object for each and store the index of that spot 
    var move = {};
      move.index = newBoard[availSpots[i]];

    // set the empty spot to the current player
    newBoard[availSpots[i]] = player;

    /*collect the score resulted from calling minimax 
      on the opponent of the current player*/
    if (player == aiPlayer){
      var result = minimax(newBoard, huPlayer);
      move.score = result.score;
    }
    else{
      var result = minimax(newBoard, aiPlayer);
      move.score = result.score;
    }

    // reset the spot to empty
    newBoard[availSpots[i]] = move.index;

    // push the object to the array
    moves.push(move);
  }

Then, the minimax algorithm needs to evaluate the best move in the moves array. It should choose the move with the highest score when AI is playing and the move with the lowest score when the human is playing. Therefore, If the player is aiPlayer, it sets a variable called bestScore to a very low number and loops through the moves array, if a move has a higher score than bestScore, the algorithm stores that move. In case there are moves with similar score, only the first one will be stored.

The same evaluation process happens when player is huPlayer, but this time bestScore would be set to a high number and Minimax looks for a move with the lowest score to store.

At the end, Minimax returns the object stored in bestMove.

// if it is the computer's turn loop over the moves and choose the move with the highest score
  var bestMove;
  if(player === aiPlayer){
    var bestScore = -10000;
    for(var i = 0; i < moves.length; i++){
      if(moves[i].score > bestScore){
        bestScore = moves[i].score;
        bestMove = i;
      }
    }
  }else{

// else loop over the moves and choose the move with the lowest score
    var bestScore = 10000;
    for(var i = 0; i < moves.length; i++){
      if(moves[i].score < bestScore){
        bestScore = moves[i].score;
        bestMove = i;
      }
    }
  }

// return the chosen move (object) from the moves array
  return moves[bestMove];
}

That is it for the minimax function. :) you can find the above algorithm on github and codepen. Play around with different boards and check the results in the console.

In the next section, let’s go over the code line by line to better understand how the minimax function behaves given the board shown in figure 2.

Minimax in action

Using the following figure, let’s follow the algorithm’s function calls (FC) one by one.

Note: In figure 3, large numbers represent each function call and levels refer to how many steps ahead of the game the algorithm is playing.

Figure 3 Minimax function call by function call

1.origBoard and aiPlayer is fed to the algorithm. The algorithm makes a list of the three empty spots it finds, checks for terminal states, and loops through every empty spot starting from the first one. Then, it changes the newBoard by placing the aiPlayer in the first empty spot. After that, it calls itself with newBoard and the huPlayer and waits for the FC to return a value.

2. While the first FC is still running, the second one starts by making a list of the two empty spots it finds, checks for terminal states, and loops through the empty spot starting from the first one. Then, it changes the newBoard by placing the huPlayer in the first empty spot. After that it calls itself with newBoard and the aiPlayer and waits for the FC to return a value.

3. Finally the algorithm makes a list of the empty spots, and finds a win for the human player after checking for terminal states. Therefore, it returns an object with a score property and value of -10.

Since the second FC listed two empty spots, Minimax changes the newBoard by placing huPlayer in the second empty spot. Then, it calls itself with the new board and the aiPlayer.

4. The algorithm makes a list of the empty spots, and finds a win for the human player after checking for terminal states. Therefore, it returns an object with a score property and value of -10.

On the second FC, the algorithm collects the values coming from lower levels (3rd and 4th FC). Since huPlayer’s turn resulted in the two values, the algorithm chooses the lowest of the two values. Because both of the values are similar, it chooses the first one and returns it up to the first FC.

At this point the first FC has evaluated the score of moving aiPlayer in the first empty spot. Next, it changes the newBoard by placing aiPlayer in the second empty spot. Then, it calls itself with the newBoard and the huPlayer.

5. On the fifth FC, The algorithm makes a list of the empty spots, and finds a win for the human player after checking for terminal states. Therefore, it returns an object with a score property and value of +10.

After that, the first FC moves on by changing the newBoard and placing aiPlayer in the third empty spot. Then, it calls itself with the new board and the huPlayer.

6. The 6th FC starts by making a list of two empty spots it finds, checks for terminal states, and loops through the two empty spots starting from the first one. Then, it changes the newBoard by placing the huPlayer in the first empty spot. After that, it calls itself with newBoard and the aiPlayer and waits for the FC to return a score.

7. Now the algorithm is two level deep into the recursion. It makes a list of the one empty spot it finds, checks for terminal states, and changes the newBoard by placing the aiPlayer in the empty spot. After that, it calls itself with newBoard and the huPlayer and waits for the FC to return a score so it can evaluate it.

8. On the 8th FC, the algorithm makes an empty list of empty spots, and finds a win for the aiPlayer after checking for terminal states. Therefore, it returns an object with score property and value of +10 one level up (7th FC).

The 7th FC only received one positive value from lower levels (8th FC). Because aiPlayer’s turn resulted in that value, the algorithm needs to return the highest value it has received from lower levels. Therefore, it returns its only positive value (+10) one level up (6th FC).

Since the 6th FC listed two empty spots, Minimax changes newBoard by placing huPlayer in the second empty spot. Then, calls itself with the new board and the aiPlayer.

9. Next, the algorithm makes a list of the empty spots, and finds a win for the aiPlayer after checking for terminal states. Therefore, it returns an object with score properties and value of +10.

At this point, the 6 FC has to choose between the score (+10)that was sent up from the 7th FC (returned originally from from the 8 FC) and the score (-10) returned from the 9th FC. Since huPlayer’s turn resulted in those two returned values, the algorithm finds the minimum score (-10) and returns it upwards as an object containing score and index properties.

Finally, all three branches of the first FC have been evaluated ( -10, +10, -10). But because aiPlayer’s turn resulted in those values, the algorithm returns an object containing the highest score (+10) and its index (4).

In the above scenario, Minimax concludes that moving the X to the middle of the board results in the best outcome. :)

The End!

By now you should be able to understand the logic behind the Minimax algorithm. Using this logic try to implement a Minimax algorithm yourself or find the above sample on github or codepen and optimize it.

Thanks for reading! If you liked this story, don't forget to share it on social media.

Special thanks to Tuba Yilmaz, Rick McGavin, and Javid Askerov for reviewing this article.

Forge is a modding API. Minecraft Forge (or Forge for short) is a layer between our code and Minecraft itself.

We cannot directly ask Minecraft to add items and do special cool things. That’s why we need an API (application programming interface) to handle our logic and make Minecraft recognise it.

Sounds cool! How do I get started?

• You’ll need the JDK (Java development kit) which is a set of libraries, tools and the runtime environment to make Java programs and run them.
• A Minecraft account which can be bought from their official website. (https://minecraft.net/en-us/store/)
• An IDE (Eclipse or IntelliJ are recommended for Minecraft development)

After installing/acquiring these pieces of software, download your desired Forge version at https://files.minecraftforge.net/.

Tip: Hover over the information button and press direct download to avoid an Adfly virus!

Once you have downloaded this ZIP you’ll be able to unzip it. Do so and cd (cmd/command) into the directory with all of the Forge files. Run gradlew setupDecompWorkspace.

Next up is picking your IDE (integrated development environment).

• Eclipse? gradlew eclipse.
• IntelliJ? Import the build.gradle file in your IntelliJ setup.

Okay now what? How do I add fancy new items? (Basic mod setup)

Hold your horses. There’s much more to it. You’ll have to texture an item of course, add code and so much more! In this article we’ll only look at some simple sample code which I also use for my own mods. Here it is!

`@Mod.EventBusSubscriber @Mod(modid = Version.MOD_ID, name = Version.MOD_NAME, version = Version.VERSION) public class TheMod {

public static ModMetadata metadata;

public static File baseDir;
public static Configuration config;

@SidedProxy(clientSide="com.ciphry.client.ClientProxy", serverSide="com.ciphry.common.CommonProxy")
public static CommonProxy proxy;

@Mod.EventHandler
public void preInit(FMLPreInitializationEvent event) {
    proxy.preInit(event);

    baseDir = new File(event.getModConfigurationDirectory(), MOD_ID);
    config = new Configuration(event.getSuggestedConfigurationFile());

    if (!baseDir.exists())
        baseDir.mkdir();
}

@Mod.EventHandler
public void init(FMLInitializationEvent event) {
    proxy.init(event);

}

@Mod.EventHandler
public void postInit(FMLPostInitializationEvent event) {
    proxy.postInit(event);
}

Use this code as you please. Just make sure you edit, for instance, the proxy strings and more. This should give you a basic overview of what a basic mod class looks like.

Dino says no internet today

Many people probably just thought the dinosaur was a cute little icon to keep them company while their connection was down. But then someone pressed the space bar. And the dino started running.

This little Easter egg has become a beloved game. But what if you just want to play it (careful, it's addictive) when you're online and need a break? In this article, you'll learn how to play the game when you're both off and online.

How to play the Chrome dino or Trex game offline

If your internet is down, just open Chrome. Or if you're already in Chrome, try to visit any web page. You'll see that little dinosaur next to its error message.

Simply press the space bar (or up arrow) and the dino will start running. Press the up arrow to jump over the obstacles (like cacti) in your path. The longer you hold the up arrow, the higher dino will jump.

If you need to duck under something, press the down arrow.

The longer you play, the faster dino runs/the ground moves. Once you crash into something, the game is over and you have to restart (your score resets, too). You can play again by hitting the space bar.

How to play the Chrome dino or Trex game online

Great, you have some entertainment while waiting for your internet to come back up. But what if you want to play it while online? There are a few ways to do so.

Visit the dino URL

The simplest way to play the game online is by visiting this URL: chrome://dino/. Just access that link and voilà, there's your little dino and "no internet" message.

Once you see that message, just hit the spacebar and start jumping over cacti.

There is also an unofficial Chrome Dino website where you can play a replica of the game with different sound and graphics themes, such as this Super Mario Bros. theme:

Or this Batman theme with 1960s Batman sound effects:

Bonus: Another way to find the game

Maybe you didn't get the dino error message when your internet was down. Or maybe you don't want to purposely turn off your wifi to play the game.

So, if you have internet but want to disable your connection in Chrome dev tools, hit F12 to open up dev tools.

Click the "Network" tab at the top towards the right, and then look for the Online/Offline tab, second row down:

Look for the little dropdown arrow next to where it says "online".

Look for the little dropdown arrow, click it, and select "Offline" (instead of "Online", where it should be set if you currently have a connection).

Toggle to "Offline"

Once you've done that, if you try to visit a web page, you'll get the dinosaur! You can exit dev tools and hit the space bar, as usual, to get dino running.

Play away!

Now you know how to find the dino/Trex game without AND with internet connectivity. Have fun!

In this article, I'll discuss how we reached young audiences by combining robotics with e-sports.

What on Earth?

Ever heard of anything like it before? Me neither. The robot was created as part of Futurice’s project with Yle, the national broadcast company of Finland.

Yle produces content for TV, radio, and the web. It has a broad reach of older audiences, but has had trouble reaching younger ones. The goal of this project was to use new technology to reach young audiences — specifically teenagers.

Yle’s content has traditionally been non-participatory: the performers perform, and the audience watches. However, younger audiences generally view content that is more participatory, such as YouTube videos or streams.

We wanted to create participatory content — the performer should interact with their audience. Yle’s journalists specialized in teenage audiences pointed out that gaming and e-sports are popular content. We realized that gaming was the perfect context for this: the audience could play together with the performer. We wanted to explore what an entertainer, or even influencer of the future could look like. So why not create a streaming robot gamer?

Yle’s journalists and Futurice’s roboticists coming up with the idea of a robot gamer

First drafts

What Was This Robot Like?

We chose two games for the robot to play: Flappy Bird and Minecraft.

Flappy Bird was a cult game that had a brief period of extreme popularity in 2014. We chose Flappy Bird because the mechanisms of the game are simple, and allowed for the game to be played with machine learning. We wanted to try a neuroevolution algorithm, which evolved new birds into the game based on which birds did best in the previous generation. This way we could see how the audience reacted when a computer was playing the game.

We chose Minecraft for its communal features, which allow interaction between players. Players can co-operate or fight each other, trade with each other, and chat with each other. They can “grief” each other — i.e. be a nuisance. Players can also mine materials, and turn them into items, or even build cities. They can store precious things, farm the land, herd animals, and fight monsters.

Minecraft also has a material called redstone, which players can use to build logic. Effectively, players can build an entire computer inside of Minecraft. Poetic, eh?

For playing Minecraft, we decided that a human should control the robot. The game is complicated, and having authentic interactions with other players would require a human on the other end.

Flappy Bird and the robot

Our team of Yle’s journalists and Futurice roboticists defined some clear advantages for using a robot in this context:

• A robot is tireless — it can play forever, and provide content 24/7. It’s an ideal streamer.
• A robot can be gender neutral. Gamers and gaming audiences are typically male, but a gender neutral robot could potentially attract more diverse audiences.
• A robot can reflect gamers’ behaviour, stirring emotions. Gaming culture is often aggressive. The robot could be aggressive in turn, making gamers reflect on their own behaviour.
• A robot can interact within the game and chat simultaneously. Humans are limited to one output, a robot can have several.

Testing our streaming equipment and having problems with interference from the robot’s face screen.

We decided on a six hour gaming session, alternating between Minecraft and Flappy Bird. To nail down the user experience for the session, we defined guidelines for our design of the robot:

• Experimental user experience — the user should be able to explore within the interaction with the robot.
• Streamers are usually strong characters. The robot is a character with a strong personality.
• The robot can cause “WTF?” reactions in players. We wanted the experience to be memorable, rather than bland.
• The culture and space of online gaming is unique, and should be designed for.

Based on these guidelines, we created the character IQ_201. IQ_201 is based on aggressive online gamers that are convinced of their own superior intelligence (see this meme about having an IQ over 200). The robot would be rude and reactive, meant to get a reaction out of adolescents interacting with it.

Before implementation, the team also wanted to take into account some ethical considerations:

• Transparency about how the robot is operated is needed. If this robot was going to be put into production, users should be able to find information on how it works.
• The robot should treat all the players the same. This was also part of the decision to make the robot appear gender neutral. And due to the sometimes angry, hateful, even racist or sexist culture of gaming, we needed to design the robot’s personality carefully. It could be out-there, even rude, but never hateful. We didn’t want any heated gaming moments.
• The robot should be rude, but not too over-the-top.
• The chat needed to be moderated. As stated, gaming culture can be toxic. We wanted to keep a careful eye on both the Minecraft and Twitch chats, to ensure no shenanigans would go on.

To fulfill all these requirements, we selected the Furhat robot. The Furhat robot had a relatively easy-to-use teleoperation interface, which allowed for the user to input text to be turned into the robot’s speech, as well as perform gestures at the click of a button.

Flowers and Violence

We had a 6 hour stream, starting at 2pm and ending at 8pm. We alternated between games: 2-3pm was Flappy Bird, 3-5pm Minecraft, 5-6pm Flappy Bird, then 6-8pm Minecraft again. This schedule allowed the robot operators playing Minecraft to have a much-needed break in the middle.

Our robot

In the beginning, a few people joined. Gradually, we gained more and more people. We reached our peak at 4:20 — 49 simultaneous viewers on Twitch. Overall, we had 431 unique viewers. In Minecraft, there were around 30 active players. Considering how minimal our advertising was (one forum post and a few tweets), we were pleasantly surprised by the turnout.

The Minecraft sessions were directed by two robot operators (myself and another Minja). The other Minja played Minecraft, and I operated the robot’s voice and gestures. A third person was answering messages on chat.

Minecraft was overwhelming. The robot’s provocative character provoked teenagers into repeatedly killing it. After fleeing to the mountains to be with the llamas a couple of times and being killed yet again, we modified the robot’s behaviour to be more friendly. We wanted to create more constructive interactions.

Two Minjas as robot operators

Toward the end of the second Minecraft stream, teenagers were cooperating with the robot. They protected it from the few aggressive players that were left, and gave it gifts such as flowers. Some even complimented the robot directly, to make it happy. The players started following the robot, agreeing to cooperate when it initiated building a lighthouse. They also built a house, and captured and named a llama: IQ_201 Junior.

There were two clear factions in the game: some were intent to kill the robot throughout the entire game, and some protected it throughout. Some became more comfortable with the robot as the stream went on, switching sides. Either way, the robot aroused strong emotions. Teenagers sought out genuine interaction with it. No-one ignored the robot, or was bored.

Discussions about how the robot worked were had throughout the stream. No-one asked the robot itself though, maybe out of respect or fear of annoying it. Discussions focused on whether the robot was “real”, i.e. whether it was truly automatic, or a human was operating it. Was it typing with actual physical hands? Or had it “hacked into” the game and was playing via code?

“I Will Miss You Robot!”

16 people responded to our survey afterward. 80% of players were under 18, most were 13 to 15-year-olds. 80% of players interacted with the robot. This was extremely positive, we succeeded in making a robot that was compelling to users. 75% of players rated the robot as 3 or above, out of 5.

Viewers over time

We collected comments from the players from the survey, as well as the Minecraft game chat. They are translated from Finnish, and reflect some of the thoughts our players had on the robot.

The critical first:

“It was pretty fun and cool. But it somehow felt like a set-up.” [Referring to the robot possibly having a human operator]

A lot of players were wondering how the robot actually worked. This comment brings us back to the ethical consideration we talked about earlier: transparency about how the robot was operated.

Though we intended to be transparent at first, we decided to not inform users of the robot’s teleoperated nature for this first pilot. We made this choice because we wanted to keep the “suspension of disbelief” of the user active, meaning that we wanted the participants to play along with the fact they were talking to a “real robot” (an autonomous robot) (Duffy & Zawieska, 2012).

The negative response we received regarding the unclarity on the robot’s functioning made it clear to us that if this pilot were extended, it is highly important to be more transparent. It is possible to hold suspension of disbelief and be honest of the robot’s operation simultaneously (we do all know that television shows are not reality, after all).

“The robot was a bit simple in certain things, and sometimes talked meanly to people, and was condescending. This was a bit anxiety inducing… Was this intentional?”

Some players felt that the robot’s rude behaviour crossed the boundary into condescending. They wished that the robot would be more considerate in the future. This indicates that even a robot can hurt feelings. In future versions, making IQ_201 more empathic, and less focused on the superiority of robots over humans, could have positive results.

“The robot looked a bit blue in the face, and its voice was a bit weird.”

Two teenagers did not enjoy the robot’s appearance and voice. One remarked especially about its blue face, asking why we did not make it “normal colored”.

This may have been due to the robot falling into the “uncanny valley” for these players. Uncanny valley is a theory developed by robotics researcher Masahiro Mori (Mori et al., 2012). His theory posits that as the appearance of a robot approaches human-likeness, there is a dip when the appearance gets very close. Zombies and corpses fall into this valley.

To get rid of this effect with our robot, it could be wise to alter the robot’s appearance and voice in future solutions.

The Uncanny Valley by Masahiro Mori. Wikimedia commons.

And then the positive:

“It was really interesting gaming with the robot. :) Hopefully in the future we can have this type of event again. :)”

The majority of the teenagers enjoyed playing with the robot, and watching the stream. Their feedback complimented the robot’s sense of humour, and its playing skills. A continuation of the pilot would surely find an interested audience.

[to the robot] “Some people have trouble with new things. In this case, these players are having trouble with a robot, since you’re new.”

This player consoled the robot in-game, as other players were giving it a hard time by continuously killing it. This comment was moving: the player felt bad for the robot, and thought the robot might feel bad as well, attempting to change that. This is a clear empathic response toward the robot.

[to the robot] “I will miss you robot!”

A few players gave the robot heartfelt goodbyes when it left Minecraft. These players found the robot approachable, and even formed an emotional bond with it. This means we succeeded in creating a compelling character, even during what was only a 6 hour stream.

For future builds of the robot, the players should be informed how the robot operates. This could help them calibrate an appropriate level of emotional bond to the robot.

Are Robotic Influencers Our Future?

Players took an active interest in the robot. They approached it, interacted with it, and formed opinions on it. The robot also provoked emotional reactions — both positive and negative. Some participants really loved the robot and wished for more interaction in the future, and some were heavily critical.

This indicates that robot influencers have the capacity to affect our emotions — whether this capacity will ever reach the level of human entertainers, I do not know. Whether that is desirable, I also do not know.

What positively surprised me was that the young user base of the robot were media literate: they critically examined the robot’s mode of operation. The players had a good idea of what is possible with AI today, and what is not. They were not easily duped.

This makes me hopeful for our future, whether it contains robotic entertainers or not. When viewers remain critical, they can understand that robots are machines with no actual emotional capacity, even if viewers do choose to suspend disbelief.

Interacting with the robot can be though of as a form of parasocial interaction for the viewer — where the viewer may feel that their relationship with the robot is close — even though it is not truly reciprocal. This in itself is not necessarily harmful, as long as we are honest about what the relationship truly is. We should understand that robots are putting on a performance to elicit emotions in us — like human entertainers do

A video about the project.

First published on Towards Data Science.

Duffy, B. R., & Zawieska, K. (2012, September). Suspension of disbelief in social robotics. In 2012 IEEE RO-MAN: The 21st IEEE International Symposium on Robot and Human Interactive Communication (pp. 484–489). IEEE.

Mori, M., MacDorman, K. F., & Kageki, N. (2012). The uncanny valley: The original essay by Masahiro Mori. IEEE Spectrum, 98–100.

Generation after generation, humans have adapted to become more fit with our surroundings. We started off as primates living in a world of eat or be eaten. Eventually we evolved into who we are today, reflecting modern society. Through the process of evolution we become smarter. We are able to work better with our environment and accomplish what we need to.

The concept of learning through evolution can also be applied to Artificial Intelligence. We can train AIs to perform certain tasks using NEAT, Neuroevolution of Augmented Topologies. Simply put, NEAT is an algorithm which takes a batch of AIs (genomes) attempting to accomplish a given task. The top performing AIs “breed” to create the next generation. This process continues until we have a generation which is capable of completing what it needs to.

Clip of AI playing STH

NEAT is amazing because it eliminates the need for pre-existing data required to train our AIs. Using the power of NEAT and OpenAI’s Gym Retro I trained an AI to play Sonic the Hedgehog for the SEGA Genesis. Let’s learn how!

A NEAT Neural Network (Python Implementation)

GitHub Repository

Vedant-Gupta523/sonicNEAT
_Contribute to Vedant-Gupta523/sonicNEAT development by creating an account on GitHub._github.com

Note: All of the code in this article and the repo above is a slightly modified version of Lucas Thompson's Sonic AI Bot Using Open-AI and NEAT YouTube tutorials and code.

Understanding OpenAI Gym

If you are not already familiar with OpenAI Gym, look through the terminology below. They will be used frequently throughout the article.

agent — The AI player. In this case it will be Sonic.

environment — The complete surroundings of the agent. The game environment.

action — Something the agent has the option of doing (i.e. move left, move right, jump, do nothing).

step — Performing 1 action.

state — A frame of the environment. The current situation the AI is in.

observation — What the AI observes from the environment.

fitness — How well our AI is performing.

done — When the AI has completed its task or can’t continue any further.

Installing Dependencies

Below are GitHub links for OpenAI and NEAT with installation instructions.

OpenAI: https://github.com/openai/retro

NEAT:https://github.com/CodeReclaimers/neat-python

Pip install libraries such as cv2, numpy, pickle etc.

Import libraries and set environment

To start, we need to import all of the modules we will use:

import retro
import numpy as np
import cv2
import neat
import pickle

We will also define our environment, consisting of the game and the state:

env = retro.make(game = "SonicTheHedgehog-Genesis", state = "GreenHillZone.Act1")

In order to train an AI to play Sonic the Hedgehog, you will need the game’s ROM (game file). The simplest way to get it is by purchasing the game off of Steam for $5. You could also find free find downloads of the ROM online, however it is illegal, so don’t do this.

In the OpenAI repository at retro/retro/data/stable/ you will find a folder for Sonic the Hedgehog Genesis. Place the game’s ROM here and make sure it is called rom.md. This folder also contains .state files. You can choose one and set the state parameter equal to it. I chose GreenHillZone Act 1 since it is the very first level of the game.

Understanding data.json and scenario.json

In the Sonic the Hedgehog folder you will have these two files:

data.json

{
  "info": {
    "act": {
      "address": 16776721,
      "type": "|u1"
    },
    "level_end_bonus": {
      "address": 16775126,
      "type": "|u1"
    },
    "lives": {
      "address": 16776722,
      "type": "|u1"
    },
    "rings": {
      "address": 16776736,
      "type": ">u2"
    },
    "score": {
      "address": 16776742,
      "type": ">u4"
    },
    "screen_x": {
      "address": 16774912,
      "type": ">u2"
    },
    "screen_x_end": {
      "address": 16774954,
      "type": ">u2"
    },
    "screen_y": {
      "address": 16774916,
      "type": ">u2"
    },
    "x": {
      "address": 16764936,
      "type": ">i2"
    },
    "y": {
      "address": 16764940,
      "type": ">u2"
    },
    "zone": {
      "address": 16776720,
      "type": "|u1"
    }
  }
}

scenario.json

{
  "done": {
    "variables": {
      "lives": {
        "op": "zero"
      }
    }
  },
  "reward": {
    "variables": {
      "x": {
        "reward": 10.0
      }
    }
  }
}

Both these files contain important information pertaining to the game and its training.

As it sounds, the data.json file contains information/data on different game specific variables (i.e. Sonic’s x-position, number of lives he has, etc.).

The scenario.json file allows us to perform actions in sync with the values of the data variables. For example we can reward Sonic 10.0 every time his x-position increases. We could also set our done condition to true when Sonic’s lives hit 0.

Understanding NEAT feedforward configuration

The config-feedforward file can be found in my GitHub repository linked above. It acts like a settings menu to set up our training. To point out a few simple settings:

fitness_threshold     = 10000 # How fit we want Sonic to become
pop_size              = 20 # How many Sonics per generation
num_inputs            = 1120 # Number of inputs into our model
num_outputs           = 12 # 12 buttons on Genesis controller

There are tons of settings you can experiment with to see how it effects your AI’s training! To learn more about NEAT and the different settings in the feedfoward configuration, I would highly recommend reading the documentation here

Putting it all together: Creating the Training File

Setting up configuration

Our feedforward configuration is defined and stored in the variable config.

config = neat.Config(neat.DefaultGenome, neat.DefaultReproduction, neat.DefaultSpeciesSet, neat.DefaultStagnation, 'config-feedforward')

Creating a function to evaluate each genome

We start by creating the function, eval_genomes, which will evaluate our genomes (a genome could be compared to 1 Sonic in a population of Sonics). For each genome we reset the environment and take a random action

for genome_id, genome in genomes:
        ob = env.reset()
        ac = env.action_space.sample()

We will also record the game environment’s length and width and color. We divide the length and width by 8.

inx, iny, inc = env.observation_space.shape
inx = int(inx/8)
iny = int(iny/8)

We create a recurrent neural network (RNN) using the NEAT library and input the genome and our chosen configuration.

net = neat.nn.recurrent.RecurrentNetwork.create(genome, config)

Finally, we define a few variables: current_max_fitness (the highest fitness in the current population), fitness_current (the current fitness of the genome), frame (the frame count), counter (to count the number of steps our agent takes), xpos (the x-position of Sonic), and done (whether or not we have reached our fitness goal).

current_max_fitness = 0
fitness_current = 0
frame = 0
counter = 0
xpos = 0
done = False

While we have not reached our done requirement, we need to run the environment, increment our frame counter, and shape our observation to mimic that of the game (still for each genome).

env.render()
frame += 1
ob = cv2.resize(ob, (inx, iny))
ob = cv2.cvtColor(ob, cv2.COLOR_BGR2GRAY)
ob = np.reshape(ob, (inx,iny))

We will take our observation and put it in a one-dimensional array, so that our RNN can understand it. We receive our output by feeding this array to our RNN.

imgarray = []
imgarray = np.ndarray.flatten(ob)
nnOutput = net.activate(imgarray)

Using the output from the RNN our AI takes a step. From this step we can extract fresh information: a new observation, a reward, whether or not we have reached our done requirement, and information on variables in our data.json (info).

ob, rew, done, info = env.step(nnOutput)

At this point we need to evaluate our genome’s fitness and whether or not it has met the done requirement.

We look at our “x” variable from data.json and check if it has surpassed the length of the level. If it has, we will increase our fitness by our fitness threshold signifying we are done.

xpos = info['x']

if xpos >= 10000:
        fitness_current += 10000
        done = True

Otherwise, we will increase our current fitness by the reward we earned from performing the step. We also check if we have a new highest fitness and adjust the value of our current_max_fitness accordingly.

fitness_current += rew

if fitness_current > current_max_fitness:
        current_max_fitness = fitness_current
        counter = 0
else:
        counter += 1

Lastly, we check if we are done or if our genome has taken 250 steps. If so, we print information on the genome which was simulated. Otherwise we keep looping until one of the two requirements has been satisfied.

if done or counter == 250:
        done = True
        print(genome_id, fitness_current)

genome.fitness = fitness_current

Defining the population, printing training stats, and more

The absolute last thing we need to do is define our population, print out statistics from our training, save checkpoints (in case you want to pause and resume training), and pickle our winning genome.

p = neat.Population(config)

p.add_reporter(neat.StdOutReporter(True))
stats = neat.StatisticsReporter()
p.add_reporter(stats)
p.add_reporter(neat.Checkpointer(1))

winner = p.run(eval_genomes)

with open('winner.pkl', 'wb') as output:
    pickle.dump(winner, output, 1)

All that’s left is the matter of running the program and watching Sonic slowly learn how to beat the level!

Earlier generation vs Later generation

To see all of the code put together check out the Training.py file in my GitHub repository.

Bonus: Parallel Training

If you have a multi-core CPU you can run multiple training simulations at once, exponentially increasing the rate at which you can train your AI! Although I will not go through the specifics on how to do this in this article, I highly suggest you check the sonicTraning.py implementation in my GitHub repository.

Conclusion

That’s all there is to it! With a few adjustments, this framework is applicable to any game for the NES, SNES, SEGA Genesis, and more. If you have any questions or you just want to say hello, feel free to email me at vedantgupta523[at]gmail[dot]com ?

Also, be sure to check out Lucas Thompson's Sonic AI Bot Using Open-AI and NEAT YouTube tutorials and code to see what originally inspired this article.

Key Takeaways

1. Neuroevolution of Augmenting Topologies (NEAT) is an algorithm used to train AI to perform certain tasks. It is modeled after genetic evolution.
2. NEAT eliminates the need for pre-existing data when training AI.
3. The process of implementing OpenAI and NEAT using Python to train an AI to play any game.

Unity is a great tool for prototyping everything from games, to interactive visualisations. In this article, we run through all you need to know to get started using Unity.

First, a little bit about me: I’m a hobbyist unity developer, 3d modeler and graphic designer who’s worked with Unity and Blender for over 5 years. I’m now a Financial Maths student at University College Dublin, and occasionally I do freelance graphic design, web prototyping, and game prototyping.

_Concept art is one of the earliest phases in the game dev process, over the last 5 years i’ve got a lot of exposure to all areas of game design. Check out my [Portfolio ](http://hugodolan.com/portfolio" rel="noopener" target="blank" title=")of Graphic, UX, Concept Art, Game Dev etc…

Introduction

This article is aimed at anyone who has never used Unity before, but has some previous experience programming or in web design / development. By the end of this article, you should have a good general overview of the engine as well as all the necessary functions and code to start making a basic game.

Why Unity?

If you want to make games

There’s really very few options when it comes to Indie Game development. The three main choices if you want to build games are Unreal, Unity or GameMaker.

Unity is probably the least opinionated of the 3 platforms. It gives you a very raw product out of the box, but is highly flexible, well-documented, and highly extensible to build pretty much any genre of game you can think of.

There are plenty of highly successful games such as Escape from Tarkov (FPS), Monument Valley (Puzzler), and This War of Mine (Strategy / Survival) all built in Unity.

In reality the engine you build your first game on is probably not critical, so my advice is just to pick one and go with it.

If you want to prototype user experiences

Since unity is just an engine with a bunch of physics, animation, and real time 3d rendering, it’s also a great space to make fully fledged interactive prototypes for UX studies.

Unity has full support for VR and AR and hence could be a great tool for exploring architecture, automations and simulations with clients.

Sections to this article

• Why Unity?
• Unity Editor Window
• Unity Game Objects
• Unity Builtin Components
• Creating Custom Components
• Structure of a MonoBehaviour
• Manipulating GameObjects
• Raycasting
• Collision detection
• Advanced Features
• Advice For Newcomers
• Nice Resources and Communities
• Conclusion

Unity editor window

The editor window is split up into a couple of sections. We will cover this very briefly as we will refer to it constantly throughout the article. If your familiar with this already just skip past!

Scene View: Allows placement and movement of GameObjects in the Scene

Game View: Previews how the player will see the scene from the camera

Inspector: Provide details on the selected GameObject in the scene.

Assets / Project: All prefabs, textures, models, scripts etc are stored here

Hierarchy: Enables nesting and structuring of GameObjects within the scene

Now we’re good to start!

Unity Game Objects

What are GameObjects

GameObjects are the core building block of everything in the Unity games engine. The name almost gives it away:

Anything you place within a scene in Unity must be wrapped in a ‘game object.’

If you’ve got a web design background, you can think of GameObjects as being a lot like

Video games have always played a big role in my life. Final Fantasy II taught me how to read (Super Nintendo Entertainment System, so actually FF4).

Yes, my early vocabulary included “chocobo” and “spoony bard.” I remember when Street Fighter II came out. My brothers and I would spend hours and quarters at the arcades.

I’d spend entire days at the arcade playing Dance Dance Revolution (DDR) with my brother, my cousin, and our other friends. We even had a “DDR crew” and “battled” other local crews.

I recently started playing Overwatch, and it has reconnected me with friends from 5, even 10 years ago. My wife and I strengthen (or test) our relationship by playing Overcooked.

To say that I love video games is an understatement! ?

Video games teach, spark imagination, challenge people, and connect people. Video games bring joy into people’s lives. On the other hand, much of my current profession is filled with suffering - not necessarily my own suffering, but the suffering of others.

I’m currently a resident physician (meaning I’ve finished medical school, but I’m still training under the supervision of other doctors). In my short career, I’ve heard too many parents talk about their child’s bright future before their child ended up in the hospital in critical condition.

I’ve heard too many regrets of patients lying on their deathbed. I’m frequently reminded of how short life is. It’s too short to have a dream and not try to pursue it.

So, I decided to make my dream of being a game developer a reality. In this article, I’ll share what I learned on my journey thus far, and some of the challenges I faced, with hopes of helping others who share this dream.

Overcooked 2 — a game that will reveal the true nature of your relationship(s)

Learning how to code

So how did I get started? When I started residency, I saw an ad for a Udemy course on how to make video games on Unity. Finally having an income, I bought it. I quickly became too busy to get into it. I left it alone like a game I just bought during a Steam sale.

Two years later, my fiancée (now wife) came home from a difficult day at work. She said she was just going to learn how to code and quit her job. Like a good partner, I said, “Oh! Me too!” I opened up that Udemy course and downloaded everything. However, at that time, my wife and I were a 4 hour drive apart. By the time I had installed everything, it was time to leave and drive to her.

I decided to download and listen to some podcasts for the drive. This brings me to the first lesson I learned. Podcasts are super helpful. Listening to podcasts really accelerated my progress. It was on CodeNewbie that I learned about freeCodeCamp. Through freeCodeCamp, I learned about the importance of being part of a community. The Simple Programmer Podcast inspired me to keep going and stay focused.

In terms of game development related podcasts, Designer Notes, The Debug Log, and Game Dev Unchained introduced me to the experiences of other game developers. Their stories encouraged me. I learned the lingo. I learned from the mistakes they had already made. I did all this during those 4 hour drives when I would visit my fiancée. Podcasts transformed what would’ve been idle time into productive time.

The other thing that helped me learn more quickly was that I dove right in. I entered a hackathon (by accident) with just 13 days of coding experience. It was here that I learned about the community and the local meetups.

At the local meetups, I learned about the possibilities of what could be made. It pushed me to make something so I could show them at the local demo day. It made me want to keep creating and sharing.

As I created and shared, I got feedback and advice from those around me. That’s how I got better. That’s how I got the crazy idea that I could make and release a game by myself with such limited experience.

My got second place with my first hackathon team: Developers.Vegas

Challenges of building and releasing a game for the first time.

Actually making my own first game to be released had its challenges of making the art and writing the code. I improved with time, practice, and a lot of Googling.

One technique I found helpful was to write things out in diagrams and in “pseudocode.” The diagrams helped me visualize how everything would connect, and the pseudocode helped me stay on track with what I wanted my code to accomplish. From there, it was a lot of trial and error, and doing the process all over again.

I found it challenging to process and implement people’s feedback. As I began to send my game for people to try, they would make suggestions. One reason this was difficult was because I didn’t know how to do what they were requesting. Another reason was I wanted to actually complete and release my game.

I’ve heard stories of people giving up on their project because they get overwhelmed with too many features. I wanted to stay within my scope and minimal viable product. On the other hand, I wanted to make a product that people actually wanted. I imagine this will continue to be a struggle for me and any game developer/designer.

During this process, I also realized that a lot of the hurdles came from within. When working on my own project, by myself, it’s easy to get lazy and get distracted. It’s easy to just stop working on something and say it’s “good enough”. It’s just as easy as spending way too much time working on something that “isn’t good enough”. What I found helpful was to make deadlines for myself and to write out goals for each block of time I had to work on my game.

The biggest internal challenge, one that I imagine I’ll continue to face, is “impostor syndrome”. At multiple points in this process, I’d ask myself, “Who am I to make and release a game?” When I first uploaded my game to the Google Play Store for internal testing, it was rejected. I wanted to give up right then, despite the fact I had put in the work to complete the project. I didn’t even look at the reason why it was rejected! Thankfully, I snapped out of it and investigated the issue. It turned out to be a simple, fixable mistake. Imagine if I just gave up.

My setup frequently transforms from the top half to the bottom half

Game Release and Beyond

Pressing the button to release my game to the public was scary. What if people hated my game? What if something was completely broken? At least so far, those fears were unwarranted. In fact, I have been very satisfied with the response to my game thus far. By no means is it a super successful game with only about 90 total downloads, and a grand total of $0.00 in revenue ? at the time of this writing. ?

However, at this stage, success is seeing people enjoy my game. It’s seeing someone who was about to leave a party stay another hour because someone beat his high score. It’s seeing people post screenshots of their high scores. It’s having someone beat my high score (although I died a little bit on the inside). It’s seeing that people challenge themselves. It’s seeing that joy when they reach a new level of accomplishment.

So, where do I go from here? I think I want to try incorporating multiplayer, or at least figuring out how to do a ranking system. People seem really into getting a high score. I also need to learn more about the business/marketing aspect of things.

I think I’ll start now. I invite you to try my game “Squircle Circle Tap” for iOS or Android. While you try the game out, I’ll continue building my skills to move toward those games that impacted me so much throughout my life. Thank you for reading, happy coding.

Have you just built your board game for Android? Want to get it online? You are in the right place — let’s build it together!

We are going to implement match-making with the Firebase Realtime Database in this article. For that, you need Firebase setup in your Android project — see how to do that here.

Prerequisites

• Firebase users — here, we are assuming you were able to login your user into Firebase using any method. This is necessary to identify whom to communicate with after the match-making is finished.
• Gradle Dependencies — Add these to the dependencies block in your app module's grade file.

implementation 'com.google.firebase:firebase-core:16.0.6' implementation 'com.google.firebase:firebase-auth:16.1.0' implementation 'com.google.firebase:firebase-database:16.0.6'

• You aren’t done after implementing match-making. That’s because you’ve only found two players that will play — but haven’t implemented how their moves will propagate over the network.

Our model

We will use a node in the Firebase database called the game room which will store all the active challenges that users have pushed. Each user will search for existing challenges within the game room and will accept the first one found. Otherwise, the user will upload their own challenge and wait until someone accepts the challenge.

You will be able to add more features in your match-making implementation like matching based on similar performance ratings, friends, regional-bias, etc.

How the heck are we gonna implement that?

I’ve divided our problem into three objects:

• Matcher: Finds any existing matches in the game room.
• SelfChallengeManager: Manages the challenge a user uploads if Matcher fails to find any one.
• SelfChallengeCanceller: Cancels the match-making process if this user doesn’t wanna play anymore.

In addition, we will require a “Challenge” object that has two properties — communication node reference and the challenger’s user ID (get why we need to login to Firebase now?). This object will be uploaded into the game-room by SelfChallengeManager.

Writing our components first

Before writing our three components, we need to understand what a Firebase transaction is. We don’t want two users accepting the same challenge at the same time — which would corrupt our database and make our precious users angry. Transactions come to the rescue by preventing concurrent operations on a node in the database (which will be the game room).

How does that relate to our components? — Our components will be modeled as transactions as inner classes in our ‘FirebasePlayerMatchMaker’ class.

https://gist.github.com/SukantPal/2c1f5daedfaee784bfeb622d4e26736e

We use two callback interfaces — OnMatchMadeCallback and internally OnFailCallback. The factory method takes a OnMatchMadeCallback which is called whenever a match is made. The OnFailCallback is invoked whenever MatchMaker fails to find a match.

Here, findMatch runs on a separate thread and creates an OnFailCallback if Matcher doesn't find a match. In that case, we have to create a SelfChallengeManager and run it as a transaction.

1. Matcher

Here, the doTransaction() method iterates over all the children of the game room node and searches for a Challenge that is compatible for our user. By default, isChallengeCompat returns true, but you can change that by adding additional constraints like ratings. The first compatible challenge is then stored and the challenge node is deleted (by setting the value to null) in the database. Note that by deleting the node, the other player will be notified of the acceptance.

2. SelfChallengeManager

Here, the doTransaction method adds a child node to the GAME_RECORD node in our database. This is where the game moves will be communicated after the match-making. It then uploads a Challenge to the game room and adds itself as a ValueEventListener. Whenever another user accepts the request, they will delete this node and this user will get notified as we are listening.

3. SelfChallengeCanceller

Our code just deletes the node created in by SelfChallengeManager by iterating over all the game room and finding our challenge. BUT IT’S INCOMPLETE!! You (optionally) should add a feature where the this user automatically resigns from the game if the match was accepted already.

In the OnMatchMadeCallback you provide to FirebasePlayerMatchMaker.newInstance, you must initialize the game communication to be done in the node (by path) mGamePath.

Yo, you’ve done it. Thanks for reading!

Originally published at hashnode.com.

So, my 12-year old decided that she needed a more powerful computer for her favorite video game, Fortnite. And I promised her, years ago, that we’d find a time to custom-build her own computer.

Finally, I’ve been able to make good on my word!

The Purchase List

I wanted my daughter to lead the process end-to-end, so she was responsible for not only finding the right parts but also price-comparing them and making her ultimate “purchase list” so that we could talk through it.

We discussed the pros and cons of larger motherboards to allow for larger expansion opportunities and power consumption requirements for smaller (or more powerful) components, like the CPU or GPU.

Starting to arrive!

A little bit of math was required to ensure that we got the right PSU (Power Supply Unit) to handle her components, but it wasn’t that hard to put the master list together. What was the most fun was talking through each part and the reasons for it and why, as well as trying to maximize expected experience (such as — the end result) and the budget that I had outlined for her.

Core i5~

Our Goal and Budget

What we wanted to do was build an “epic gaming rig” specifically for Fortnite that would be able to handle near-maximum graphic settings @ 60FPS for less than $1,000. We ended up spending a bit more on peripherals like a gaming mouse and keyboard as well as headset and a nice 24" widescreen monitor. But the core computer (mid-tower) we wanted to keep below $1,000 if we could.

Time to build!

Here’s the master list of core components that we purchased…

1. CPU: Intel Core i5–8600K Desktop Processor 6 Cores up to 4.3 GHz unlocked LGA 1151 300 Series 95W
2. CPU Cooler: Cooler Master Hyper 212 Evo (RR-212E-20PK-R2) CPU Cooler with PWM Fan, Four Direct Contact Heat Pipes
3. Graphics: Gigabyte AORUS Radeon RX 580 8GB Graphic Cards GV-RX580AORUS-8GD
4. Motherboard: GIGABYTE B360 HD3 (LGA1151/Intel/B360/ATX/USB 3.1 Gen 2 (USB3.1) Type A/DDR4/Motherboard)
5. RAM: Patriot Viper Elite Series DDR4 16GB (2x8GB) 2666MHz PC4–21300 Dual Memory Kit (Black/Grey)
6. SSD: Kingston A400 SSD 480GB SATA 3 2.5” Solid State Drive SA400S37/480G — Increase Performance
7. Power Supply: EVGA Supernova 650 G3, 80 Plus Gold 650W
8. Case: Phanteks PH-EC416PTG_BW Eclipse P400 Steel ATX Mid Tower Case Black/White,Tempered Glass Edition Cases

Most builds suggest getting a HDD, like a 1TB 7200RPM but we opted to maximize boot and load times with the SSD first. She may end up getting a more typical HDD sooner rather than later as she wants to start capturing her gameplay and even live-streaming as well.

The total cost of these 8 components ended up being $1,001!

Of course, she also needed some sweet peripherals which added to the total cost of ownership:

1. Keyboard: CORSAIR Strafe Mechanical Gaming Keyboard — Red LED Backlit — USB Passthrough — Linear and Quiet — Cherry MX Red Switch
2. Monitor: Acer XF250Q Cbmiiprx 24.5" Full HD (1920 x 1080) Zero Frame TN Gaming Monitor with AMD FREESYNC Technology — 1ms | 240Hz Refresh (Display, HDMI 2.0, HDMI 1.4 ports)
3. Mouse: Logitech G502 Proteus Spectrum RGB Tunable Gaming Mouse, 12,000 DPI On-The-Fly DPI Shifting, Personalized Weight and Balance Tuning with (5) 3.6g Weights, 11 Programmable Buttons
4. Headphones: Logitech G Pro Gaming Headset with Pro Grade Mic for Pc, PC VR, Mac, Xbox One, Playstation 4, Nintendo Switch
5. Gaming Chair: Homall Gaming Chair Racing Style High-Back PU Leather Office Chair Computer Desk Chair Executive and Ergonomic Style Swivel Chair with Headrest and Lumbar Support (White) — We ended up returning this because it wouldn’t fit in our current setup… she’ll have to figure out another seating system.

Oh, and finally, we purchased these three important things that we would definitely need:

1. Anti Static Wrist Straps — 3 Pack — Reusable Anti-Static Wrist Straps equipped with Grounding Wire and Alligator Clip — Enables you to Ground Yourself while working on Sensitive Electronics
2. ARCTIC MX-4 Thermal Compound Paste, Carbon Based High Performance, Heatsink Paste, CPU for All Coolers, Interface Material, 4 Grams with Tool
3. Windows 10 Home USB — Make sure you get the USB so you can boot to it on installation!

You’ll obviously also need some screwdrivers and a bunch of other small-ish tools that most folks already have.

Now, it was time to build:

The entire process took about 6 hours, from start to finish, which surprised me. I had planned to take most (if not all) of the morning to put it together. And, there were definitely a few moments where I thought we were either missing a component or I had thought that we had possibly purchased parts that wouldn’t work together, but, the last above was perfectly configured.

And… it booted the first time!

I’m really proud of her and she’s now having the time of her life playing her favorite game at max settings @ 60FPS and I couldn’t be happier because there’s nothing like building your own computer and then using it for the things that you love!

And yes… she learned a ton about computer hardware and software and I definitely consider this part of her hackschooling education. What a win… and seriously fun stuff.

PS: Feel free to follow my daughter on YouTube!

Originally published at John Saddington.

In this tutorial, we will create a realtime tic-tac-toe game using Python and Pusher channels. Here’s a demo of how the game will look and behave upon creation:

You will need Python 3+, virtualenv, and Flask installed on your machine.The advent of the PC and the internet has redefined the term “entertainment” and the means by which it can be obtained. While a console or some special hardware would have been required to play games in the past, games are only a click away in today’s world of technology.

This multiplayer game will allow a player to connect using their preferred username (or generate a random username where a player doesn’t connect with a username) and choose to play with another player from a list of other online players.

The game itself follows the conventional principles of the popular tic-tac-toe game. The “online player(s)” feature is powered by Pusher presence channels and the realtime updates of a player’s move across multiple windows is powered by Pusher private channels. The source code for this tutorial is available here GitHub.

Let’s get started.

Prerequisites

To follow along, a basic knowledge of Python, Flask, JavaScript (ES6 syntax) and Vue is required. You will also need the following installed on your machine:

1. Python (v3.x)
2. Virtualenv
3. Flask

Virtualenv is great for creating isolated Python environments, so we can install dependencies in an isolated environment without polluting our global packages directory.

Setting up the environment

We will create the project folder and activate a virtual environment within it:

$ mkdir python-pusher-mutiplayer-game
    $ cd python-pusher-mutiplayer-game
    $ virtualenv .venv
    $ source .venv/bin/activate # Linux based systems
    $ \path\to\env\Scripts\activate # Windows users

We will install Flask using this command:

$ pip install flask

Setting up Pusher

To integrate Pusher into the multiplayer game, we need to create a Pusher channels application from the Pusher dashboard. If you don’t already have a Pusher account, head over to the Pusher website and create one.

After creating an account, create a new channels application and enable client events from the application dashboard. To enable client events, click on App settings and scroll to the bottom of the page then select the option that says Enable client events, and update the App settings.

Building the backend server

Back in the project directory, let’s install the Python Pusher library with this command:

$ pip install pusher

We will create a new file and call it app.py, this is where we will write all the code for the Flask backend server. We will also create a folder and call it templates, this folder will hold the markup files for this application.

Let’s write some code to register the endpoints for the game and serve the view, open the app.py file and paste the following code:

// File: ./app.py
    from flask import Flask, render_template, request, jsonify, make_response, json
    from pusher import pusher
    app = Flask(__name__)
    pusher = pusher_client = pusher.Pusher(
      app_id='PUSHER_APP_ID',
      key='PUSHER_APP_KEY',
      secret='PUSHER_APP_SECRET',
      cluster='PUSHER_APP_CLUSTER',
      ssl=True
    )
    name = ''
    @app.route('/')
    def index():
      return render_template('index.html')
    @app.route('/play')
    def play():
      global name
      name = request.args.get('username')
      return render_template('play.html')
    @app.route("/pusher/auth", methods=['POST'])
    def pusher_authentication():
      auth = pusher.authenticate(
        channel=request.form['channel_name'],
        socket_id=request.form['socket_id'],
        custom_data={
          u'user_id': name,
          u'user_info': {
            u'role': u'player'
          }
        }
      )
      return json.dumps(auth)
    if __name__ == '__main__':
        app.run(host='0.0.0.0', port=5000, debug=True)
    name = ''

_Replace the PUSHER_APP_* keys with the values on your Pusher dashboard._

In the code above, we defined three endpoints, here’s what they do:

• / - renders the front page that asks a player to connect with a username.
• /play - renders the game view.
• /pusher/auth - authenticates Pusher’s presence and private channels for connected players.

Building the frontend

In the templates folder, we will create two files:

1. index.html
2. play.html

The index.html file will render the connection page, so open the templates/index.html file and paste the following code:

<!-- File: ./templates/index.html -->
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <meta name="description" content="">
            <meta name="author" content="Neo Ighodaro">
            <title>TIC-TAC-TOE</title>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
            <style>
                  :root {
                    --input-padding-x: .75rem;
                    --input-padding-y: .75rem;
                  }
                  html,
                  body, body > div {
                    height: 100%;
                  }
                  body > div {
                    display: -ms-flexbox;
                    display: flex;
                    -ms-flex-align: center;
                    align-items: center;
                    padding-top: 40px;
                    padding-bottom: 40px;
                    background-color: #f5f5f5;
                  }
                  .form-signin {
                    width: 100%;
                    max-width: 420px;
                    padding: 15px;
                    margin: auto;
                  }
                  .form-label-group {
                    position: relative;
                    margin-bottom: 1rem;
                  }
                  .form-label-group > input,
                  .form-label-group > label {
                    padding: var(--input-padding-y) var(--input-padding-x);
                  }
                  .form-label-group > label {
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: block;
                    width: 100%;
                    margin-bottom: 0; /* Override default `<label>` margin */
                    line-height: 1.5;
                    color: #495057;
                    cursor: text; /* Match the input under the label */
                    border: 1px solid transparent;
                    border-radius: .25rem;
                    transition: all .1s ease-in-out;
                  }
                  .form-label-group input::-webkit-input-placeholder {
                    color: transparent;
                  }
                  .form-label-group input:-ms-input-placeholder {
                    color: transparent;
                  }
                  .form-label-group input::-ms-input-placeholder {
                    color: transparent;
                  }
                  .form-label-group input::-moz-placeholder {
                    color: transparent;
                  }
                  .form-label-group input::placeholder {
                    color: transparent;
                  }
                  .form-label-group input:not(:placeholder-shown) {
                    padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
                    padding-bottom: calc(var(--input-padding-y) / 3);
                  }
                  .form-label-group input:not(:placeholder-shown) ~ label {
                    padding-top: calc(var(--input-padding-y) / 3);
                    padding-bottom: calc(var(--input-padding-y) / 3);
                    font-size: 12px;
                    color: #777;
                  }
            </style>
          </head>
          <body>
            <div id="app">
              <form class="form-signin">
                <div class="text-center mb-4">
                  <img class="mb-4" src="https://thestore.gameops.com/v/vspfiles/photos/Tic-Tac-Go-14.gif" alt="" width="72" height="72">
                  <h1 class="h3 mb-3 font-weight-normal">TIC-TAC-TOE</h1>
                  <p>PUT IN YOUR DETAILS TO PLAY</p>
                </div>
                <div class="form-label-group">
                    <input type="name" id="inputUsername" ref="username" class="form-control" placeholder="Username" required="" autofocus="">
                      <label for="inputUsername">Username</label>
                </div>
                <div class="form-label-group">
                  <input type="email" id="inputEmail" ref="email" class="form-control" placeholder="Email address" autofocus="" required>
                    <label for="inputEmail">Email address</label>
                </div>
                <button class="btn btn-lg btn-primary btn-block" type="submit" @click.prevent="login">Connect</button>
                <p class="mt-5 mb-3 text-muted text-center">© 2017-2018</p>
              </form>
            </div>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <script>
            var app = new Vue({
              el: '#app',
              methods: {
                login: function () {
                  let username = this.$refs.username.value
                  let email = this.$refs.email.value
                  window.location.replace(`/play?username=${username}&email=${email}`);
                }
              }
            })
            </script>
        </body>
    </html>

When a player visits the connection page and puts in a username and email, the browser window will be redirected to the game view.

Let’s write the markup for the game view. Open the play.html file and paste the following code:

<!-- file: ./templates/play.html -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>TIC-TAC-TOE</title>
    </head>
    <body>
      <div id="app" class="container-fluid">
        <div class="container-fluid clearfix mb-3 shadow">
          <img class="float-left my-3" src="https://thestore.gameops.com/v/vspfiles/photos/Tic-Tac-Go-14.gif" height="62px" width="62px"
          />
          <div class="float-right w-25 py-3">
            <img class="my-3 mx-3 rounded-circle border" src="http://dfsanonymous.club/wp-content/uploads/2017/11/DFSAnonymous-NewLogo.png"
              height="62px" width="62px" />
            <p class="d-inline"> {% raw %} {{ username }} {% endraw %} </p>
          </div>
        </div>
        <div class="row mx-5" style="height: 50vh">
          <div class="col-8 h-50 align-self-center">
            <div class="row border rounded invisible h-50 w-75 m-auto" style="font-size: 3.6rem" ref="gameboard" @click="playerAction">
              <div class="h-100 pr-2 col border border-dark" data-id="1" ref="1"></div>
              <div class="col pr-2 border border-dark" data-id="2" ref="2"></div>
              <div class="col pr-2 border border-dark" data-id="3" ref="3"></div>
              <div class="w-100"></div>
              <div class="h-100 pr-2 col border border-dark" data-id="4" ref="4"></div>
              <div class="col pr-2 border border-dark" data-id="5" ref="5"></div>
              <div class="col pr-2 border border-dark" data-id="6" ref="6"></div>
              <div class="w-100"></div>
              <div class="h-100 pr-2 col border border-dark" data-id="7" ref="7"></div>
              <div class="col pr-2 border border-dark" data-id="8" ref="8"></div>
              <div class="col pr-2 border border-dark" data-id="9" ref="9"></div>
            </div>
          </div>
          <div class="col-4 pl-3">
            <div class="row h-100">
              <div class="col border h-75 text-center" style="background: rgb(114, 230, 147);">
                <p class="my-3"> {% raw %} {{ players }} {% endraw %} online player(s) </p>
                <hr/>
                <li class="m-auto py-3 text-dark" style="cursor: pointer;" v-for="member in connectedPlayers" @click="choosePlayer">
                  {% raw %} {{ member }} {% endraw %}
                </li>
              </div>
              <div class="w-100"></div>
              <div class="col text-center py-3 border h-25" style="background: #b6c0ca; font-size: 1em; font-weight: bold">
                {% raw %} {{ status }} {% endraw %}
              </div>
            </div>
          </div>
        </div>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script src="https://js.pusher.com/4.2/pusher.min.js"></script>
      <script>
      </script>
    </body>
    </html>

The code above defines the layout of the game view but does not contain any interactivity or realtime features. In the scripts section, before the closing body tag, we included the Vue and Pusher libraries because they are required for the game to work.

Let’s include the JavaScript code that will drive the entire game process and define its logic.

In the same file, add the code below in between the script tag that is just before the closing body tag:

var app = new Vue({
      el: '#app',
      data: {
        username: '',
        players: 0,
        connectedPlayers: [],
        status: '',
        pusher: new Pusher('PUSHER_APP_KEY', {
          authEndpoint: '/pusher/auth',
          cluster: 'PUSHER_APP_CLUSTER',
          encrypted: true
        }),
        otherPlayerName: '',
        mychannel: {},
        otherPlayerChannel: {},
        firstPlayer: 0,
        turn: 0,
        boxes: [0, 0, 0, 0, 0, 0, 0, 0, 0]
      },
      created () {
        let url = new URL(window.location.href);
        let name = url.searchParams.get("username");
        if (name) {
          this.username = name
          this.subscribe();
          this.listeners();
        } else {
          this.username = this.generateRandomName();
          location.assign("/play?username=" + this.username);
        }
      },
      methods: {
        // We will add methods here
      }
    });

_Replace the PUSHER_APP_* keys with the keys on your Pusher dashboard._

Above, we create a new instance of Vue and we target the #app selector. We define all the defaults in the dataobject and then in the create() function which is called automatically when the Vue component is created, we check for a user and assign the user to the username if one was supplied.

We also make calls to the subscribe and listeners methods. Let’s define those inside the methods object. Inside the methods object, paste the following functions:

// [...]
    subscribe: function () {
      let channel = this.pusher.subscribe('presence-channel');
      this.myChannel = this.pusher.subscribe('private-' + this.username)
      channel.bind('pusher:subscription_succeeded', (player) => {
        this.players = player.count - 1
        player.each((player) => {
          if (player.id != this.username)
            this.connectedPlayers.push(player.id)
        });
      });
      channel.bind('pusher:member_added', (player) => {
        this.players++;
        this.connectedPlayers.push(player.id)
      });
      channel.bind('pusher:member_removed', (player) => {
        this.players--;
        var index = this.connectedPlayers.indexOf(player.id);
        if (index > -1) {
          this.connectedPlayers.splice(index, 1)
        }
      });
    },
    listeners: function () {
      this.pusher.bind('client-' + this.username, (message) => {
        if (confirm('Do you want to start a game of Tic Tac Toe with ' + message)) {
          this.otherPlayerName = message
          this.otherPlayerChannel = this.pusher.subscribe('private-' + this.otherPlayerName)
          this.otherPlayerChannel.bind('pusher:subscription_succeeded', () => {
            this.otherPlayerChannel.trigger('client-game-started', this.username)
          })
          this.startGame(message)
        } else {
          this.otherPlayerChannel = this.pusher.subscribe('private-' + message)
          this.otherPlayerChannel.bind('pusher:subscription_succeeded', () => {
            this.otherPlayerChannel.trigger('client-game-declined', "")
          })
          this.gameDeclined()
        }
      }),
      this.myChannel.bind('client-game-started', (message) => {
        this.status = "Game started with " + message
        this.$refs.gameboard.classList.remove('invisible');
        this.firstPlayer = 1;
        this.turn = 1;
      })
      this.myChannel.bind('client-game-declined', () => {
        this.status = "Game declined"
      })
      this.myChannel.bind('client-new-move', (position) => {
        this.$refs[position].innerText = this.firstPlayer ? 'O' : 'X'
      })
      this.myChannel.bind('client-your-turn', () => {
        this.turn = 1;
      })
      this.myChannel.bind('client-box-update', (update) => {
        this.boxes = update;
      })
      this.myChannel.bind('client-you-lost', () => {
        this.gameLost();
      })
    },
    // [...]

In the subscribe method, we subscribe to our Pusher presence channel, and then subscribe to the private channel for the current user. In the listeners method we register the listeners for all the events we are expecting to be triggered on the private channel we subscribed to.

Next, we will add other helper methods to our methods class. Inside the methods class, add the following functions to the bottom after the listeners method:

// Generates a random string we use as a name for a guest user
    generateRandomName: function () {
      let text = '';
      let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      for (var i = 0; i < 6; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
      }
      return text;
    },
    // Lets you choose a player to play as.
    choosePlayer: function (e) {
      this.otherPlayerName = e.target.innerText
      this.otherPlayerChannel = this.pusher.subscribe('private-' + this.otherPlayerName)
      this.otherPlayerChannel.bind('pusher:subscription_succeeded', () => {
        this.otherPlayerChannel.trigger('client-' + this.otherPlayerName, this.username)
      });
    },
    // Begins the game
    startGame: function (name) {
      this.status = "Game started with " + name
      this.$refs.gameboard.classList.remove('invisible');
    },
    // User declined to play
    gameDeclined: function () {
      this.status = "Game declined"
    },
    // Game has ended with current user winning
    gameWon: function () {
      this.status = "You WON!"
      this.$refs.gameboard.classList.add('invisible');
      this.restartGame()
    },
    // Game has ended with current user losing
    gameLost: function () {
      this.turn = 1;
      this.boxes = [0, 0, 0, 0, 0, 0, 0, 0, 0]
      this.status = "You LOST!"
      this.$refs.gameboard.classList.add('invisible');
      this.restartGame()
    },
    // Restarts a game
    restartGame: function () {
      for (i = 1; i < 10; i++) {
        this.$refs[i].innerText = ""
      }
      this.$refs.gameboard.classList.remove('invisible');
    },
    // Checks tiles to see if the tiles passed are a match
    compare: function () {
      for (var i = 1; i < arguments.length; i++) {
        if (arguments[i] === 0 || arguments[i] !== arguments[i - 1]) {
          return false
        }
      }
      return true;
    },
    // Checks the tiles and returns true if theres a winning play
    theresAMatch: function () {
      return this.compare(this.boxes[0], this.boxes[1], this.boxes[2]) ||
        this.compare(this.boxes[3], this.boxes[4], this.boxes[5]) ||
        this.compare(this.boxes[6], this.boxes[7], this.boxes[8]) ||
        this.compare(this.boxes[0], this.boxes[3], this.boxes[6]) ||
        this.compare(this.boxes[1], this.boxes[4], this.boxes[7]) ||
        this.compare(this.boxes[2], this.boxes[5], this.boxes[8]) ||
        this.compare(this.boxes[2], this.boxes[4], this.boxes[6]) ||
        this.compare(this.boxes[0], this.boxes[4], this.boxes[8])
    },
    // Checks to see if the play was a winning play
    playerAction: function (e) {
      let index = e.target.dataset.id - 1
      let tile = this.firstPlayer ? 'X' : 'O'
      if (this.turn && this.boxes[index] == 0) {
        this.turn = 0
        this.boxes[index] = tile
        e.target.innerText = tile
        this.otherPlayerChannel.trigger('client-your-turn', "")
        this.otherPlayerChannel.trigger('client-box-update', this.boxes)
        this.otherPlayerChannel.trigger('client-new-move', e.target.dataset.id)
        if (this.theresAMatch()) {
          this.gameWon()
          this.boxes = [0, 0, 0, 0, 0, 0, 0, 0, 0]
          this.otherPlayerChannel.trigger('client-you-lost', '')
        }
      }
    },

Above, we have added several helper methods that the game needs to function properly and before each method, we have added a comment to show what the method does.

Let’s test the game now.

Testing the game

We can test the game by running this command:

$ flask run

Now if we visit localhost:5000, we should see the connection page and test the game:

Conclusion

In this tutorial, we have learned how to leverage the Pusher SDK in creating an online multiplayer game powered by a Python backend server.

The source code for this tutorial is available on GitHub

This post first appeared on the Pusher Blog

This project is a continuation of my previous article. In it, I explained how we can use CycleGANs for image style transfer, and apply it to convert Fortnite graphics and make it look like PUBG.

CycleGAN is a type of Generative Adversarial Network that is capable of mimicking the visual style of one image and transfering it onto another. We can use it to make a game’s graphics look like that of another game or the real world.

In this article, I wanted to share some more results using the same CycleGAN algorithm which I covered in my previous work. First, I’ll try to improve GTA 5 graphics by adapting them to look like the real world. Next, I’ll cover how we can achieve the same photo-realistic results, without having to render high-detailed GTA graphics in the first place.

_Both the datasets that I’ve used for this are available at [this link](https://junyanz.github.io/CycleGAN/" rel="noopener" target="blank" title=") on the original author’s project page.

For the first task, I have taken screenshots of the game as our source domain which we want to convert into something photo-realistic. The target domain comes from the cityscapes dataset that represents the real world (which we aim to make our game resemble).

CycleGAN results

Based on about three days of training for about 100 epochs, the Cyclegan model seems to do a very nice job of adapting GTA to the real world domain. I really like how the smaller details are not lost in this translation and the image retains its sharpness even at such a low resolution.

The main downside is that this neural network turned out to be quite materialistic: it hallucinates a Mercedes logo everywhere, ruining the almost perfect conversion from GTA to real world. (It’s because the cityscapes dataset was collected by a Mercedes owner.)

How to achieve the same photo-realistic graphics with less effort

While this approach may seem very promising in improving game graphics, I do not think the real potential lies in following this pipeline. By that I mean that it seems impractical to render such a highly detailed image and then convert it to something else.

Wouldn’t it be better to synthesize a similar quality image but with much less time and effort in designing the game in the first place? I think the real potential lies in rendering objects with low detail and letting the neural net synthesize the final image from this rendering.

So, based on the semantic labels available in the cityscapes dataset, I segmented objects in a screenshot of GTA giving us a representation of low detail graphics. Consider this as a game rendering of only a few objects, like the road, car, houses, sky, and so on without designing them in detail. This will act as the input to our image style transfer model instead of the highly detailed screenshot from the game.

Let’s see what quality of final images can be generated from such low detail semantic maps using CycleGANs.

Results of image synthesis from semantic maps

Recreating photo-realistic scenes from the semantic maps of GTA 5.

Here are a few examples of how it looks when we recreate GTA graphics from semantic maps. Note that I have not created these maps by hand. That seemed really tedious, so I simply let another CycleGAN model do it (it is trained to perform image segmentation using the cityscapes dataset).

It seems like a good conversion from far away, but looking closely its quite obvious that the image is fake and lacks any kind of details.

Now, these results are 256p and have been generated on a GPU with 8 GB of memory. However, the authors of the original paper have shown that it is possible to create a much more detailed 2048 x 1024p image using a GPU with over 24 GB of memory. It uses the supervised learning version of CycleGAN, called pix2pixHD, that is trained to perform the same task. And boy does the fake image look pretty darn convincing!

_[Here’s the full video](https://www.youtube.com/watch?v=3AIpPlzM_qs&t=23s" rel="noopener" target="blank" title=") uploaded by the authors of this paper.

Conclusion

GANs have great potential to change how the entertainment industry will produce content going forward. They are capable of producing much better results than humans and in much less time.

The same is applicable to the gaming industry as well. I’m sure that in a few years, this will revolutionize how game graphics are generated. It will be much easier to simply mimic the real world than to recreate everything from scratch.

Once we attain that, rolling out new games will also be much faster. Exciting times ahead with these advancements in Deep Learning!

More results in video format

All the above results and more can be found on my YouTube channel and in the video embedded below. If you liked it, feel free to subscribe to my channel to follow more of my work.

Thank you for reading! If you liked this article, please follow me on Medium, GitHub, or subscribe to my YouTube channel.

2 years ago I was just 17 year old high school student who knew nothing about coding. But I pushed forward anyway, and within a few months I published my first game on Steam.

Now, I’ve made over 10 games for desktop, web, and mobile, with over 1.9 million plays combined.

No matter your skill level, you can make a game too. 2 years ago, I thought it was impossible, but tried anyways. It was the hardest thing I’d ever done. But it was worth it. Now, I realize game development is like any skill — you only get better by doing, failing, then improving.

I taught myself everything I know. And now I’m going to teach you.

To make a game, you must go through the 6 stages of game development: Design. Art. Code. Audio. Polish. Market.

The rest of my post will structure each stage into the following:

• ?Advice I’ve curated from my and others’ experiences.
• ?Resources I’ve found most helpful.

1. Design ?

Advice?

You’ve got a great idea. *

But how do you capture it in writing?

Everyone’ll have their own way of doing that best. Some compose 60-page design documents. Others, like me, write a page of badly-written notes, unreadable to anyone else. I don’t know what’s best for you. But I can give suggestions on what to write about:

• Hook. What makes your game idea great? For me, this is the most important to write down. Once you capture this, you can write down the next three points much easier. Is your game about something thought-provoking? Scandalous? Is it putting a new twist to an old classic? Or, is it doing something that’s never been done before?
• Mechanics. What does your player do? And for what purpose? This is your gameplay. It can be as simple as pressing QWOP to move in the game QWOP, to tapping buttons to chat in Mystic Messenger, to the tons of key combos in Dwarf Fortress.
• Story. What story should players remember your game by? What emotions should they leave your game with? Every game has a story. If the story isn’t obvious, it is created by the player. A story can be created from the increasing numbers in 2048, the rising empires in Civilization, and the silent interactions in Monument Valley. Think about what story’ll be found in your game.
• Mood. What impression does your game make? What are the visuals? Sound? First impressions matter. First impressions will hook — then keep — the player playing. Perhaps, you’ll give your game a retro vibe with pixel graphics and chiptune music. Or, a modern, clean look with flat geometries and instrumentals.

* Having a hard time thinking of an idea? Creative block hits us all.

• Join a game hackathon/jam. You and other participants’ll be tasked to make a game in a short amount of time. Throughout, and after, you’ll be met with support from other jammers. And the excitement and creativity during a jam? Infectious. Don’t know where to get started? Try Ludum Dare, one of the largest game jams.
• Keep a list of ideas. I and other developers I know jot down our ideas. That way, we can refer back to our old ones when we run out of new.

When the muse hits, stop whatever you’re doing. Write that idea down. The next time creativity ghosts, you won’t be left grasping for straws.

Resources ?

All of the below are tried and true. (?) means I use it currently.

Note-taking:

• Notes for Mac (?)
• Google Docs (?)
• Trello

Collaboration (for teams):

• Google Drive
• GitHub (?). Requires git and Unity .gitignore.
• Unity Collab. Easiest out of the three. The free version has limitations.

Heads up — Unity is the game engine I use to make games, so I’ll be mentioning it throughout. Feel free to use a different engine.

Game design:

• The Art of Game Design by Jesse Schell
• Gamasutra

2. Art ?

Advice?

You’ve planned out your idea; congrats, that’s amazing! Now, you can work on the actual game.

(If you don’t know how to code, I suggest doing stage 3, Code, before Art. You don’t want to create art that you’ll trash later because you can’t code it in.)

Don’t know how to draw? _Do not fret. Anyone can make something beautiful with the 3 basic visual principles: color, shape, space._

Thomas Was Alone — a beautiful yet simple game

UI

Think about how you can make it unique — have a distinct color scheme, font(s), shape(s), and icon(s) — while functional. Is the important information readable and obvious? Do the colors/fonts/icons distract from that at all?

Who would win? ?

2D animations

You have two options:

• Frame-by-frame. Draw out each frame of the animation. For this, you should use sprite sheets with TexturePacker (or if you’re using Unity, Sprite Packer).
• Bone-based. Draw each animated limb, then animate the limb’s position, rotation, and whatnot in-game. Can be faster, easier, and save memory. If you’re doing 2D and using Unity, try editing the pivots of sprites or Anima2D.

Misc

Here are some general miscellaneous art tips that apply to not only art in games, but in other software as well.

• Tile patterned assets to create tiled images and save memory.

Untiled to tiled

• 9-patch/9-slice assets with unscalable borders but a scalable center to create scalable images and save memory.

?The blue ditto grows, but its corners stay the same!

• Make the dimensions of each asset a multiple of 4 or a power of 2 to save memory. Which one depends on how you’re compressing the assets.
• If you’re using Photoshop, use “File > Export > Layers to Files” to quickly export each layer as a file (e.g. PNG, JPEG).

Resources ?

Creating UI:

• Photoshop (?).
• Sketch.

UI principles:

• Google Material Design (?).
• Apple’s UI Do’s and Don’ts.

Creating 2D assets:

• Photoshop (?).
• Gimp.
• Paint Tool SAI. Good for smooth/anime styles.

Creating 3D assets:

• Blender (?). Powerful but steep learning curve.
• Maya. Good for animation.
• Max. Good for rendering.

Free assets:

• Behance (?). Fonts + icons + other designs.
• KennyNL. HQ, game-ready UI/2D/3D art.
• Open Game Dev Art. Large library of user-generated art.

Inspiration:

• Dribbble. Designs from invite-only designers.
• Behance (?). Designs from anyone with an account.
• itch.io (?). Beautiful indie games.

3. Code ?

Advice?

Debug.Log(“Oh boy! Time to code!! ^_^”);

Your first step? Decide on a game engine and an IDE (Integrated Development Environment — basically, an app that lets you code). My recommended game engines+IDEs are in Resources below.

Your second step? Code.

Don’t know how to code? No worries. I got you. You can learn.

These CS fundamentals should be enough to start. (All code examples here are in C++, one of the main languages the Unity 3D game development framework uses.)

1) Data types and variables. At the root of all code is data. That data is stored in variables. You can declare a variable like this:

int i = 0;

Let’s break that down.

int is the data type. i is the variable name. And that = 0 assigns zero as the variable value.

So what’s this?

string s = "pusheen is best cat";

string is the data type. s is the variable name. And yep — you guessed it — “pusheen is best cat” is the variable value.

Some common data types: int and long are integers. float and double are decimal numbers. And string is any sentence. (Even an empty one — “”!)

Want to know more? Go through this and this.

2) If statements. If statements evaluate if a certain condition is true. If it is, run the code that’s inside the if statement:

if (true){ //true is always true!

    doThings(); //I'm inside the if statement's brackets; run me!
}

If the condition isn’t true, we can evaluate other conditions with else if:

int i = 1;

if (i == 0){ 

   doThings(); 
}
else if (i == 1){

   doOtherThings(); //I'm gonna be run!

}

Or, just run some other code with else:

int i = 60000;

if (i == 0){

  doThings(); 

} else {

  doOtherThings(); //I'm still gonna be run.

}

3) For/while loops. While loops continue while a certain condition is still true, executing the same lines of code over and over again. When the condition is false, the while loop exits.

while (someBool == true){ //condition

   doThings(); //We'll keep doing things until someBool is false

}

Think: how long does this while loop last?

while (true){

  doThings();

}

For loops are basically while loops where:

int i = 0;
while (i < condition){ 

    doThings();

    i++; //increment after doing things
}

That’s equivalent to:

for (int i = 0; i < condition; i++){

    doThings();
}

4) Basic data structures. So, we have data, and we ways to evaluate and manipulate that data. We can also store that data into some structure — a data structure. Data structures you should know are arrays, lists, queues, stacks, and sets.

Here’s a quick example of an array:

/*
Say you have numbers 0 through 9 that you want to store somewhere. You can store it in an array!
*/
int[] arr = new int[10]; 
/*
The [] brackets declare an array. We assign a new array to arr of size 10 - that means it can hold 10 elements. Arr now looks like this:

arr = [ 0 0 0 0 0 0 0 0 0 0 ]
*/
for (int i=0; i<10; i++){

    arr[i]=i; //We assign whatever i is to the the ith index of arr.

//Did you know data structures' indices start at 0? ? 
}

/*
After the for loop, our array data structure should look like this!
arr = [ 0 1 2 3 4 5 6 7 8 9 ]
*/

To solidify your knowledge of 2–4, go through this.

5) Functions and exceptions. Functions are basically a small line of code describing a big bunch of code. For example, if you call:

EatBread();

And EatBread() looks like:

void EatBread(){ //<---this is a function. 

   breadAte=true;

   printf("I CAN FEEL THE CARBS COURSING THROUGH MY BODY");

}

Then the call to EatBread() is actually a call to the two statements within the EatBread() function.

If you do something bad in your code, an exception might get thrown. They’re angry red errors there to tell you, hey, back up, what you did right there just ain’t ‘workin out logically. Go revise it.

To learn more about functions, go here; for exceptions, go here.

Then, there’re other things you should know:

6) Language. What language are you going to code in? C++? Javascript? C#? Every language is written somewhat differently and can let you do different things.

7) API (Application Programming Interface). Once you know the basics, you’ll have to learn the specific API of your game engine. APIs are essentially a bunch of powerful tools wrapped in simple classes and functions that you can call. APIs make life easier. Way easier.

Lastly:

8) Look at an example project in your chosen game engine. Unreal and Unity both have a ton of free example projects. This’ll let you discover how everything comes together. Plus, you can build your game idea off of the project. (I built my first game off of Corgi Engine.)

if (you.getThisFar()==true){
  veryProud=true;
  you.didIt(); //CURRENT MOOD: THE SH⭐⭐KEST ???

}

A word of encouragement: I know. Coding is scary at first. Nothing makes sense, you’re hitting constant roadblocks, and you might want to quit in the face of failures and exceptions. It doesn’t mean you’re bad at coding. Coding is challenging. It’s understandable to feel incompetent at first.

But it just takes time, like any other skill. It’ll get easier. And it’ll get fun (at least, it did for me).

Important game programming concepts:

• Object orientation. Makes programming feel more natural.
• Naming conventions. Name your classes, methods, and variables as something that obviously conveys its purpose. For instance, a melee attack function should be named meleeAttack(), not mA() or protecbutalsoattac(). You (and others who read your code) should know what’s going on.
• Decomposition. Put code that repeats itself into a separate function. Call that function instead of duplicating the repeatable code.
• Singleton design pattern. Allows data that a lot of things need to be stored in one place.
• Static avoidance. Beyond singletons, I’d avoid making static variables— their lifetime is the game’s lifetime, they’re slower, and they can have unexpected behaviors in the editor.
• Observer design pattern. Allows things that must happen depending on another thing to not waste the computer’s time checking that other thing.

Important Unity-specific things:

• Coroutines. IEnumerators and Coroutines allow you to start doing things, continue doing things until some time has passed, then stop. I use them all the time: for bursts of visual effects; for lerping movement; for waiting for a scene to load before grabbing the scene’s objects.
• ScriptableObject. These contain data with less overhead than MonoBehaviors.

Resources ?

Game engines:

• Make your own. Requires C/C++. Low level. Really, really low.
• Unity (?). 2D/3D. Requires Javascript/C#. Mid-level. Cross-platform.
• Unreal Engine. 2D/3D. Requires C++. Mid-level. Cross-platform. Notes: 2D support is not great.
• pixi.js (?). 2D. Requires Javascript. Mid-level. Web.
• GameMaker Studio. 2D/3D. Requires GML. Beginner level. Cross-platform.
• Corona. 2D. Requires Lua. Beginner level. Cross-platform.

IDEs:

• Visual Studio Code (?). For MacOS. Gives me no lag and has awesome, VSCode-exclusive features (such as inline reference info, quick navigation (⌘T)).
• Visual Studio (?). For Windows.
• MonoDevelop. Comes with Unity. Tends to lag.

Free Unity assets:

For Unity, tons of free assets exist on the Unity Asset Store, GitHub, bitbucket, and other sites. I use at least 2 in every project. Make your life easier with assets, but realize they’re not perfect. If you spot mistakes, don’t hesitate to fix them and/or ping the developers.

• TextMeshPro (?).
• LeanTween (?).
• Fungus.
• Corgi Engine.
• Dialogue System.
• Post Processing Stack.
• Keijiro Takahashi. Works at Unity. Has amazing open source Unity visual effects projects!

Last but not least, my #1 solution for coding problems: Google!

4. Audio ?

Advice?

First: Do you want audio?

Audio can do wonders for immersion and mood. But, it can cost memory.

If the answer’s yes, what audio?

Will you include music? Sound effects? Voiceovers or narration?

For any of the above, record and mix them in a way that matches your game’s mood. For example, Bastion uses organic mouth and instrument sounds, matching its game world. Crypt of the Necrodancer uses a blend of electronic beats and chiptune rock to match the colorful, rhythmic game.

“Immersion is king.”

-Darren Korb, Supergiant Games

If your audio doesn’t match your game’s mood, it could detract from immersion. How will your audio match your game?

Resources ?

Audio tools:

• Logic Pro. $200. MacOS only.
• FL Studio (?). $99–899. Has free demo.
• Reaper. $60–225.
• Audacity (?). Free. Limited capabilities. Useful for cleaning audio.

Retro sound effect generators:

• Chiptone.
• Bfxr.
• Leshy SFMaker.
• as3sfxr.

Free sounds:

• Soundcloud (?). S_oundcloud has a t_on of gorgeous gems under Creative Commons (CC). Here’s a playlist to get started. Make sure to provide attribution if needed.
• Incompetech (?). CC music. Must attribute.
• Bensound. CC music. Must attribute.

5. Polish ?

Advice?

Hey! You’re here! You made it; that’s absolutely incredible (I’m serious, if you get this far, I’d love to hear about your game; hit me up)!

You’re done.. right?

Well. There’s a 99.99999% chance there’re bugs.

It’s time to bug test.

Bug testing your game

1. Get others — not you — to play it. Preferably in front of you, because if they encounter a bug, they might not realize or have a hard time describing it.
2. Play it on all targeted platforms. It may work in the editor, but does it work where it matters? For Linux and the different versions of Android especially, I find that things get a little wonky.

Alright. You’ve found a bug. What now?

1. Check the console for exceptions. Found one? Great! Find the file and line number where the exception was thrown. If the exception sounds like something from Mars, Google it and learn about it. Then figure out why that line number is throwing that exception.
2. Still can’t figure it out? Write to console. Start tossing in them log statements in the place(s) you think is causing you trouble. Print variable values, and see whether what’s printed is what’s expected. If not, fix that.
3. When worse comes to worse, check logs. The logs of your project will give you way more info than the console. Read the last lines where the exception occurred. Google anything you don’t know. Can you fix it now?
4. Sleep. It’ll get fixed in the morning. This is just a bad dream. Right? ?

Common errors

• NullReferenceException.

var.doThing(); //throws NullReferenceException: Object reference not set to an instance of an object

Problem: You’re doing a thing on a null (nonexistent) variable.

Quick fix: Check if the variable is null before doing the thing.

if(var != null)
    {
        var.doThing(); // do the thing safely!
    }

• SyntaxErrorException.

Problem: Your code has invalid syntax.

Quick fix: In the Exception message, it should tell you what character is throwing the error. Change that character.

Note: If the character is a double quote, make sure you’re using dumb quotes instead of smart quotes:

" //dumb quote
” //smart quote. I promise these'll give you trouble at some point in your life. ?

• Pink or black screen.

Possible problem: Some shader can’t render.

Possible causes: You’re using a 3D shader for a 2D game. Or, you’re using some shader feature unsupported by the target OS. Be sure to use mobile shaders for mobile games.

After you’re done debugging, polish your game off by optimizing its memory usage and performance. This’ll make it download faster and heat up people’s devices less.

General optimization tips

• Set the target frame rate. The frame rate could be 20 for a visual novel or 60 for a first-person shooter. A lower than default target frame rate allows the game to spend less time rendering frames.
• Animation / particles / occlusion culling. Culling means that things invisible to the camera aren’t rendered. Characters’ll only animate, particles’ll only update, and 3D models will only be rendered when in view.

• Compress textures and audio. Crunch compress textures. Stream music and decompress sound effects on load. Decrease the audio quality. Note that compression may or may not decrease the quality of assets noticeably.
• Object pooling. Avoid instantiating and destroying many objects at once to prevent huge spikes. Instead, object pool them in a List, Queue, or other data structure. Things like bullets should be object pooled.
• Don’t let raycasts hit things that don’t need input. Raycasts are like little rays that shoot from your fingers or mouse everytime you tap or click. Remove objects that don’t react to those inputs from raycast calculations.

If you’re up for a challenge:

• Optimize shaders. Give each renderer a material. This’ll save resources in the beginning since the game doesn’t have to create new materials for everything. Have the shader for the material only include what’s functionally needed (for example, a button that doesn’t need masking can use a Sprite shader instead).
• In Unity, Use AssetBundles instead of Resources. AssetBundles will save memory by pulling from online (e.g. dropbox) or local storage (e.g. hard disk). I haven’t tried too much due to the poor documentation, though.

Resources ?

All of these are from Unity but can be applicable to other engines.

Scripts:

• Optimizing scripts in Unity games (?)

Art:

• A guide to optimizing Unity UI (?)
• Art Asset best practice guide (?)

Memory:

• Reducing the file size of your build (?)
• Memory

Platform-specific:

• Practical guide to optimization for mobiles (?)
• WebGL performance considerations (?)
• Memory Considerations when targeting WebGL (?)
• Olly’s seven stages of optimizations for mobile VR

6. Market ?

Advice?

Congrats! ?? You’ve made something. It’s time to show the world what you’ve made.

Personally, marketing is my most anxiety-inducing stage. If you, too, get doubtful, the game developer community is helpful. You’re not alone in this. And you’ve come so far — might as well get through to the end, right?

You’ll never know if it’ll be a hit unless you try.

1. Draft. Create drafts of your game page on all your targeted game distribution platforms. Find a list of platforms in Resources below.
2. Network. If you go the full networking mile, you’ll want to email game press, showcase in festivals, and attend conferences.

With game press, email your unlisted game page a week before release. Give people some time to write about it. It’s likely they won’t write about it at all. I’ve found that press loves a compelling developer story, unique/controversial concept, and, most importantly, a presskit.

How do you find emails? You can..

1. Find writers you like and Google their name. Their email is bound to come up somewhere: Twitter, LinkedIn, etc. Or..
2. Find the magazine/new’s company-wide email on their About page. It’s usually in the format of tips@company.com.

Do not email press about your game if they explicitly don’t cover your genre/targeted platform.

Festivals can get you awards and/or professional recognition by other developers and press.

Conferences are what you make of it: they can be all about networking with other developers, companies, and press (go get them business cards!); updating your latest game dev know-how; playing others’ games; or meeting up with internet friends.

Game conference tickets are expensive. If you’re a student, think about applying for scholarships for them. The IGDA Scholars program gives you some especially amazing networking and event opportunities.

3. Youtubers/Streamers. You can get video coverage of your game by:

4. Ranking high on game distribution platforms.

5. Emailing. If you email, don’t talk about yourself; talk about the game. Keep it sweet, short, and compelling. Use eye-catching photos and gifs.

How do you find emails? Look at their About page. If you can’t find it there, Google them and see if their other social media have it.

’tis an email

dances in the air

4. Social media.

Social media is an amazing marketing tool. Agar.io found its rise from 4chan, Butterfly Soup got mad boosts from Twitter, and some form of social media always ends up in my top 4 referrers:

Live Portrait Maker (left), YOU LEFT ME. (right)

My favorite social media platforms for marketing are in Resources below.

A last note — Publisher or self-publish? Game marketing is a lot. Do you want a publisher to take care of all that? Want to go the Hotline Miami x Devolver Digital route, or rely on Farmville and Doki Doki Literature Club’s word-of-mouth?

With a publisher, you’ll have to do your research to find a good one. After, you’ll sign paperwork and go through legal hoops. Plus, it’s a huge financial investment.

By yourself, you’ll have to put a lot of time and effort into learning marketing. You may love it. You may hate it. And you might not do a great job of it, either. But it’s free, and you learn valuable skills.

Yay organic, self-publishing growth~ (But is it non-GMO though?)

For me, I’ll always self-publish. I love learning new things. Also, I firmly believe that a truly great game will succeed no matter what, as long as some marketing effort was put.

6. Hit that Publish button!

??Yooo, you DID it!! ?Now relax, sit back, grab a yummy drink, and take some time for yourself! You’ve worked so hard. You deserve it.

And remember that, even if your game doesn’t get the reception you expected, that’s ok. It’s not gonna be perfect your first time. My first game on Steam only has 255 downloads.

The facts are, you made a game. You learned so much. That’s enough.

And there’s always a next time!

Resources ?

Game distribution platforms:

• Steam (?). PC. Requires $100 USD fee per game.
• Origin. PC.
• GOG. PC. Free to publish. Game must get accepted.
• Mac App Store. MacOS. Requires Apple Developer account.
• itch.io (?). PC/Web. Free to publish.
• Game Jolt (?). PC/Web. Free to publish.
• Armor Games (?). Free to publish. Must apply to be a developer.
• Kongregate (?). Web. Free to publish.
• Newgrounds (?). Web. Free to publish.
• GitHub (?). Web. Free to publish on your own site with domain name formatted as “__.github.io”._
• Amazon. Web/Mobile. Free to publish.
• Google Play (?). Mobile. Requires one-time $25 USD fee.
• iOS App Store (?). Mobile. Requires Apple Developer account.

Game press:

• IndieGames.
• Siliconera.
• FreeGamesPlanet. Super nice admin.
• PCGamer.
• Kotaku.
• Rock Paper Shotgun.
• Polygon.
• Giant Bomb.
• EuroGamer.

Game festivals:

• Independent Games Festival (IGF). Deadline around October.
• Indiecade. Deadline around May/June.
• Swedish Game Awards. Deadline around July.
• South by Southwest Festival (SXSW). Deadline around December.
• The Game Awards. Deadline around November.

Game conferences:

• Game Developer’s Conference (GDC). San Francisco.
• Penny Arcade Expo (PAX). Seattle/Boston/Philadelphia/Melbourne.
• Electronic Entertainment Expo (E3). Los Angeles.
• Tokyo Game Show. Japan.
• Steam Dev Days. Seattle. For Steam developers only.

Emailing:

• presskit()

Social media:

• reddit (?). Pick an appropriate subreddit. Some of my favorites are /r/WebGames, /r/IndieGaming/, and /r/visualnovels.

/r/WebGames.

• Facebook (?). Post on your Facebook Page (if you have one) and personal facebook (if you’re comfortable). There’s also tons of Facebook Groups where you can show off your game! Here’s some:

GameDev Show and Test
Welcome to GameDev Show and Test - a sister group to the Indie Game developer groups. The purpose of this group is to…

Indie Game Developers
Independent Game Developers group for small companies and individuals designing and publishing their own games. **READ…

Indie Game Promo
Indie Game Promo has 47,645 members. Sister group to Indie Game Dev and Indie Game Chat for the purpose of promoting…

Indie Game Promo.

• Tumblr (?).
• Twitter (?). Try using tags like #gamedev, #indiedev, and #screenshotsaturday to get discovered.

Community:

• /r/gamedev (?).
• Ludum Dare (?).
• Indie Game Devs (?).

Conclusion

There’s no cheat code to making a game. It’s just a lot of determination and effort.

“Behind every Half Life, Minecraft and Uncharted, there are OCEANS of blood, sweat and tears.”

— Ken Levine

You’ll get confused. You’ll make mistakes. You might even cry (I did—and still do).

But that’s okay. It means you’re growing. If you‘re putting in that much effort, I believe in you and your game: You can do it.

supportive foxtato by Emily’s Diary

If you liked reading my first article, be sure to give a ?(or several — did you know you can give more than one?) It’d mean the world ?

You can also follow/DM me on Twitter, Tumblr, and GitHub, and buy me a coffee if you wish.