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.

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. 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.

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. I want you to work with various Slack teams.

As you progress through the game, it will look like this

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?