How to make a multiplayer online action game on Slack

This article is the 8th day article of Dwango Advent Calendar. Yesterday, @ mokumoku said, "A story about running a web page on server-side Swift. " was. Actually, I also write Swift at work (on the client side), and Swift is one of my favorite languages. I haven't written server-side Swift yet, so I decided to read the article and try it. Today's story is about Slack, Bot, and Python, which has nothing to do with Swift.

Story of a good night

One day, when I was watching our product Nico Nico Douga, I came across Interesting Video. When I saw an interesting commentator making, playing, and commenting on a game that uses bombs, I felt like this. "Ah, I also play a game where I put a bomb and fight against the enemy ~ ~" But at that time, I regret that I couldn't do it without having a game console.

The introduction has been lengthened, but this is the story of how I got the game to put bombs on multi-platform, environment-independent.

Platform called Slack

I wrote in When I implemented Shogi on Slack before that Slack is a very good platform. Slack is a very good platform that allows you to create games like the one you made last time, as well as bots as a new interface on your messages, as you can see in the recent popular ChatOps. I find it wonderful to have a platform that allows bots that operate as interfaces to other services, bots that operate as artificial intelligence such as Siri, and team members and community members to communicate with each other. Among them, Slack has a great UI and bot ease of creation _ (and a slightly quirky API) _, and I want to put something new on the message platform now! I think that it is the best product for those who think.

This time too, we adopted Slack as the platform for implementing the game.

How to make an online game on Slack

Graphics

Of course, Slack is not a game engine, so you can't draw pixels or render arbitrary images or polygons. In Shogi made last time, complicated board surface is displayed in an easy-to-understand manner by registering unique pictograms.

Let's take a look at the screen we want to implement this time. This image is a scene from the previous video. Screen Shot 2016-12-01 at 1.29.33 AM.png

It is a general two-dimensional map. It seems that one map chip can be represented by one pictogram. Also, the chips you need are walls, blocks, bombs, etc., and it seems that you can express them all with Unicode standard pictograms. It seems that you do not need to register your own emoji. Here is what you actually made a map by arranging pictograms. Screen Shot 2016-12-01 at 1.38.51 AM.png Yeah, it feels good. This is rendered by posting text like this to Slack.

Also, if the game status changes, you will need to redraw the screen. This can be resolved using Slack's chat.update API. It is also written in Slack as a Game platform, which is a bible when making games with Slack, but if you call the API too much, you will get caught in the API Limit. Please note that it will end up.

How to accept input from the player

Like a typical program, the game takes input, processes it according to the game logic, and then outputs it repeatedly. I mentioned the output part on Slack earlier, but what should I do with the input? You can get input from the controller in general games, or you can get keyboard input directly in PC games, but you can't do that on Slack. There are several options for achieving this.

  1. Receive input using chat
  2. Receive input using reaction
  3. Prepare a mechanism to accept input outside the Slack platform such as on the Web

For games that require real-time performance like this one, the method of using 2 reactions or the method of accepting input outside the Slack platform of 3 is suitable. This time I want to complete everything on Slack, so I will use the reaction of 2.

This game can be realized with 5 buttons of A button to move up / down / left / right and place a bomb. By placing a reaction button on the map that the bot itself can enter, it indicates to the user that the reaction can be used. Screen Shot 2016-12-04 at 8.51.17 PM.png

By using Slack's RTM (Real Time Messaging) API, you can add a reaction (https://api.slack.com/events/reaction_added). You will receive a Delete (https://api.slack.com/events/reaction_removed) message. This both means that the button was pressed. When you receive either of these messages, you can provide an easy-to-use UI on Slack by inputting the user who added (or deleted) the reaction and reflecting it in the game logic.

I tried to implement

So far, we've seen how to create an online action game on Slack, split into output and input. Here is the game that was actually implemented using the method introduced here. https://github.com/setokinto/slack-bomber

Those who want to actually use it can easily try it by using Docker. On a PC with Docker installed docker run --env API_TOKEN="<Your Slack Bot Token>" setokinto/slack-bomber Please replace API_TOKEN with the Bot Token actually obtained from Slack before executing. On the channel where the bot is @ bot-name start with @username (username is the username you want to join) To start with. Screen Shot 2016-12-05 at 12.21.32 AM.png I want you to work with various Slack teams.

