# 【SvelteでRPGゲーム開発】コントローラーをコンポーネント化してスプライトを操作してみる |p2>2023/02/122023/02/14{1}「requestAnimationFrame」{3}requestAnimationFrameさえ理解すれば、他のテクニックはまだ何とか分かる{1}コントローラー風のSvelteコンポーネント

@@@% /tx[1]{説明} <%- RPG風マップでネコ(？)を動かすだけの実験プログラムです。画面下にあるコントローラーからの操作が有効になります。現状は十字キーで上下左右に動くのみです。 -%> - - - ## Svelteでコントローラー風コンポーネントを準備する今回も[前回の内容](/blog/92#part-h2-0)を終えたあとの続きとして開発作業を進めていきます。 Svelteプロジェクトの構成(のnodejs等の設定ファイルは除く)は前回から以下のようにしてみます。 ※新規追加するファイル/フォルダには`☆`、内容を修正するファイルには`○`で示します。 ```shell Svelteプロジェクト(で今回説明するのもの) . ├── index.html └── src ├── App.svelte ├── app.scss ├── main.ts ├── components │ ├── player.svelte │ ├── title.svelte │ └── controller.svelte☆ └── lib ├── models.ts └── GameStage.svelte○ #(その他のファイルは省略) ``` ということで`controller.svelte`というコンポーネントファイルが新しく追加になります。いきなり完成品を丸々とお見せしますが、ファイルを追加したら、まず以下のように実装してみてください。 ```ts controller.svelte

``` なお、素のデザインなしのコントローラーでも良かったのですが、せっかくですので以下のサイトで紹介されている「スーパーファミコン風コントローラー」のスタイルを参考にレトロな雰囲気にさせていただきました。 [参考｜CSSでスーパーファミコン風のコントローラーを書いた](https://qiita.com/idaida_idaida/items/47e07c27b08426e46f16) このSvelteコンポーネントの実装で重要なことは、|px>{1}「親子関係にあるSvelteコンポーネントでの子から親へ向かうイベントの受け渡し」 export let cursorHandler: (dir: number, state: number) => void; //...中略 //...中略 //...以降略 ``` 今回で言えば、ゲームのメインエンジンである`GameStage.svelte`が親にあたり、このコンポーネントに従属する形で`controller.svelte`が子コンポーネントとして利用されています。子コンポーネント上でイベントが発生した場合、親コンポーネント側で用意した関数(ハンドラ)を子に渡すことで、コンポーネント間のイベントの共有が可能です。上の例でいうと、子コンポーネント側に`export let cursorHandler ...`の関数型の変数を外部から注入できるようにしておきます。そして、親コンポーネントにハンドラ(`cursorHandler`)の実体を実装することで、子コンポーネントで発生したイベントを親側で取り扱うことが可能になります。ということで、`GameStage.svelte`側も以下のように修正しておきます。 ```ts GameStage.svelte(追加分のみ) //...中略 //👇HTML部にControllerコンポーネントを追加 // ... 各ボタンに対応したイベントハンドラも設定 //...以下略 ``` Svelteでコンポーネント間でイベントを共有するテクニックはいくつかあり、[以前説明していたような「bind:this」を使って子コンポーネントを直接操作する](/blog/76#part-h3-0-h2-1)こともできます。 &[link]~[76]~[article]~(1) `bind:this`属性は、`document.getElementById`等のDOMを直接操作するAPIで操作できる反面、Svelte的な洗練されたコードというよりピュアなJavascriptコードの作法に近くなるため、できればSvelteの`on:{イベント}属性`を利用から外れないほうがベターな書き方です。 - - - ## Svelteコンポーネントを右クリック禁止にする細かい修正として、コンポーネントをマウスクリックする際に、通常のブラウザの挙動のままだと、|px>{2}右クリックしたらメニューバーが表示されてしまう ... ``` Svelteの場合、`on:contextmenu|preventDefault`を設定するだけで、右クリックからのコンテクストメニューの表示尾を禁止してくれます。 !388*182*[3](__3.jpg) - - - ## Svelteコンポーネントでマウス操作中のテキスト選択を無効にするもう一つHTMLゲームを作るときに気をつけておきたいのは、マウスでテキスト文字を長押ししてみたり、テキスト上をマウスでドラッグしてみたりするような|px>{2}マウス操作でHTML中のテキストが選択されてしまう ... ``` 実際にこの対策の前後で、ゲーム中のテキストをマウスで操作してみると、 !533*364*[4](__4.jpg) というようにテキストは選択できないようになります。代替手段としては、cssスタイルからテキストを選択することもできます。先程の`onselectstart`を使ったテキスト選択無効化はかなり以前から使われた手法で、現在はむしろcssファイルからテキスト選択禁止にするやり方を紹介されている方が多いようです。例えば、ゲーム全体をテキスト禁止にしたい場合、ルートのスタイルファイルの`app.css`か`app.scss`に以下のように編集します。 ```scss app.scss //... #app { margin: 0 auto; padding: 12px; //👇追加 user-select: none; } ``` これもマウスによる要素中のテキストコンテンツをまるごと選択禁止にすることができます。ブラウザによっては`onselectstart`が時代遅れ(?)で効かない、ということもあるらしいので、現在はcssから`user-select: none;`を指定するほうがより有効な対策なのかもしれません。不安なら両方とも対策しておけば良いでしょう。 - - - ## iframeのリソースキャッシュを無効化するメタタグこちらはSvelteアプリとは直接関係はないのですが、最終的にSvelteアプリをウェブページの`iframe`タグに埋め込んで公開したり、スタンドアロンなSPAで配布したりする場合に設定しておきたい設定です。他のブログようなブラウザの画面の更新頻度がほとんどない用途とは異なり、HTMLブラウザゲームは非常に短い頻度で画像の生成や描画が切り替わります。標準のブラウザでは、読み込んだ画像やテキストデータ等はキャッシュとして裏で取り溜めてくれる機能が働いてくれるので、一度読み込んだウェブページにあるリソースを再度サーバーから取得する手間が省けてより高速に描画することができます。これがゲームアプリとなると、ブラウザ内部で常時計算処理されて生成される画像を高頻度で書き換えてブラウザに表示させる際に、キャッシュ機能が有効になっていることで描画が更新されないなど、おかしな挙動をする可能性があります。ということで、iframeでHTMLアプリをキャッシュなしで動作させるときのおまじないとして、`index.html`などのメインファイルのメタタグに以下のような属性を追加しておきましょう。 ```html index.html ...略 ...略 ...略 ``` ただし、jsファイルなどのスクリプトファイルはこの設定でもキャッシュしてしまうようなので、スクリプトの読み込みURL値にハッシュを組み込んだクエリ名を使うなどもうひと工夫必要となります。 - - - ## まとめ以上、今回はSvelteでゲームコントローラーを模したコンポーネントを作成して、スプライトを操作する方法を紹介してみました。この記事で説明したポイントを再掲すると、 ```text この記事のポイント 1. 親子関係にあるSvelteコンポーネント間のイベントの渡し方 2. ゲーム画面上のコンポーネントを右クリック禁止にする 3. ゲーム画面上の文字テキストの選択を禁止にする 4. iframeのリソースキャッシュを無効化するメタタグの書き方 ``` ということでした。今回の記事が理解できれば、Svelteゲームの開発の基本的な流れって、|px>{1}「コンポーネントを追加する→ハンドラを作成する」