
TypeScript の小ネタです。

react-native には[Platform-specific extensions](https://facebook.github.io/react-native/docs/platform-specific-code.html#platform-specific-extensions)という仕組みがあります。

これはファイルを拡張子を使って各プラットフォーム(Android/iOS)向けにモジュール参照先を切り替える仕組みです。

例えば次のように各プラットフォームごとにカスタマイズされたモジュールを作成したとします。

```ts
BigButton.android.ts;
BigButton.ios.ts;
```

これを利用するときは次のように呼び出すことができます。

```ts
import BigButton from "./BigButton";
```

ところが、これを TypeScript でやろうとした場合、モジュール参照先にファイルが存在しないためエラーとなります。

```ts
// TS2307: Cannot find module './BigButton'.
import BigButton from "./BigButton";
```

今日はこれを解消する方法の紹介です。

## .d.ts を作成して回避する

回避方法としては、次のような`BigButton`の型定義ファイルを作成するだけです。

```ts
// BigButton.d.ts
import * as ios from "./BigButton.ios";
import * as android from "./BigButton.ios";

declare var _test: typeof ios;
declare var _test: typeof android;

// ここでモジュールの型情報を提供する
export * from "./BigButton.ios";
```

これでコンパイルエラーは消えました。

この仕組みで興味深いことは、`_test`の Type を再割り当てすることで、各プラットフォームのコードの差異を検知することができることです。

試しにモジュールの中身を違うものに変えてみたところ、次のように差異があることを検知することができました。

> TS2403: Subsequent variable declarations must have the same type. Variable '\_test' must be of type 'typeof import("BigButton.ios")', but here has type 'typeof import("BigButton.android")'.

## まとめ

TypeScript のコンパイラの方でサポートして欲しいという要望があったようですがクローズされてしまったようです。
当分の間は上で紹介した方法で回避するしかなさそうです。

- [Allow passing additional SupportedExtensions to support React Native \.android and \.ios module loading · Issue \#8328 · microsoft/TypeScript](https://github.com/microsoft/TypeScript/issues/8328)

今回のトリックも上の Issue からいただきました。最初に思いついた人すごいですね。


TypeScriptでreact-nativeのPlatform-specific extensionsを型安心にする


今日は Roblox でセーブポイントを作ってみます。

セーブポイントとは、プレイヤーが死んだ時に任意の場所から復活できるものです。Obby(Obstacle course)と呼ばれる障害物を超えてゴールを目指すタイプのゲームにてよく見かけます。

完成形のプロジェクト構造はこちらです。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-save-point1.png)

今回は Workspace に Part を 4 つと ServerScript が 1 つです。

## セーブポイントをマップに配置する

まず、Workspace にセーブポイントを配置します。
セーブポイントは「SpawnLocation」を使います。SpawnLocation は下ようなギアのマークが付いているブロックで、プレイヤーはこの場所からゲームに参加します。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-save-point2.png)

今回は 4 つ配置します。
わかりやすいように`Checkpoints`というフォルダに格納して、それぞれの`Name`を 1 から 4 までつけます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-save-point3.png)

この画像では見えていないですが、すぐ横に触ると死ぬマグマ玉も置いています。

## スタート地点を設定する

プレイヤーがゲームに参加した時にどのセーブポイントから始まるかスタート地点を設定します。
今回は**①**の場所から始まるようにします。

ServerScriptService に`CheckpointScript`を作成します。

まず始めにセーブポイントのブロックを取得して、プレイヤーがゲームに参加した時に、セーブポイントの 1 つめをスタート地点に設定します。

`player.RespawnLocation`に SpawnLocation を設定すると、プレイヤーが死んだ時、設定された SpawnLocation から復活します。

```lua
local Players = game:GetService("Players")

-- セーブポイントのブロックを取得する
local checkPointFolder = game.Workspace.Checkpoints
local checkpoints = checkPointFolder:GetChildren()

local function onPlayerAdd(player)
  -- セーブポイントの1番目をスタート地点にする
  player.RespawnLocation = checkpoints[1]
end

-- プレイヤーが参加した時のハンドラ
Players.PlayerAdded:Connect(onPlayerAdd)
```

