Create online multiplayer games with microStudio

The new networking features in microStudio allow you to create and run your online multiplayer game! microStudio handles all the difficult stuff for you, that is to say you won't have to set up and run your own server. You will just code your client and server in microStudio and run them directly from the microStudio editor. You can run multiple client apps within the editor and you can also join your multiplayer game from another PC or smartphone, while working on it.

Also watch the video on this topic: https://www.youtube.com/watch?v=gQ_GnxqTGFA

View it in action

There are a few public projects demonstrating the possibilities already:

• The microVerse (collective work from a group of microCoders:-)): https://microstudio.dev/i/microstudio/microverse/
• Online multiplayer Tron game (by @HomineLudens): https://microstudio.dev/i/HomineLudens/tronmicro/
• Multiplayer Asteroids: https://microstudio.dev/i/gilles/asteroidsffa/
• Tower Defense game: (this one is in Python): https://microstudio.dev/i/tchene/protectcrystals/
• Multiplayer Drawing app: https://microstudio.dev/i/gilles/doodlemulti/

microStudio can be used online on https://microstudio.dev or as a standalone, offline app downloadable at https://microstudio.itch.io/microstudio

Documentation

The documentation is accessible in microStudio under Advanced / Networking ; you can also visit it here: https://github.com/pmgl/microstudio/wiki/en-Networking

Simple Example

Create the project

Networking must be activated in your project settings. Once activated, you will notice a few changes in the code and run tab, allowing you to start a server and run multiple clients. Server and client share the same code base ; the client design follows the usual init / update / draw pattern, while the server will use serverInit / serverUpdate.

enable networking

You can enable Networking for your project when you create it (expand the advanced settings). If your project is already created, you can also activate Networking in the project settings (also expand the advanced settings).

client and server

The networking API in microStudio relies on a client / server model. Client and Server share the same code base, which has a few practical advantages, such as allowing to use the same gameplay or physics classes and functions in both the client and the server.

The game client works exactly like any other microStudio game, following the usual init / update / draw pattern.

The game server initialization and main loop rely on the two new functions:

• serverInit() called by the engine when the server starts
• serverUpdate() called 60 times per second, always

server code

You will usually create a new Server instance in serverInit(), and assign it to a global variable, here server. Then implement serverUpdate() to check for new connections, client messages, closed connections and such. In this simple example, we will only check for new connections and print them:

serverInit = function()
  server = new Server()
end

serverUpdate = function()
  for connection in server.new_connections
    print(connection)
  end
end

client code

On the client side, we will use the ServerConnection class to connect to the server ; once the connection is created, our game will just display the status of the connection:

init = function()
  connection = new ServerConnection()
end

draw = function()
  screen.clear()
  screen.drawText(connection.status,0,0,20,"rgb(255,255,255)")
end

run server

After enabling Networking for our project, a dedicated "Server" toolbar shows up in the UI. You can click on the "Start" button there to start your server. One button starts the server within the editor, the other starts the server in a new browser tab. We recommend to start the server within the editor for simplicity.

run clients

You can then start your game (client) the usual way, using the "Run" button. On the Run toolbar, notice that the last button "Detach run window" has changed: when Networking is active, this button allows you to start and use multiple instances of your game client. Start several clients and watch the server console. Try stopping the server and see how the clients are affected.

send messages

The client and the server can send messages to each other, using connection.send(). You can send structured data using objects or lists, such as in:

connection.send(object
    command = "set_position"
    x = 100
    y = 200
  end)

process incoming messages

The client should check for new messages in its function update():

update = function()
  for message in connection.messages
    print(message)
  end
end

The server proceeds the same way, from its serverUpdate() function. Note that the message received by the server is an object with two fields, connection, which is a reference to the connection (or client) which sent the message and data which actually holds the message:

serverUpdate = function()
  for message in connection.messages
    print("new message received from connection: " + message.connection.id )
    print(message.data)
  end
end

Export

Your full game, client + server can be exported in two easy steps:

1. Your game client can be exported using the usual feature, to HTML5, Windows, Linux, macOS, Android (you can also make an iOS build from the HTML5 export with Cordova)
2. Your game server can be exported with the dedicated option ; you will get a standalone NodeJS app ready to be installed on your own server!

So excited to hear this 😀

Thanks the step by step helped me understand it better!

EDIT: ... I should have looked in the python section of the tutorials.

I can't seem to make this work with python. While trying the simple example I get an "Error" statement in the console. I also can't start the server.

# EDIT: Here is the correct code from tutorial if anybody was looking for it
# server
def serverInit():
  global server
  server = Server.new()
  print("Server start")

def serverUpdate():
  for connection in server.new_connections:
    print(f"New connection : Player {connection.id} is {connection.status}")
    connection.send({"msg": "Welcome player "+str(connection.id)})

# client
def init():
  global connection
  connection = ServerConnection.new()

def update():
  for message in connection.messages:
    print(message.msg)

def draw():
  screen.clear()
  screen.drawText(connection.status,0,0,20,"rgb(255,255,255)")

@MRBDR this is because instancing JavaScript classes from Python uses a specific syntax, please check the documentation "More Programming Languages" / "Python" ; the class instancing is all explained and as a bonus there is even a simple example of a networked app! :-)

How would I detect if a player/user disconnects?

@VoiderYT On client side:

  if connection.status != "connected" then ...

On server side:

serverUpdate = function()

  (...)

  for client in server.closed_connections
    print("this client was just disconnected:")
    print(client)
  end

See https://microstudio.dev/documentation/Networking/