介绍
migl-gameloop 是一个基于 webgl 的游戏循环库。它提供了以下特性：
- 真正的游戏循环, 它能够在当前最大的游戏循环中保持良好的帧速率
- FPS 卡顿处理
- 时间管理器, 时间缩放
- 带有回调的游戏循环器
安装
migl-gameloop 可以通过 npm 安装：
npm install --save migl-gameloop
使用
使用 migl-gameloop 需要在您的项目中使用 webgl，如果您还没有配置过 webgl，可以参考 webgl。
使用场景
当你的需要更加精细地控制绘图时，你可以选择使用 migl-gameloop。
代码示例
一个简单的示例：
import { GameLoop } from 'migl-gameloop';
const loop = new GameLoop();
loop.start(100, (time) => {
const delta = time.delta;
console.log('delta', delta);
});在这个例子中，我们创建了一个游戏循环，以每秒100帧的速度运行，每次运行的时候都回调一个函数，函数接受一个 time 对象， time.delta 是当前帧和上一帧之间的时间差。
实现一个基本的游戏
现在我们来做一个简单的游戏：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
----- ------ - ---------------------------------
----------------------------------
------------ - ------------------
------------- - -------------------
----- -- - ---------------------------
----- -------- - -
--------- ---- ----------------
------- ---- -----------------
------- ---- ------------------
---- ------ -
----------- - ----------------- - ---------------- - ----------------
-
--
----- -------- - -
---- ------ -
------------ - --------- ---- ---- -----
-
--
-------- --------------------- --------- --------- -
----- ------------ - -------------- ----------------- ----------
----- -------------- - -------------- ------------------- ----------
----- ------------- - -------------------
------------------------------ --------------
------------------------------ ----------------
------------------------------
-- --------------------------------------- ---------------- -
--------------------- -- ---------- --- ------ -------- -----------------------------------------
------ -----
-
------ --------------
-
-------- -------------- ----- ------- -
----- ------ - ----------------------
----------------------- --------
-------------------------
-- ------------------------------- ------------------- -
----------------- ----- -------- --------- --- -------- ---------------------------------
------------------------
------ -----
-
------ -------
-
----- ------------- - --------------------- --------- ----------
----- ----------- - -
-------- --------------
---------------- -
--------------- ----------------------------------- ------------------
--
----------------- -
----------------- ------------------------------------ ---------------------
---------------- ------------------------------------ -------------------
-
--
----- ------- - ----------------
-------- --------------- -
----- -------------- - ------------------
------------------------------ ----------------
----- --------- - -
---- ----
----- ----
---- -----
----- -----
--
------------------------------
--- ------------------------
----------------
------ -
--------- ---------------
--
-
-------- ------------- ------------ -------- -
------------------ ---- ---- ----- -- ----- -- ------ ----- ------
------------------- -- ----- ----------
------------------------- -- ------ ----- -------
------------------------ -- ---- ------ ------- --- ------
---------------------------- - ---------------------
----- ----------- - -- - ------- - ---- -- -- -------
----- ------ - --------------------- - -----------------------
----- ----- - ----
----- ---- - ------
----- ---------------- - --------------
----------------------------------
------------
-------
------
------
----- --------------- - --------------
-------------------------------
----------------
------ ---- -------
-
----- ------------- - -- -- ----- ---------- -------- -- - ------
----- ---- - ---------
----- --------- - ------
----- ------ - --
----- ------ - --
------------------------------ ------------------
-----------------------
-------------------------------------------
--------------
-----
----------
-------
--------
---------------------------
--------------------------------------------
-
-----------------------------------
--------------------
----------------------------------------------
------
------------------
--------------------
---------------------------------------------
------
-----------------
-
----- ------ - --
----- ----------- - --
-------------------------------- ------- -------------
-
-
----- ---- - --- -----------
-------------- ------ -- -
----- ----- - -----------
-------------------- -------
------------- ------------ ---------
---这里我们定义了一个 GameLoop 循环，每次在刷新之后都会回调 drawScene 函数，该函数用于更新游戏场景。
在 drawScene 函数中，我们定义了在帧的开始时清空画布，启用深度测试等。然后，使用 WebGL 选择这个应用程序的程序，bindArray 设置缓冲区等。最后，我们执行 drawArrays 命令来绘制一个等边四边形。
结论
migl-gameloop 可以帮助开发者更好地管理游戏循环，控制帧率，提高游戏性能。通过使用 migl-gameloop，开发者可以轻松地实现游戏循环，改善游戏体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f451d8e776d08040f43