結果はどうでしょうか？

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-save-point4.gif)

4 番目のセーブポイントがスタート地点になっています。
どうやら、セーブポイントを`Name`の昇順で並び替える必要があるようです。

```lua
local Players = game:GetService("Players")

-- セーブポイントのブロックを取得する
local checkPointFolder = game.Workspace.Checkpoints
local checkpoints = checkPointFolder:GetChildren()

-- `Name`の昇順でソートする
local function sortFunction(a, b)
  return tonumber(a.Name) < tonumber(b.Name)
end
table.sort(checkpoints, sortFunction)

...
```

## セーブポイントに触れた時にスタート地点を変更する

セーブポイントに触れた時にスタート地点を変更してみましょう。
スタート地点を変更は、今のセーブポイントよりも先に進んだ場合のみ行うようにします。

まず、セーブポイントに触れた時の処理を作成して、これを全てのセーブポイントにループ文で設定します。

```lua
...

-- セーブポイントの設定処理
local function setUpCheckpoint(checkpoint)
  -- セーブポイントに触れた時の処理
  checkpoint.Touched:Connect(function(part)
    -- ここに実際の処理を書く
  end)
end

-- 全てのセーブポイントに設定する
for index, checkpoint in pairs(checkpoints) do
  setUpCheckpoint(checkpoint)
end

...
```

続いて、スタート地点を変更してみましょう。

まず、触れたのがプレイヤーかどうか判定してから、現在の復活地点を取得します。
もし触れたセープポイントが現在の復活地点より先の場合、スタート地点を変更します。

スタート地点を変更した場合にログを出力するようにしておきます。

```lua
...

-- セーブポイントの設定処理
local function setUpCheckpoint(checkpoint)

  -- セーブポイントに触れた時の処理
  checkpoint.Touched:Connect(function(part)

    -- プレイヤーかどうかを判定し、プレイヤーオブジェクトの取得する
    local humanoid = part.Parent:FindFirstChild("Humanoid")
    local player = Players:FindFirstChild(part.Parent.Name)

    if humanoid and player then
      -- 現在の復活地点を取得する
      local currentCheckPoint = player.RespawnLocation.Name
      -- セーブポイントの比較する
      if tonumber(checkpoint.Name) > tonumber(currentCheckPoint) then
        -- スタート地点を変更して、ログを出力する
        player.RespawnLocation = checkpoint
        print("RespawnLocation has been changed to " .. checkpoint.Name)
      end
    end
  end)
end

...
```

実際にセーブポイントに触れてみると、スタート地点が更新されていることがログで確認できます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-save-point5.gif)

実際に死んでみます。

セーブポイント 3 に触れた後で、マグマ玉に触れるとセーブポイント 3 から復活することができます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-save-point6.gif)

## まとめ

セーブポイントの作り方でした。
仕組みがわかると簡単ですね。

今日の内容だけでは、スタート地点がゲームの中に保存されていないため、プレイヤーが一度ゲームをやめるとスタート地点がリセットされてしまいます。
注意してください。


Robloxでセーブポイントを作る


今日はコインを拾うだけの簡単なゲームを作ってみましょう。

「**Debris(デブリ)**」というビルトインサービスを使って、ゲームフィールド上のランダムな場所にコインを発生させます。
Debris サービスは Roblox の中でも非常に有用なもので、これを使うことでゲームの中でアイテムやモンスターなどを自由に発生させることができます。

- [Roblox Developers: Debris](https://developer.roblox.com/api-reference/class/Debris)

完成形のプロジェクトはこちらです。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-money0.png)

## LeaderBorad を作成する

まず、今プレイヤーが持っているコインの総量を表示するための LeaderBoard を作成します。作り方はこちらを参照してください。

