APIを叩いて遊べるArtifactsMMOのはじめかた

この記事は[某企業2024年度新卒Advent Calender 2024](https://adventar.org/calendars/10291) 5 日目の記事です！
# イントロダクション

タイトルにある**Artifacts**は、**最大5人のキャラクターを同時に操作できるサンドボックスMMORPG**で、 キャラクターはモンスターと戦ったり、資源を集めたり、アイテムを作ったりと様々なことができます。

ですが、このゲームの面白いところは<font color="Red">**APIをたたいてキャラクター操作のすべてを自動化することができる**</font>という点です。

APIの使い方を覚えたい、またはドキュメントの読み取り力を鍛えたいという方におすすめです。

# この記事で分かること

この記事ではArtifactsの始め方を解説します。

Artifactsは現時点（2024/12/05）でチュートリアルの日本語翻訳版がないので、この記事内で、ゲームをプレイするために必要な最低限のことを日本語解説したいと思います。

APIリファレンスなどはこの記事では訳したり、また、APIの使い方などの細かな解説はしません。

公式の英語のドキュメントを自分自身で読解して活用することで、英語ドキュメントの読み取り力を鍛える一助になると思います。

# 事前準備

まずは、Artifactsにアカウント作成を行い、ログインしてゲーム内のプレイヤーの作成を行いましょう！

### 1. アカウント作成
ArtifactsMMOと検索するか、以下のURLからでもAtrifactsのサイトに飛べます。
[Artifacts](https://artifactsmmo.com/)
Sign upを押して必要な情報を入力してアカウントの作成を行いましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500510/48542cbf-65a5-8418-a526-c60702df5dea.png)

アカウント作成を行うとトークンが生成されます。
今後APIリクエスト時にこのトークンが必要になり、アカウント画面で確認することができます。

![image (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500510/2e4fa4c8-02bb-3530-8d4a-4204c29ff56c.png)

:::note warn
トークンは、リクエスト時にサーバーがあなたを識別するために使用されます。 他の人に知られないように管理してください。
:::
### 2. キャラクターの作成

![image (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500510/1b2e6acc-6d2f-9361-aa4f-baba06139759.png)

Charactersをクリックすると自分のキャラクター一覧が表示されます。最初はすべての枠がEmptyとなっていると思うので、Createボタンを押して1体作成してください。

![image (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500510/2a432cbb-bd65-973b-359e-011a5007a06f.png)

1体作りました。

これで事前準備はおわりです。playを押せばゲームがスタートします。

# ゲームの進め方

## ゲーム画面

ゲーム画面では、API実行によるキャラクターの動作を確認したり、ゲーム内の情報を確認することができます。

この章ではクライアント画面の説明をざっくりとしたいと思います。

詳しくは公式ドキュメントを参照してください。

![image (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500510/380b0ad7-ac6d-3c28-1391-58ac8950634f.png)

### 右上について

#### Help
    
ゲームのさまざまなコンセプトが載ったガイドが表示されます、ここでは操作のためのAPIについては説明されないため、Artifacts APIの使い方を知りたい場合は、公式ドキュメントを参照してください。
    
#### Code Editor
    
Code Editorボタンをクリックすると、Javascriptのコードエディタが開きます。
    
:::note warn
Firefoxはこのエディタを完全にサポートしていないため Chrome、Brave、EdgeなどのChromiumベースのウェブブラウザを利用してください。
:::
    
### 左上について

左上にはログ、つまりキャラクターが行ったすべての行動が表示され、ログをクリックするとすべての詳細が表示されます。

## APIをたたいてゲームをプレイしてみる

実際にAPIを叩いてキャラクターを移動させてみたいと思います。

今回はArtifacts上で用意されているJavascriptのコードエディタをつかって、Javascriptでコードを書いてみようと思いますが、VScodeなどの他のエディタでも、またはJavascript以外の言語でも、コードを書いて実行すればプレイできます。

コードエディタを開くとすでにindex.jsファイルが一つ保存されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500510/aeb33f0a-884b-fea7-b829-f879b2558ac1.png)

内容を見てみると、既にプレイヤーを移動させるコードの基本的な例が記載されているようです。
このコードを少しだけいじって移動させてみます。
変更点は、token、character変数の中身と、リクエストのbody部分のみです。
```jsx
//Use node index.js in the terminal for execute the script.
//Warning: Firefox does not fully support the editor. Please use a chromimum-based web browser such as Chrome, Brave or Edge.
//This script is a basic example of a player's movement. You can load other examples by clicking on "Load example".
const server = "https://api.artifactsmmo.com";
//Your token is automatically set
const token = "****";//ここは前述の、アカウント作成時に生成されたトークンを入れます（自動で入力されていましたが）
//Put your character name here
const character = "kuwa";// ここは動かしたいキャラクターの名前を書いてください
  
async function movement() {
      
  const url = server + '/my/' + character +'/action/move';
  const options = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json',
      Authorization: 'Bearer ' + token
    },
    body: '{"x":0,"y":1}' //キャラクターを移動先の座標を指定します
  };
  
  try {
    const response = await fetch(url, options);
    const { data } = await response.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
  }
  
movement();
```
エディタの下にターミナルがあるので、以下のコマンドを実行して上記スクリプトを実行します。

```jsx
node index.js
```
### 実行前
![image (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500510/10c6c5ef-b41f-ae55-c45d-8be4f15e2cc5.png)
デフォルトでは、キャラクターはマップの(0,0)の位置にスポーンしていますが...

### 実行後
![image (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500510/5bfba61a-ad24-485e-7856-e3a8e34b343c.png)

ちゃんと(0,1)の座標に移動しました！

右上のログにも出力されています。

![image (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500510/647949c5-7abf-70c3-3099-e8be8b489355.png)

# おわりに

今回はArtifactsを始めるために必要な最初の手順や、画面の説明をざっくりと行いました。今回は試しにキャラクターの移動を行うAPIを叩いてみただけですが、モンスターと戦ったりアイテムを使ったり、この他にもやれることは膨大にあります。あとはクライアント画面や[APIリファレンス](https://api.artifactsmmo.com/docs/#/)、[公式ドキュメント](https://docs.artifactsmmo.com/)をみて、操作方法やできることを確かめながら自分なりにプレイしてみてください！