フックを使ってみよう
何らかのイベントに合わせて関数を実行したい場合はhookを使いましょう。hook.onで登録したコールバック関数はイベントが発火した際に実行されます。
💡
応用編 (opens in a new tab) ではworld.addRenderActionやviewport.addResizeActionのように別々にコールバック関数を登録するようにしていましたが、negl では hook で全てのイベントを管理するようにしています。
フックの基本的な使い方
例えば、requestAnimationFrame のループ実行を行いたい場合には、hook.onを呼び出して、RENDER フックに対して、実行したい関数を登録します。
RENDERフックに関数を登録
const { hook } = negl;
hook.on(hook.RENDER, (world) => {
console.log(world.tick);
// ループ回数（world.tick）がログに出力されます。
});または、マウスの動きに合せて位置情報を取得したい場合には MOUSEMOVE フックを使用することができます。
MOUSEMOVEフックに関数を登録
const { hook, viewport } = negl;
hook.on(hook.MOUSEMOVE, (mouse) => {
console.log(mouse.getMapPos(viewport.width, viewport.height));
// 画面中央を原点としたマウスの座標がマウスの動きに合せてログに出力されます。
});フックに登録するコールバック関数の引数には、フックの種類によって異なる引数が渡ってきます。
どのようなフックの種類や引数に渡ってくる値はフック一覧で確認することができます。
- 💡より滑らかなマウスの座標を取得する方法
フックオプション
フックの第三引数にはフックオプションを渡すことができます。フックオプションではフック実行の優先順位などを定義します。
priority オプション
priority フック実行の優先順位を定義するためのオプションです。 priority が大きな値で登録されたフックから実行されます。
RENDERフックに関数を登録
const { hook } = negl;
hook.on(
hook.RENDER,
(world) => {
console.log("priority: 0");
},
{ priority: 0 }
);
hook.on(
hook.RENDER,
(world) => {
console.log("priority: 100");
},
{ priority: 100 }
);
// 以下の順番で連続的にログが出力されます。
// priority: 100
// priority: 0once オプション
フックの実行を一度きりとしたいときに once オプションを true に設定します。 once オプションが true のフックは一度実行されると自動的に削除されます。
hook.on(
hook.RENDER,
(world) => {
console.log(world.tick);
// 一回だけログが出力されます。
},
{ once: true }
);その他、type オプションもありますが、これはトランジション用のフックでのみ使用する項目となるため、[発展]スムーズなページ遷移を実装しようで紹介します。