- [Roblox のリーダーボードを作成する | I am mitsuruog](https://blog.mitsuruog.info/2019/04/roblox-setup-leaderboard)

Script の名前は`LeaderBoardScript`として、ServiceScriptService の中に入れておきます。LeaderBoard に表示する名前は`Money`としておきましょう。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-money1.png)

## コインを作る

コインを作りましょう。Part の名前は`Money`とします。形は Cylinder か Ball を使えばいいと思います。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-money3.gif)

一度、Workspace 上でコインの Part を完成させてから、ServiceStorage に移動します。
ServiceStorage とは、Roblox のオブジェクトの格納庫のようなものです。注意点としては Server 以外からはアクセスできません。

## コインをゲームフィールド上に発生させる

では、コインをゲームフィールド上に発生させましょう。ServiceScriptService の中に`MoneyDropperScript`を作成します。

最初にコインの Part と`Debris`サービスを呼び出して使えるようにしておきます。

```lua
local money = game:GetService("ServerStorage").Money
local Debris = game:GetService("Debris")
```

続いて`while`ループの中でコインを複製してランダムな位置に配置させます。

```lua
...

while(1) do
  wait()
  -- コインを1つ複製する
  local clonedMoney = money:clone()

  -- マップの中の縦横-500〜500の中のランダムな位置に発生するようにする
  local positionX = math.random(-500, 500)
  local positionZ = math.random(-500, 500)
  -- 注意）y軸を100としているのは空から落ちてくるようにするため
  clonedMoney.Position = Vector3.new(positionX, 100, positionZ)
  clonedMoney.Parent = workspace

  -- Debrisサービスに追加することでマップ上に姿を表す
  Debris:AddItem(clonedMoney, 20)
end
```

`Debris:AddItem`の第 1 引数にはマップ上に出現させるオブジェクトを、第 2 引数にはオブジェクトの生存期間を設定します。上の例では**コインは 20 秒後に自動的に消えます。**

テスト実行するとコインが空から降ってくるようになりました。Debris サービス、超便利です。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-money4.gif)

## コインに触れたらお金が増えるようにする

最後にコインに触れたらプレイヤーのお金が増えるようにしましょう。
コインの Part(`Money`)の中に Script を作成します。名前は`MoneyScript`にしておきます。

基本的には、コインに何か触れたら実行されるイベントハンドラを作成し、触れたものがプレイヤー(`Humanoid`)だったら処理を続行させます。

```lua
local money = script.Parent

local function onTouched(part)
  local humanoid = part.Parent:FindFirstChild("Humanoid")
  if humanoid then
    -- ここに処理を書く
  end
end

money.Touched:Connect(onTouched)
```

では、コインに触れたプレイヤーのお金を増やして、回収されたコインを消滅させます。
お金は LeaderBoard の`Money`に格納されるので、LeaderBoard の値を更新する必要があります。

```lua
...

local function onTouched(part)
  local humanoid = part.Parent:FindFirstChild("Humanoid")
  if humanoid then
    -- プレイヤー名を取得する
    local playerName = part.Parent.Name
    local player = game.Players:FindFirstChild(playerName)

    -- LeaderBoardの値を更新する
    player.leaderstats["Money"].Value = player.leaderstats["Money"].Value + 5

    -- コインを消滅させる
    money:Destroy()
  end
end

...
```

テスト実行すると、コインに触れるとお金が増えていきます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-money5.gif)

## まとめ

簡単な Roblox ゲームの作り方でした。

面白いゲームを作るには、さらに何か面白い仕掛けが必要ですが、基本的な作り方は今日紹介した通りです。例えば、コインの中にプレミアムコインや爆弾を混ぜたりしたり、集めたお金でアイテムを購入できるようにすることで、もう少しゲームっぽくなると思います。


May, 2019

TypeScriptでreact-nativeのPlatform-specific extensionsを型安心にする

Robloxでセーブポイントを作る

Robloxで簡単なコイン拾いゲームを作る