As you progress through the game, it will look like this Screen Shot 2016-12-05 at 12.34.55 AM.png

In implementation

When you make an online game with Slack, Slack takes over all the network part, so you can concentrate on the game logic and develop it very easily. The method of making is almost the same as a general game, but you have to be careful only that the drawing performance is extremely low. In a typical game, it's normal to update the screen 30 or 60 times a second, but that's not possible with Slack. This time, the screen is updated about once every 0.6 seconds or 0.7 seconds. Because, as I wrote in the graphics section, there is an API Limit. Only that part needs to be carefully coded and designed.

Also, due to the low fps, operation mistakes occur frequently, and if it explodes once like POOR MAN, if the game ends, it will end before the battle starts, so we introduced a life system.

If you've read this article and want to create an online game on Slack, it's a good idea to think about the features of Slack and the features that are unique to Slack and easy to use.

Summary

Slack is a great platform for chatting and playing games. In addition, because the API is widely open to the public, it is possible to develop it, and I feel a great future in the future when various functions and services will be integrated into the software used by everyone called messages. Many other message services also expose their APIs. The Bot Platform is expected to be hot in 2017, so let's make a lot of things. Among various services, Slack is especially open to engineers and has a rich API. The API is a bit quirky, but it has enough features, so why not try creating something you like using Slack as a platform?

Recommended Posts

How to make a multiplayer online action game on Slack
How to make a slack bot
How to make a shooting game with toio (Part 1)
How to make a crawler --Advanced
How to make a recursive function
How to make a simple Flappy Bird game with pygame
How to make a deadman's switch
[Blender] How to make a Blender plugin
How to make a crawler --Basic
How to make a .dylib library from a .a library on OSX (El Capitan)
Slack --APIGateway --Lambda (Python) --How to make a RedShift interactive app
[Python] How to make a class iterable
How to make a Backtrader custom indicator
How to test on a Django-authenticated page
How to make a Pelican site map
Tweet in Chama Slack Bot ~ How to make a Slack Bot using AWS Lambda ~
How to make a dialogue system dedicated to beginners
How to make multiple kernels selectable on Jupyter
How to make a dictionary with a hierarchical structure.
I want to make a game with Python
How to make a QGIS plugin (package generation)
I read "How to make a hacking lab"
How to live a decent life on 2017 Windows
I tried to make a ○ ✕ game using TensorFlow
LINUX: How to make arrow keys correspond to 2,4,6,8 on a notebook without a numeric keypad
Make a squash game
Make a Tetris-style game!
How to deploy a Django application on Alibaba Cloud
How to install Linux on a 32bit UEFI PC
A memorandum on how to use keras.preprocessing.image in Keras
How to build a Django (python) environment on docker
How to make a Python package using VS Code
Basics of PyTorch (2) -How to make a neural network-
How to run Django on IIS on a Windows server
How to build a Python environment on amazon linux 2
How to use GitHub on a multi-person server without a password
How to use Fujifilm X-T3 as a webcam on Ubuntu 20.04
How to run a trained transformer model locally on CloudTPU
[Python] How to make a list of character strings character by character
How to build a new python virtual environment on Ubuntu
How to call a function
How to make a hacking lab-Kali Linux (2020.1) VirtualBox 64-bit Part 2-
How to mount a Windows 10 directory on Ubuntu-Server 20.04 on VMware Workstation 15
How to register on pypi
How to make a hacking lab-Kali Linux (2020.1) VirtualBox 64-bit edition-
How to make a Python package (written for an intern)
A note on how to load a virtual environment in PyCharm
How to hack a terminal
How to register a package on PyPI (as of September 2017)
Let's make a rock-paper-scissors game
How to make Python 3.x and 2.x coexist on Mac (I also included opencv as a bonus)
How to make AWS Lambda Layers when running selenium × chrome on AWS Lambda
How to make a string into an array or an array into a string in Python
A game to go on an adventure in python interactive mode
How to make a command to read the configuration file with pyramid
How to make a surveillance camera (Security Camera) with Opencv and Python
How to customize U-Boot with OSD335X on a custom board (memo)
How to build a Python environment using Virtualenv on Ubuntu 18.04 LTS
[C language] How to create, avoid, and make a zombie process
Spigot (Paper) Introduction to how to make a plug-in for 2020 # 01 (Environment construction)
How to make a unit test Part.1 Design pattern for introduction