
2022 年 3 月 23 日、GDC にて[AWS GameKit](https://aws.amazon.com/jp/gamekit/)が発表され、UnrealEngine 用のプラグインがリリースされました。

AWS には Web サービスや、モバイルアプリなどのバックエンドとして使用できる多数のオンラインサービスが提供されていますが、
実際に使うにはそれなりに各サービスの仕様や API に習熟した上で自分で組み合わせる必要があります。
使ってみるととても便利なのですが、誰にでも簡単に…とは言い辛いのもまた確かでした。

ゲームでよく使われるオンラインサービスはユーザー認証、アイテムやゲーム内通貨の管理、プレイ記録、プレイヤーデータのクラウド保存、実績など
ある程度限られており、ゲーム用のオンラインサービスに特化したサービスを提供する会社も多数あります。
AWS GameKit はそのオンラインサービスを開発者自身の AWS アカウント上で構築することができる開発キットです。
AWS 上に構築する以上、運用費は AWS アカウントに請求が来ることになりますが、他社が提供するゲーム用オンラインサービスを使うより費用は割安になることが期待されます。
(※具体的に比較した訳ではないです)

この記事では、AWS GameKit for UnrealEngine プラグインを使い、identity(ユーザー認証)のサンプルを使って実際に構築した様子を解説します。
すでに AWS の各サービスを使っている方から見ると何でもない内容ですが、これから AWS アカウントを作って試そうと考えている方には
このサンプルを使うと何が起きるのか多少は把握できるようになると思います。

# UE4 プロジェクトの作成

まずはプラグインを組み込んだ UE4 プロジェクトを作成します。ざっくりとした手順は以下のようになります。

- UE4 を起動し、適当なテンプレートでプロジェクトを作成します。(プロジェクト名を TestAwsGameKit とします)
- ファイルメニューから C++ファイルを追加し、C++プロジェクトにします。
- UE4 エディタをいったん終了し、プロジェクトのフォルダに Plugins フォルダを作成し、[AWS GameKit のページ](https://aws.amazon.com/jp/gamekit/)から
  `AwsGameKitUnrealPlugin_Windows_v1.0.0.zip` を展開して作成される AwsGameKit をフォルダを Plugins フォルダの下にコピーします。
- TestAwsGameKit.uproject ファイルを選択して右クリックメメニューから Generate VisualStudio Project を実行します。
- TestAwsGameKit.sln ファイルをダブルクリックして VisualStudio を起動し、TestAwsGameKit を選択した状態で右クリックメニューからリビルドを実行します。
- ビルドが完了すると、VisualStudio を終了し UE4 エディタを起動します。

# AwsGameKit プロジェクト作成

プラグインが使用できる状態になると、プロジェクト設定に AWS GameKit のカテゴリが出てきます。
Game title・Region を設定し、事前に作成しておいた IAM の AccessKey・SecretKey を入力、Submit をクリックします。
![Project設定からAwsGameKitプロジェクト作成](/assets/blog/ue4-aws-gamekit/01_ProjectSettingsCreateProject-caption.png)

続いて Identity And Authentication の項目までスクロールし、Create をクリックします。
![Project設定のログインサーバ作成画面](/assets/blog/ue4-aws-gamekit/02_ProjectSettingsIdentity-caption.png)

使用状況に応じて課金が発生する可能性があるため警告が表示されますが、
構築自体に料金はかかりませんし、お試し程度の使用であれば無料枠に収まるため料金はほとんどかかりません。
ここは Deploy をクリックします。
![課金が発生するかも警告](/assets/blog/ue4-aws-gamekit/03_AwsCostDialog-caption.png)
構築のため 10 分程度待たされますが、完了すると以下のような表示になります。
![Project設定のログインサーバ作成済み](/assets/blog/ue4-aws-gamekit/04_ProjectSettingsIdentityDeployed.png)

# ユーザー認証サンプルの実行

UE4 プロジェクトにあるプラグインのサンプルを実行してみましょう。
コンテンツブラウザから
`AwsGameKit Content`のフォルダを開き、`BP_AwsGameKitIdentityExamples` をレベルにドラッグ&ドロップします。
(`AwsGameKit Content`フォルダがない場合は、View Options から表示されるメニュー内の Show Plugin Contents にチェックを入れましょう)
![UE4コンテンツブラウザのプラグインアセット](/assets/blog/ue4-aws-gamekit/05_PluginContents.png)

Play In Editor 実行すると、サンプル UI が表示されます。
![PlayInEditor実行](/assets/blog/ue4-aws-gamekit/06_PlayInEditor.png)

Register から新たにユーザーを作成します。ユーザー名、メールアドレス、パスワードを入力して Call API をクリックして下さい。
![新規ユーザー登録](/assets/blog/ue4-aws-gamekit/07_Register.png)

この時 AWS の Cognito 管理コンソールを見てみると、ユーザーが登録されていることがわかりますが、未検証になっています。
これはメールアドレスが実在するか確認する手続きが終わってない状態なので、このままではログインすることはできません。
![Cognitoユーザー未検証](/assets/blog/ue4-aws-gamekit/07_CognitoUserPool_NotVerified.png)

Register の時に入力したメールアドレスにメールが届いているはずなので、そちらに書いてある確認コードを入力します。
検証が完了すると成功のステータスが返ってきます。

![ログインメール確認成功](/assets/blog/ue4-aws-gamekit/07_Confirm_Success.png)

Cognito 管理コンソールでも検証済みになっている事がわかります。
![Cognitoユーザー検証済](/assets/blog/ue4-aws-gamekit/07_CognitoUserPool_Verified.png)

早速ログインしてみましょう。

![ログイン成功](/assets/blog/ue4-aws-gamekit/08_Login_Success.png)

ログイン中に GetUser の API を実行すると、ユーザー情報が表示されます。

![ログイン中のユーザー情報取得](/assets/blog/ue4-aws-gamekit/09_GetUser.png)

ログインしていない時はどうなるでしょうか。Logout 実行後、GetUser を実行するとエラーが表示されます。

![ユーザー情報取得失敗](/assets/blog/ue4-aws-gamekit/09_GetUserFailed.png)

Developer Log を開くと、ログインしていないというエラーが返ってきている事がわかります。
![ユーザー情報取得失敗時のログ](/assets/blog/ue4-aws-gamekit/09_GetUserFailedLog.png)

# 作成された AWS サービス

作成される AWS サービスは多岐にわたります。その一部を見てみましょう。

ユーザー情報を取得する GetUser という API のエンドポイントです。
実際の処理は Lambda で行なわれますが、外部から呼べる REST API にするために必要になります。
![ApiGatewayのエンドポイント](/assets/blog/ue4-aws-gamekit/04_APIGateWay.png)

APIGateWay は無制限に呼び出されると費用がかかるため、この GetUser は Cognito でユーザー認証済みの時のみアクセスできるよう制限がかかっています。
![ApiGatewayの認証](/assets/blog/ue4-aws-gamekit/04_APIGateWay_Authorizer.png)

API の使用状況を監視する CloudWatch ダッシュボードです。
![CloudWatchダッシュボード](/assets/blog/ue4-aws-gamekit/04_CloudWatchDashBoard.png)

ユーザー認証を行う Cognito ユーザープールです。
![Cognitoユーザープール](/assets/blog/ue4-aws-gamekit/04_CognitoUserPool.png)

認証済みのユーザーに AWS サービスの使用を許可する権限する Identitiy プールです。
![CognitoIdentityプール](/assets/blog/ue4-aws-gamekit/04_CognitoIdentityPool.png)

ユーザー情報を保存する DynamoDB です。
![DynamoDB](/assets/blog/ue4-aws-gamekit/04_DynamoDB.png)

Cognito の API を呼び出した時、また GetUser を呼び出した時に実行される処理を登録しておく Lambda です。
![Lambda関数](/assets/blog/ue4-aws-gamekit/04_Lambda.png)

Lambda で実行するスクリプトは Python で書かれていますが、実行に必要なライブラリ環境を Lambda レイヤーという仕組で登録しています。
![LambdaLayer](/assets/blog/ue4-aws-gamekit/04_LambdaLayer.png)

これらのサービスは CloudFormation で自動構築されますが、その設定ファイルや、Lambda で実行するスクリプトや実行に必要なレイヤーはいったんクラウドストレージ S3 にアップロードされます。
![S3](/assets/blog/ue4-aws-gamekit/04_S3.png)

# まとめ

UE4 からボタン一発でユーザー登録からメールアドレス確認、認証までの一通りの処理を行うログインサーバの構築ができることがわかりました。
自分の用途に合わせてカスタマイズしていくには… `Plugins/AwsGameKit/ResourcescloudResources` の下に
CloudFormation などのバックエンドの設定ファイル・スクリプトがありますので、そこを修正していくことになると思います。
分量がかなりあるので読むだけでげんなりしますが、逆に AWS を使っている身にとって[きちんと設計された](https://aws.amazon.com/jp/blogs/gametech/aws-gamekit/)
バックエンド構築例の設定ファイルやソースコードとしてとても参考になるのではないかと思います。


UE4 AWS GameKit 使ってみた


[前回の記事](/posts/20210119-ue4-python-module)で自作モジュール構成を変更した時はエディタの再起動が必要、と書いていましたが、実は自作モジュール側の修正を反映させる度に必要でとても面倒でした。

修正を即座に反映する方法はこちらになります。明示的にモジュールを Reload してやればいいんですね。

```python
# main.py
import sys
import os
sys.path.append(os.path.dirname(__file__))

import libs.foo              # この行を追加
import importlib             # この行を追加
importlib.reload(libs.foo)   # この行を追加

from libs.foo import Foo

f = Foo()
f.print()
```

この情報は Qiita の記事[【Python】モジュールをアンインポート・リロードする](https://qiita.com/Krypf/items/68c1f7c26efd084cf207)を参考にさせて頂きました。
そもそも Reload が必要、という所に気がついたのは[前回の記事](/posts/20210119-ue4-python-module)のこの記述がきっかけでした。

> どうも前回のモジュール解決情報が残っているようです…。

(自分で書いておきながら…なぜ半年以上気がつかない orz)


UE4 の Python で自作モジュールの修正を即座に反映する方法


Python を書くとき、1 つの Python スクリプトに全部書いてしまうと身通しが悪くなるので、
普通はこちらのようにモジュールを分けて書いていくと思います。

```python
# libs/foo.py
class Foo:
  def print(self):
    print("Foo!")

# main.py
from libs.foo import Foo

f = Foo()
f.print()
```

コマンドラインから実行すると、こんな感じで実行されます。

```batch
D:\Path\To> python main.py
Foo!
D:\Path\To>
```

ところがこれを UE4 の Python プラグインで実行すると、なぜかエラーになることがあります。
(正確には、Python スクリプトを `/Content/Python` の直下に置いている時は動作しますが、それ以外のフォルダに置いている時にエラーになります)

```batch
LogPython: Error: Traceback (most recent call last):
LogPython: Error:   File "D:/Path/To/main.py", line 1, in <module>
LogPython: Error:     from libs.foo import Foo
LogPython: Error: ModuleNotFoundError: No module named 'libs.foo'
```

なんでやねん!
UE4 で Python のツールを書き出した時はこの問題が解決できず、あきらめて全機能を 1 つの Python スクリプトの中に書いていました…。

だいぶ後になってわかったのですが、以下のように書けば動きます。
インクルードパスに、実行対象の Python スクリプトが置かれているフォルダを追加します。

```python
# main.py
import sys
import os
sys.path.append(os.path.dirname(__file__)) # この行を追加
from libs.foo import Foo

f = Foo()
f.print()
```

めでたしめでたし…とは行きません。Python を書くのに VSCode をお使いの方には凄まじいトラップがあります。

![VSCodeがお勧めする強烈なトラップ](/assets/blog/ue4-python/vscode-formatter-dialog.png)

フォーマッタ autopep8 を入れますか?とお勧めしてくるので言われるがままにインストールしてしまうと、

```python
# main.py
from libs.foo import Foo
import sys
import os
sys.path.append(os.path.dirname(__file__))
  :
```

こんな感じで勝手に順序を入れ替えてしまい、動かなくなります。
(autopep8 はダメですが、ついでにお勧めされる black, yapf では問題ありません)

ということで、無事 UE4 の Python でもモジュールが使えることがわかりました。

また、モジュール構成を変えた時はソースに問題がなくても `No module named '...'` の
エラーが出ることがあります。
逆に、明らかにモジュールが解決できない状況でもエラーが出ないことがあり、頭を悩ませることがあります。
そういうときは、UE4 のエディタをいったん終了し、再実行しましょう。
ちゃんと追い切れてないんですが、どうも前回のモジュール解決情報が残っているようです…。

上記は UE4.26(Python3.7)で確認しました。UE4.25 以前(Python2.7)では、
上記構成に加えて `libs/__init__.py` というファイル名で空ファイルを作っておく必要があります。


UE4 の Python で自作モジュールを使う方法


UE4 では Python プラグインを有効にすると、Python スクリプトから UE4 の機能を触ることができ
レベル配置やアセット操作の自動化に役立てることができます。

Python ファイル(\*.py)の置き場所は、公式サイトの
[Python を使用したエディタのスクリプティング](https://docs.unrealengine.com/ja/ProductionPipelines/ScriptingAndAutomation/Python/index.html)
に書かれています。

```
Unreal Editor では、この sys.path リストにいくつかのパスを自動的に追加します。
- プロジェクトのフォルダの下にある「Content/Python」サブフォルダ。
- Unreal Engine のメインのインストール フォルダの下にある「Content/Python」サブフォルダ。
- 有効にした各プラグインのフォルダの下にある「Content/Python」サブフォルダ。
- ユーザー ディレクトリ内にある「Documents/UnrealEngine/Python」フォルダ。たとえば、Windows 10 では「C:/Users/Username/Documents/UnrealEngine/Python」となります。
```

それでは `/Content/Python` の下に置きましょう…と行きたい所ですが、そうは問屋が下しません。
UE4 でツールを書く時は、通常 Editor Utility Widget で GUI を作ってそこから Python スクリプトを実行するため、
ツールのフォルダにまとめて置きたい…と思うのが人情というものです。
Python スクリプトだけ `/Content/Python` の下に置く…というのは後々混乱の元です。

実は、Python スクリプトはプロジェクト内の自由な場所に置くことができ、どこでも実行することができます。
種明かしは以下の Execute Python Command ノードを見て下さい。

![EUWからPythonの実行方法](/assets/blog/ue4-python/python-from-euw.png)

`Python Command` のピンの文字列に、 `/Content/Python` からの相対パスで実行したい Python スクリプトを指定してやれば良い訳です。
この例では `/Content/Utility/Foo/Python/main.py` に実行したい Python スクリプトがある、という想定をしています。
`/Content/Python` フォルダ自体が存在しなくても問題ありません。


UE4 の Python ファイルを任意のフォルダに置く方法


このブログのソースコードが読みにくかったので `rehype-prism` を入れてシンタクッスハイライトされるようになりました。
あと画像がオリジナルサイズのまま埋め込まれていたのでページの横幅に調整、`react-medium-image-zoom` でクリック時に拡大するようにしました。
こういう感じの ZoomImage コンポーネントを作って、

```tsx
// ZooomImage.tsx
import React from "react";
import "react-medium-image-zoom/dist/styles.css";
import Zoom from "react-medium-image-zoom";

export const ZoomImage = function ZoomImage(props) {
  return (
    <Zoom>
      <img {...props} width="100%" />
    </Zoom>
  );
};
```

MDX 変換時のコンポーネントリストに加えました。

```tsx
// [slug].tsx
    :
import { ZoomImage } from '../../components/ZoomImage'
    :
const components = {
  a: Link,
  YouTube: dynamic(() => import('react-youtube')),
  Head,
  img: ZoomImage // ここに追加
}
    :
export default function PostPage({ source, frontMatter }) {
  const content = hydrate(source, { components })
  return (
    :
  )
}
```


Prism でシンタックスハイライト


このブログの React UI コンポーネントには[MaterialUI](https://material-ui.com/)を使用しています。
Next.js 公式のブログのひな形サンプル
[blog-starter-typescript](https://github.com/vercel/next.js/tree/canary/examples/blog-starter-typescript)
は[TailwindCSS](https://tailwindcss.com/)を使っており、HTML の構造に引きずられることなく好きなスタイルが自分で作れる…!
という事を売りにしているようなのですが、今はデザインに凝りたくはないので
コンポーネント並べるだけでええ感じにしてくれるらしい MaterialUI を使うことにしました。
(お気づきの方もおらえるかも知れませんが jQuery 時代は bootstrap 大好きでした…)

Next.js のプロジェクトに MaterialUI を組み込む方法はこちらの記事を参考にしました。

- [Next.js プロジェクトで Material UI を使う方法](https://tech.playground.style/javascript/next-material-ui/)
  また、この記事から MaterialUI の[Next.js 用のサンプル](https://github.com/mui-org/material-ui/blob/master/examples/nextjs/)へのリンクが
  貼られており、[Link コンポーネント](<(https://github.com/mui-org/material-ui/blob/master/examples/nextjs/src/Link.js)>)がいい感じでしたのでこのブログにも導入してみました。

ところが、`npm run dev`では一応表示されるのに`npm run build`を実行すると下記エラーが出てしまいなかなか解決できませんでした。

```bash
Type error: Type '{ children: Element; as: string; href: string; passHref: true; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<any>'.
  Property 'children' does not exist on type 'IntrinsicAttributes & RefAttributes<any>'.

  29 |           {posts.map((post) => (
  30 |             <li key={post.filePath}>
> 31 |               <Link
     |                ^
  32 |                    as={`/posts/${post.filePath.replace(/\.mdx?$/, '')}`}
  33 |                    href={`/posts/[slug]`}
  34 |                    passHref
```

色々検索していると、型の不一致の時に出るエラーのようです。
React.forwardRef() のジェネリクスにちゃんと正しい型を指定すれば…と思ってさらに色々検索した結果、
こちらの issue に書かれていたコードが参考になりました。

- [[Link] typescript error Property 'component' does not exist on type IntrinsicAttributes](https://github.com/mui-org/material-ui/issues/16846)

以上を踏まえて、Link コンポーネントの[ソース](https://github.com/mui-org/material-ui/blob/master/examples/nextjs/src/Link.js)の
拡張子を tsx に変更した上で、以下の修正を行いました。

## 修正前

```tsx
const NextComposed = React.forwardRef(function NextComposed(props, ref) {
  :
});
  :
export default React.forwardRef((props, ref) => <Link {...props} innerRef={ref} />);
```

## 修正後

```tsx
import { Link as RouterLink, LinkProps as RouterLinkProps } from "react-router-dom";
  :
const NextComposed = React.forwardRef<HTMLAnchorElement, RouterLinkProps>(function NextComposed(props, ref) {
  :
});
  :
export default React.forwardRef<HTMLAnchorElement, RouterLinkProps>((props, ref) => <Link {...props} innerRef={ref} />);
```

これで npm run build が通るようになりました。React.js/Next.js なんもわからん…。


Typescript+Next.js+MaterialUIで詰まる


このサイトは 2015 年 8 月から RazerCMS という CMS を使って運営していたのですが、
いつの間にか公式サイトや github リポジトリが消失、どこかでメンテされている様子がなかったので、
今回[Next.js](https://nextjs.org/)で作り直してみました。
github の private リポジトリに commit・push して Vercel で Deploy する方式です。
以前から Markdown でブログ記事を書くのと、ビルド時の生成できびきび動くサイトに
あこがれていたのでそれがようやく叶いました。

Markdown の変換には MDX を使用しています。
YouTube の埋込方法を探していてこちらの記事を参考にしました。

- [Blog を MDX, Next.js で作成した](https://reona.dev/posts/20200605)

Markdown に React コンポーネントが貼り付けられるようになるそうで、自作コンポーネントの実験場には最適ですね!
今はまだシンプルすぎるサイトですが、そのうちせわしなくなるかも知れないのでよろしくお願いします。


ブログをリニューアルしました


新年も明けてだいぶ経ちますが(汗)。

前の記事から丸一年、昨年とタイトルが同じというのもどないやねんというツッコミはさておき…昨年一年何があったかを思い出しながら書いて行きたいと思います。

まず、[unityroom への作品投稿](https://unityroom.com/users/e1sn0m4j6rd8lgau72yp)をきっかけに(アカウントだけ作って 10 年以上放置していた) [twitter アカウント](https://twitter.com/tomotaco)の運用を始めましたが、そのままゲーム制作アカウントとして常用するようになりました。もくもく会やゲーム開発者の交流イベントへの参加も増え、twitter 上で他のゲーム開発者の方々とのつながりができた事はとてもありがたい出来事でした。名刺に unityroom の自分のプロフィールページへのリンクを QR コードで印刷すると、名刺を渡したその場で遊んでもらえるのがとても近未来的です。
ゲーム制作では、2015 年に Unity 触り始めて最初に作りかけて放置していた、[球面シューティング](https://unityroom.com/games/sphericalshooterdemo)の開発を再開しました。一昨年(2017 年)に unityroom に参加しようとミニゲームをいくつか作った結果、

- ParticleSystem が[シューテイングの弾処理に使えそうな目途が立った](https://github.com/tomotaco/LandingSpace)こと
- [射線軸から見ても破綻しないビーム](https://github.com/tomotaco/ParticleSystemBeamShaderDemo)ができたこと
- 球面上の移動処理の不具合で詰まっていたのが「Collider の位置がずれてて箱と干渉していた」という実にしょうもないバグだった事が判明したこと orz

などのきっかけが重なり再び前進できるようになりました。詰まった当時にやろうとしていた事をそのまま続行していたら、今でも前に進めないままだったことでしょう。そういう意味では unityroom と一週間ゲームジャムで色々新しいことに手を出せたのは良かったと思います。まさに一週間ゲームジャムやもくもく会が自分の開発を前進させるきっかけになっています。(一週間ゲームジャム駆動開発…と書くと聞こえは良いですがまあちょっとスパンが長過ぎる…)

球面シューティングはなんとかリリースに向けて作り切りたい、という覚悟で有料アセットにも手を出しています。(特に[hasu さんの曲](https://audiostock.jp/artists/19614/audios)に惚れ込んで購入した曲がまだ組込できていないのがなんとも悔しいです…早く組み込んでリリースしないと他のすごいゲームに使われてしまう…!)
その一方で一週間ゲームジャムへの参加は球面シューティング止まりで、それ以降はネタを思いついて終わり、プロジェクトを作って終わり、という体たらく orz こっち方面も何とかしたいですね…。
あと、[Unity ゲーム開発者ギルド](https://scrapbox.io/unity-game-dev-guild-pr/Unity%E3%82%B2%E3%83%BC%E3%83%A0%E9%96%8B%E7%99%BA%E8%80%85%E3%82%AE%E3%83%AB%E3%83%89)と[運営者ギルド](https://qiita.com/organizations/admin-guild)にも参加しました。膨大な参加者が各自の分報チャンネルに独り言をつぶやくと、色んな方面からツッコミやら反応がもらえるのが実に楽しいです。運営者ギルドは Web サービス開発運営する人のコミュニティで、私はまだ何もリリースしてないのですが、参加をきっかけに前から一度つくってみたいネタの具体化に向けて少しずつ動き出しました。
仕事方面では相変わらず C++(Qt)中心ですが、途中少しだけ Python3 と Javascript(ES6)に手を出せたので楽しかったです。パッケージ・ライブラリの充実振りが素晴らしく、ちょこっと画像処理するなら Python3 一択のような気がしますね…。ただ自分の脳内キャッシュの狭さから Python 書くと ruby を忘れ、ruby を書くと Python を忘れてしまうのがなんとも悔しい…
そんな感じですが今年もよろしくお願いします。


あけましておめでとうございます


新年も明けてだいぶ経ちますが(汗)。

一昨年の年末に入手した GPD WIN を活用しようと色々試した一年でした。
Unity や Visual Studio 2017 を入れて通勤電車内でのプログラミングをしたかったのですが、どうにも 5.5 インチの画面では文字が小さ過ぎた orz TabletPro の TouchZoomDesktop を入れていたのでピンチズームはできるものの、毎回拡大縮小を繰り返すのはとっても非効率、キーボードも親指ポチポチなら十分できますが、タッチタイプするには小さすぎる…ということで、結局テストプレイ機に落ち着きました。その一方で、飲み会の席などで自作ゲームのデモ機としてはとても優秀で大活躍しました。

昨年の 1 月 15 日に GPD Pocket のクラウドファンディングも開始されました。小さいノート PC 好きとしてダイレクトに心に訴えるものがありましたが、GPD WIN をまともに使いこなしてない状況で次に走るのは…と思い踏みとどまりました。Atom x7 が続くのもどうかな…と思っており、次は Core m プロセッサのタブレット(Teclast X5 Pro)かノート PC にしようと考えていたこともありましたので…。

代わりに Gemini PDA に出資してしまった… Psion 好きとしては見過ごせませんでした orz これは今月出荷が始まるそうなので楽しみにしています。今のスマホが壊れかけ(液晶パネルがはがれかけてきてて粘着テープで仮固定中)につき、早く来てくれ～`(>_<;)`

あと、9 月 11 日の Banggood.com の創立記念セールで Cube Thinker が時間限定で安売りされたのでポチってしまいました。Core m3-7y30 で 8GB, SSD256GB のスペックで〇〇〇ドルを切る衝撃的な価格…。Acer Aspire V5-171 の後継機種としてノマド開発に大活躍しています。見た目以上にずっしり来るので持ち運ぶのは大変ですが(汗)

来週 15 日から GPD WIN2 のクラウドファンディングが始まるようですが、高そうなのと Core m 機は買ってしまったので様子見のつもりです。

プログラミングの方では、Unity でミニゲーム開発に手を出し、Unityroom に 2 作品ほど投稿しました。Unity 1 週間ゲームジャムというイベントのおかげです。お題が公表されてから 1 週間という限られた期間のため、つまづきや迷いは片っ端から切り捨てて行かないと完成しません。その一方で、未完成のままの投稿も OK・遅刻も上等(遊んでくれる人は少なくなるだけ)、という緩さがとてもありがたかったです。完成できたのはこの緩さのおかげと言っても言い過ぎではありません。Python3 にもちょっとだけ手を出してみましたが OpenCV との親和性が高くてありがたかったです。画像処理が目的なら Python が一番ですね…。

あとは、コワーキングスペースやネットカフェでの作業も色々試してみました。ネットカフェの閉鎖空間も集中できていいのですが、コワーキングスペースのオープンで適度に会話が聞こえてくる空間の方がどちらかというと自分には合っているようです。



毎月下旬、大阪の天六でインディーズゲーム開発者やゲーム業界の方々が集まって呑んだりプレゼンしたりして過ごす[ichi pixel](https://ichipixel.net/)というイベントがあります。こういうイベントへの参加は週末だと家庭の事情で難しいのですが、平日だと仕事帰りにふらっと寄れてむしろ参加しやすいのかも知れない…と気づいてしまった(といっても仕事の都合でいつも参加できる訳ではありませんが)ので、ちょうど 16th の時(2017/11/22)が unity1week 用に制作してた時期だったので、開発途中の版を見せに行ってきました。
ただ、前記事の通り制作を始めてから 2 日しか経過していなかったため、この時点でてきていたのは

- 自機の動きは一通りできていたものの、パーティクルは噴射のみ
- ブロックは 4 つ固定
- ゴールはあるが未実装

と完成からはほど遠いものでした。
当時の様子が[こちら](http://ichipixel.net/2017/12/10/959)になります。...なんというか、まさしく未完成品を見せて神妙な顔をさせるテロ行為...ホントすいませんでした orz
まあそれでも操作感に感想をくれる方もいて大変ありがたかったです。
それにしても GPD WIN はデモ機に最適ですね。知り合いでない人にいきなり声を掛けるのは相当敷居が高かったんですが、GPD WIN を持っていると何人もの人が声をかけてくれて、ついでにテストプレイも頼むことができました。

17th の時(2017/12/19)は完成版を見せに行ってきました。今度は色々感想も聞けて参考になりました。
ちまちまブロックを移していくより激突して隙間に...の攻略にはすぐに気付いてくれた辺り、さすがなゲーム制作者の集いやな...と感心しました。


16th, 17th の ichi pixel に参加しました


unityroom に 2 つ目のゲームを投稿しました。

[着陸スペース](https://unityroom.com/games/landingspace)

<YouTube videoId="CEgJGpFbhfk" />

相変わらず Unity の物理エンジンに全面的に乗っかったゲームですが、今回は Rigidbody2D を使ってみました。プリミティブの Cube や Cylinder を飛ばしていますが、追加直後は 3D 版の Rigidbody や Collider がアタッチされているので、これを削除して 2D 版のものをアタッチし直す必要があります。これをしておかないと、衝突時せずすり抜けてしまうので注意が必要です。

# 制作履歴

Mercirual のコミットログと記憶を参考に当時の制作状況を振り返ってみると、こんな風になりました。

|            |                                                          |
| ---------- | -------------------------------------------------------- |
| 2017/11/18 | Unity 京都スペシャル 2 の後に製作開始                    |
| 2017/11/22 | 16th ichi-pixel で未完成版を魅せて回る(別記事に書く予定) |
| 2017/12/12 | 初版公開                                                 |
| 2017/12/19 | 最終版(効果音付き)公開                                   |

unity1week のお題「[space](https://unityroom.com/unity1weeks/7)」の期間が 2017/11/13 ～ 19 なので...いやはやほぼ 1 ヶ月の大遅刻ですね…いやはや面目ないです orz

# 動機

Unity には [ParticleSystem](https://docs.unity3d.com/Manual/class-ParticleSystem.html) (Shuriken) という便利なモジュールがありますが、これに対して私は当初エフェクト専用なのかな?という印象を持っていました。しかし、ゲームデザインに関わる処理に使えるかどうか、具体的にはシューティングの弾などに使えるかかどうか知りたかったので、実際に使って確認してみました。結果、OnParticleCollision() というイベントハンドラがあるのでまったく問題ありませんでした。
あとは完全に自分の趣味です。Xbox360 の Xbox Live Indies Game に [Superspace](https://youtu.be/g6ct2OOOcBQ) というゲームがありましたが、自機からワイヤーを垂らしてブロックを運ぶ、という基本的な挙動はこれのパクリです…。そもそもこの手の慣性操作のアクションシューティング(海外では Cave Flyer というジャンルで呼ばれているらしい)そのものが大好きでして、精密な操作が要求される場面でコントロールし切る自分カッケーと悦にひたりつつも、外部からの何でもない攻撃や障害物が迫ってきて軽くパニックになる緊張感がたまりませんでした。
当初はそういうものを作りたいと思っていたのですが…実際に出来上がってみたものは、激突してブロックが舞い上がった隙間に潜り込む戦略が一番タイムが短縮できるようです...どうしてこうなった。(いや自機の体力を設定せず無敵にしたせいですね…とほほ)
技術的(Unity 的)な動機としては、Unity ゲーム制作で必要とされる要素(タイトル・設定・ランキング等)やアセット(後述)を一通り経験しておきたかった、というものがあります。

# 雑感

ランキングを実装しているうちに、ゴール時のスクリーンショットを撮ってランキングに掲載してみたくなった、効果音が欲しいとの声に応えて付けたくなった、などの脱線もありましたが、それらも含めてやりたかった事は一通り実現できたので自分としてはとても満足しています。
制作途中の版でも人に見せたことでモチベーションが維持できました。どういうゲームかもわかってもらえない状況で反応が薄いのはしょうがないと思いますが、見せないよりはよっぽどよかったです。あと GPD WIN はデモ機に最高。
製作中の作業は、基本的に寝る前の 1 ～ 2 時間程度(たまに早朝も)で、何かに詰まった時は無理せず睡眠を優先し通勤途中にネットで調べものなど行いました。基本スローペースではありますが、小さなことでも問題が 1 テーマずつ片付いていくのはとても楽しい経験でした。
使用アセット
使用したアセットは以下の通りです。

- [Zenject Dependency Injection IOC](https://assetstore.unity.com/packages/tools/integration/zenject-dependency-injection-ioc-17758)
  Singleton の他、今夏は Factory や MemoryPool(オブジェクトプール) も含めてがっつり使ってみました。Validation (Shift+V) が通るまではエラーがわかりにくくて苦難の道のりですが、それを乗り越えると実感できる [Inject] の手軽さは手放せません。
- [UniRx - Reactive Extensions for Unity](https://assetstore.unity.com/packages/tools/integration/unirx-reactive-extensions-for-unity-17276)
  自機やメニューなどほぼ全ての制御はこちらをつかって書きました。強力なイベントフィルタリングや Reactive Property のおかげで if ブロックを使うことなく、すっきり書くことができました。
- [LINQ to GameObject](https://assetstore.unity.com/packages/tools/integration/linq-to-gameobject-24256)
  メニューのフェードイン・フェードアウト処理の際に例えば「名前が Button で始まる GameObject の Button コンポーネント」だけを選び出す必要があり、そのような場面でこれを使うと 1 行でかけてとても重宝しました。
- [DOTween (HOTween v2)](https://assetstore.unity.com/packages/tools/animation/dotween-hotween-v2-27676)
  メニューのフェードイン・フェードアウト処理に使いました。1 行で書けるため多用してしまった…。大玉ドリブルの時は Update() 内で状態変化からの経過時間からアルファ値を求めて毎フレームセットしていた事を考えると、ずいぶんと楽できました。
- TextMesh Pro (Unity2018.1 以降、PackageManager からインストール形式に変更されました)
  メニューやランキング・設定・スコア等の全ての文字表示に使いました。当初、項目が増えるたびにテキストファイルからフォントを生成するようにしていましたが、途中で面倒になり[こちらの記事](https://qiita.com/thorikawa/items/03b65b75fa9461b53efd)のようによく使う文字を全て登録してしまいました。
- [PLAY Animation Importer for Unity](https://assetstore.unity.com/packages/tools/modeling/play-animation-importer-for-unity-24500)
  [とてかん CG](https://cganime.jp/totekan/)・[PLAY Animation](https://doga.jp/PLAY/) のパーツアセンブラファイルを Unity に取り込む拙作のプラグインです。Cube と Cylinder しか使ってないように見えますが、実は自機のみ角の取れた立方体でして、このプラグインで取り込みました。
- [Recorder](https://assetstore.unity.com/packages/essentials/unity-recorder-94079)
  今回も動画撮影に使用しました。uGUI や効果音も録画さえるようになり使い勝手が良くなりました。
  この他、以下のソースコードを一部改修して使用させて頂いています。
- [unityroom-tweet](https://github.com/naichilab/unityroom-tweet)
  unityroom に投稿された作品から結果等をツイートするサンプルです。2017.2 対応を行いました。
- [Leaderboard For Unity WebGL](https://github.com/NCMBMania/LeaderboardForUnityWebGL)
  Nifty Cloud Mobile Backend を使ったランキングのサンプルです。2017.2 対応、Zenject 対応、ランキング登録項目にスクリーンショット画像を追加、などの対応を行いました。

Unity に直接関係ありませんが、以下のツールも使用しました。

- [Bfxr](https://www.bfxr.net/)
  chiptune っぽい効果音の作成で重宝しました。ランダム生成で基本で、気に入ったものが出るまでひたすらクリックしてました…。
- [Sound Engine Free](https://soundengine.jp/)
  効果音の調整に使用しました。カットしてフェードインまたはフェードアウトするだけでしたが…。

なお、Unity 2017.2 用のプロジェクト一式を [github](https://github.com/tomotaco/LandingSpace) で公開中です。Unity をお持ちの方はよかったらお手元でビルドしてみて下さい。


unityroom 投稿ふたたび


半年ほど前、Unity の WebGL ビルドを公開するサイト unityroom にて 1 週間ゲームジャム というイベントが開催されていたので投稿してみました。

[Unity ちゃんの大玉ドリブル](https://unityroom.com/games/unitychanbigballroll)

まあ 1 週間も遅刻したのですが orz

<YouTube videoId="7Bbgkke8r68" />

もとは Unity 公式の玉転がしチュートリアルの玉移動から改造していく形で始めたのですが、玉を SD キャラに置き換えてモーションを適用するところは素晴らしく簡単にできてしまい、そのあたりはさすが Unity だと思いました。上記サイトでも(主に SD キャラの可愛さのおかげで)好意的なコメントを頂き感謝しています。

使用したアセットは以下の 3 種類です。

"Unity-chan!" Model (走る・旋回しながら走る・ジャンプのモーション、アフィリエイトリンクにつきご注意下さい)
Optimize, SD Kohaku-Chanz!(SD キャラの各モデル、アフィリエイトリンクにつきご注意下さい)
Zenject Dependency Injection IOC(コンポーネント間の依存関係を踏まえて生成管理するライブラリ、アフィリエイトリンクにつきご注意下さい)
ちなみに上記の動画を撮るために、プロジェクトを 2017.1.1 にアップグレードし Unity 本家が提供している Recorder アセット (β 版) を使ってみました。
アップグレードすると zenject の Source/Editor/Testing/ZenjectIntegrationTestFixture.cs 内でコンパイルエラーがでました。
#if UNITY_5_6 (2 個所)を#if UNITY_5_6_OR_NEWER に変えれば良いようです。(2017/12/23 追記; 現在はこの修正は不要です)

また、YouTube に上げてから気付いたのですが、なぜか uGUI (タイトルや「準備はいい?」「残念」等の文字」) が動画に記録されてないようですね…orz β 版なので多少の不具合には目をつぶっても、アセットを追加 →Tool/Record/Video メニューから Recorder のダイアログを表示 → 録画の解像度・形式・保存先等を設定 →Start Recording の数ステップで録画できてしまうのでこのお手軽さは魅力的です。

…で何で今頃になってこんな記事を投稿したのか? それはもちろん Unity Affiliate のテストのためです… unityroom で公開したゲームのページに使用したアセットへのリンクを貼るとバウチャーコードがもらえるらしい、という例の企画に乗ってみたかっただけなのです。失礼しました…orz


unityroom に自作ゲームを投稿しました


先日作った Esc・F1 ～ F12 のみのスクリーンキーボードですが、既存のソフトの設定でできるようです。作ってみてから気づくあたりが残念の極みですが…。

- [TouchMousePointer](https://www.lovesummertrue.com/touchmousepointer/ja-jp/)
  タッチ操作でマウスカーソルを操作するソフトですが、Ctrl・Alt 等のボタンを表示する補助パネル機能があります。寄付で追加されるボーナス機能により、このカスタマイズが簡単にできるようですね。

- [FloatingButton](http://www.trifoliumstudio.com/floatingbutton)
  キーのボタンを自由に設置できるソフトです。グループパネル内に整理して並べることも可能。お絵かきソフトのショートカット用に作られたようです。

今のところ、タッチ操作によるマウスカーソルの操作は必須なので TouchMousePointer のカスタマイズで対応することになりそうです…。


すでにあった模様


昨年末に Windows8.1 タブレットを購入しました。 BayTrail-T の安い 7.9 インチの中華タブレット [Teclast](http://www.teclast.com/) [X89Win](http://akafudatengoku.com/products/detail.php?product_id=6064) です。一緒に Bluetooth キーボード型ケース [HB045](http://akafudatengoku.com/products/detail.php?product_id=6062) も購入し、装着して小さなクラムシェル型ノート PC (しかも英語配列!) として使うことを目論んでいましたが、大きな落とし穴がありました。

このキーボード、Esc やファンクションキーがありません。他の Bluetooth キーボードのように Fn キーを押しながら最上列の数字キーを押すと入力できるだろう…とタカをくくっていたら明るさ・ブラウザ・検索等が割り当ててありました。よく確認しなかった自分が悪いのですが orz もともとは iOS/Android 用でしょうから Esc やファンクションキーはまず使わないんでしょうね…。こちらとしては、ファンクションキーは VisualStudio 等の IDE のデバッグ実行で必要なため、結局このキーボードはお蔵入りとし、ただのタブレットとして使っていました。

一方、Windows8.1 にはスクリーンキーボード(Soft Input Panel と言うらしい)が内蔵されていて、設定によりフルキーボードを出すこともできます。これはこれでなかなか使いやすくて重宝していました。タッチ操作であるが故に画面内の一部が覆い隠されてしまう事だけが唯一残念な点。そんな中、これをカスタマイズして ↑ のキーボードに欠けているキーだけを出すようにできれば幸せになれるのでは…と気づいてカスタマイズの方法を探っていましたが、どうやらなさそうです。そして次に思いついたのがスクリーンキーボードの自作でした。

ということでインストールしたばかりの VisualStudio2015 を使い、WPF でせこせこと書いてみました。せっかくなのでソースコードごと github で晒しておきます。

- [ScreenKeyboardEscFn](https://github.com/tomotaco/ScreenKeyboardEscFn) (ソースコード、VisualStudio2015 Community 用)
- ScreenKeyboardEscFn-bin-20150910.zip (実行ファイル、 .NET Framework 4.5 以降)

参考にしたのはこちらの[記事](http://web.archive.org/web/20160701134906/http%3A%2F%2Fsturnus.hateblo.jp/entry/2014/07/09/231530)で公開されていたソースコードです。とりあえず押されたボタンに応じて keybd_event() を飛ばすだけです。また、キーボードのウィンドウを消してもタスクトレイのアイコンから再表示できます。終了したい場合は同じくタスクトレイのアイコンのメニューから選んでください。

![スクリーンキーボード](/assets/blog/screen-keyboard/ScreenKeyboardEscFn-small.png)

…ちなみに実用性はこれから確認します(汗)。


Escとファンクションキーだけのスクリーンキーボードを作ってみた


(2020 年 12 月現在、razorCMS の公式サイト・github リポジトリが消失しているため当時の一部リンクが再現できていません)

このサイトは[さくらのレンタルサーバライト](https://www.sakura.ne.jp/lite.html)を利用しており、データベースには[SQLite](https://www.sqlite.org/index.html)しか使用できません。

そのため Wordpress など有名所の CMS を入れるには[一工夫](http://nomu.skr.jp/2013/02/sakura-wordpress-sqlite/)が必要になります。ただ結構重かった印象があったので他の CMS を探してみたところ、razorCMS が面白そうなので入れてみました。(選定にあたってこちらの[記事](http://tryit.x-sys.net/p123.html)を参考にさせて頂きました)

いつものようにアーカイブを展開して FTP でアップロードするほか、気を付ける必要があったのは以下の 2 点です。

PHP のバージョンを 5.3 以降にする。(最新の 5.6 で問題ありません)
あらかじめ.htaccess の「Options」の行を削除する。(/.htaccess と/rars/.htaccess の 2 箇所あることに注意)
これで [自分のサイト URL]/login にアクセスするとログイン用のダイアログが出現します。こちらに書かれている通り、管理者のユーザー・パスワードは決め打ちなのでイタズラされる前に変更しておきましょう…。


tacoworks 活動記録(next.js版)