2018/06/19

[JS]ゲーム内に重力を追加し自然なジャンプモーションを実装する(3パターンで実装)

アクションゲームになくてはならない要素、それはジャンプモーション!
今回はゲーム内に重力を加え、自然なジャンプモーションを実装する。

方法としては3通りあるので、それぞれ解説していく。

  • 三角関数(sin)を使う
    • 月面でジャンプしているようなふんわりしたモーション
  • 速度に加速度を足しこむ
    • 簡単で自然なジャンプモーション
  • 鉛直投げ上げの公式(y = v0t - 0.5gt^2)を使う
    • より自然界に近いジャンプモーション

2018/06/14

オフスクリーンCanvasにプリレンダリングし、描画内容を可視領域に表示する

Canvas APIを使ってブラウザゲームやアニメーションなど複雑な描画処理を行う場合、オフスクリーン(描画領域外)Canvasにプリレンダリングし、その内容を可視領域にあるCanvas要素にコピーし表示する手法がある。


利用シーン

たとえば15個の要素からなる背景があったとする。(下図参照)
可視領域内にあるCanvasにレンダリングしていると、1フレームごとに15回の描画処理が行われる。

それをあらかじめ背景用のオフスクリーンCanvasに描画しておいて、1フレームごとに可視領域内のCanvasにコピーして描画すると、背景の描画処理は1回ですむ。
負荷の高い描画処理が15→1回になることでパフォーマンス向上が見込めるという技だ。

2018/05/31

OpenFaaSでFaaS環境を用意しサーバーレスアーキテクチャを体験する

数年前から何かと「サーバーレス」がバズワードになっている。自分でサーバーを用意してAPIサーバーを立てて使うという時代から、人間はより本質的な部分に注力すべきという考え方からFaaS環境を使う時代に変わってきた。

ただ私自身、AWS LambdaやGCP Cloud Functionsなどのいわゆる「サーバーレス」というものを体験したことがない。それらのサービスは従量課金で一歩間違ったらクラウド破産しかねないため、その恐怖感もあったからだ。


しかしこのままでは時代の波に取り残されてしまうと思い、いろいろ調べたところOpenFaaSというOSSに出会った。

ということで、OpenFaaSを使って自分専用のFaaS環境を用意し、思う存分使ってみようと思う。


開発環境は以下のとおり。
  • CentOS@7.4
  • OpenFaaS@0.8.2
  • docker@18.03.1-ce
  • docker-compose@1.21.2

2018/05/28

[golang]goaを使ってAPIの設計・開発し、OpenAPIドキュメントを自動生成する

golangでAPIサーバーを開発したい!でも、何からやっていいかわからない。そんなときにはgoaがオススメだ。



goaの特徴


goaの最大の特徴はAPIデザインを書くとモック、クライアントツール、ドキュメントなどを自動生成できるところだ。

開発は以下のような手順になる。

  1. DSLでAPIデザインを書く
  2. goagen(コードジェネレーター)で自動生成する
    • クライアントのスケルトン
    • テストコード
    • CLIツール
    • OpenAPI仕様のドキュメント
  3. APIを実装する
  4. ビルドして実行する

このように人の手が入るのは「1.DLSでAPIデザインを書く」と「3.APIを実装する」だけだ。それ以外はgoagenというコードジェネレーターが自動的にやってくれる。

golang初心者の私でも、はじめて触ってから3時間くらいで動くAPIサーバーをつくることができた。


以下にgoaを使ってAPIサーバーを開発する手順をまとめていく。

2018/03/15

requestAnimationFrameの処理落ちをフレームスキップで対応する

ブラウザゲームやアニメーションを作るときなど、定期的に画面を再描画するときにはrequestAnimationFrameやsetInterval、setTimeoutが使われる。

当記事ではrequestAnimationFrameにフォーカスし、ブラウザゲームを開発する際に必要なフレームスキップ処理について紹介する。



requestAnimationFrameとsetInterval, setTimeoutは何が違うのか?


requestAnimationFramesetIntervalsetTimeoutには明確な違いがある。

requestAnimationFrameはブラウザの状態により実行間隔を自動で調整してくれるのに対し、
setIntervalsetTimeoutは時間どおりに実行するため、処理がすべて終わる前に次の処理が実行されてしまう。

そのため、ブラウザゲーム開発ではrequestAnimationFrameを使うことが多い。


ただ、わざとブラウザに負荷をかけたりバックグラウンドで実行させたりすると、描画を遅らせることができてしまう。このような処理落ちはゲームバランスを壊す要因になりうるため、フレームスキップ処理の実装が必要になってくる。


ということで、今回は処理落ちしたときにフレームスキップする方法を紹介する。