カテゴリー: Animation Fundamentals
-
Input設計とは？ループと状態に統合する入力管理の基本構造
← Prev Next → これまでの流れ： そして今回。 「ユーザーの操作を、どうやってゲーム側に伝えるのか？」 ここを設計します。 ❌ よくある初心者パターン 一見問題なさそうですが、これには大き…
-
Canvasで完成させるゲームループ設計｜Fixed Time Stepと描画統合
← Prev Next → 1.JavaScriptアニメーションを「本格描画」に進化させる これまでの記事で、 までやりました。 ここまでで実はもう「ゲームループの骨格」は完成しています。 今回はそ…
-
Interpolation（補間）とは？Fixed Time Stepを滑らかにする最重要技術
← Prev Next → 1.Fixed Time Stepを滑らかに見せる最後のピース #09 Fixed Time Step の記事で Fixed Time Step を導入しました。 ここで問…
-
状態管理統合（State Management）アニメーションを「構造」にする
← Prev Next → ここまでで、私たちはこういうものを作ってきました。 でも、まだ1つ問題があります。 1.問題：処理が全部1つの中にある 例えばこんなコードになっていませんか？ 動きます。で…
-
Fixed Time Stepとは？フレームに左右されない時間制御の作り方
← Prev Next → これまでの記事で、 を学んできました。 ここで出てくる疑問がこれです。 「フレームレートが変わったら、ゲームの速さも変わらない？」 実はその通りです。 1.なぜ問題が起きる…
-
ループ設計パターン比較：壊れないアニメーションの作り方
← Prev Next → #07 アニメーション設計まとめ では「アニメーション設計の全体像」を整理しました。 今回は一段階踏み込みます。 ループは“どう書くか”で安定性が変わります。 同じ&nbs…
-
JavaScriptアニメーション設計の基本構造まとめ
← Prev Next → ここまで、 を学んできました。 でももしかすると、 「結局どう組み立てればいいの？」 と感じているかもしれません。 今回は、JavaScriptアニメーションの“全体構造”…
-
cancelAnimationFrameの正しい使い方と設計パターン
← Prev Next → 1. まずは結論 requestAnimationFrame は「動かす」ための関数でした。では 止めるときは？ 👉 それが cancelAn…
-
フレームレートとは？60fpsの仕組みとパフォーマンス最適化
← Prev Next → アニメーションが「なめらか」に見えるとき、裏ではある数字が動いています。 それが フレームレート（fps） です。 今回は、 を、できるだけやさしく整理…