@ fabi- play/ 引擎
一个小型二维引擎 Fabi 游戏 游戏:一个720个单元的舞台,图案,形状,文字,粒子, 在WebGL (1或2)或Canvas 2D上发音,声音,玩家的手和相声.
无
npm install @fabi-play/sdk @fabi-play/engine
import { connect } from '@fabi-play/sdk'
import { createEngine } from '@fabi-play/engine'
const play = await connect()
const engine = await createEngine({ play })
engine.stage.add(engine.avatars())
engine.start()
play.ready()
@fabi-play/sdk 是一个对等的依赖( 引擎用 SDK 的复制来绘制外观) 。 仅包括无害环境管理,类型.
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}解决 development 出口条件(开发中的网络和网络包装)
dist/index.development.js: 可读, 并带有开发检查( 当节点在之后使用时警告) destroy() 或者说
在节点池之后 release()) (中文(简体) ). 生产建筑 dist/index.js没有他们。 装入引擎源( 内置)
除非捆绑者定义 __DEV__ 作为 true。 。 。 .
脚本标签
先装上SDK,然后装上引擎,每个引擎都装上它的SRI散列
(单位:千美元)https://cdn.fabiplay.app/engine/<version>/integrity.json:
<script src="https://cdn.fabiplay.app/sdk/0.1.0/fabi-play.umd.min.js" integrity="sha384-…" crossorigin="anonymous"></script>
<script src="https://cdn.fabiplay.app/engine/0.1.0/fabi-play-engine.lite.umd.min.js" integrity="sha384-…" crossorigin="anonymous"></script>
<script>
FabiEngine.createEngine({ play: FabiPlay }).then((engine) => engine.start())
</script>
| 文件 | 什麽 |
|---|---|
fabi-play-engine.lite.umd.min.js | 建议:从SDK的脚本取出相机并平滑(全球) FabiEngine(中文(简体) ) |
fabi-play-engine.umd.min.js | 里面的东西 |
*.umd.js | 相同的,可读的,同时进行开发检查(对之后使用的节点的警告) destroy() 或游泳池 或一个游泳池 release()(中文(简体) ) |
fabi-play-engine[.lite].js | 经典脚本( IIFE): 设置 window.FabiEngine |
fabi-play-engine[.lite].d.ts | 脚本tag 游戏类型 (FabiEngine.Sprite, (...) (中文(简体) ) |
文档 : https://docs.fabiplay.app/engine/overview/ 页面存档备份,存于互联网档案馆。 。 。 .
手,指向,安全区
engine.hands() (级单位), engine.touched(node) 和环 engine.handMarkers() 手在那边
目标在协议中 aimPoint: 在电视或平板电脑(地平板电脑)上
录像,和以前一样;在电话上直立地保持engine.orientation === 'portrait'),其中相机图像小
手臂伸向整个舞台 所以手臂直上接近
顶部(y ≈ 0.15 × 720)和出臂到侧面,当相机失去手腕时被扣住300毫秒. 阿凡达人还在
从视图中抽取( e)engine.view),下为小. 游戏不需要更改;要取用身体本身,使用
SDK的车 toScreen(wrist)。 。 。 .
engine.safeArea 手机的口号 和家用酒吧的封面, 在部分的取景口({ top, bottom, left, right },每个0–0.25,一个电视上的0: 保持HUD和它的目标外出,例如:
y = engine.safeArea.top * 720 + 24。 。 。 .
过滤器
任何节点都可以通过过滤器:颜色过滤器,模糊和投影在WebGL和Canvas 2D上绘制相同;自定义 遮蔽器仅为WebGL. 每个工厂都是自己的出口,所以一个游戏只包它进口的.
import { blur, dropShadow, shader, tint } from '@fabi-play/engine'
card.filters = [dropShadow(0, 8, 6, 'rgba(0,0,0,0.35)')]
const flash = tint('#fff', 0)
enemy.filters = [flash]
engine.tween(flash, { amount: 1 }, 0.05).then(() => engine.tween(flash, { amount: 0 }, 0.2))
if (engine.supports.shaders) flag.filters = [shader({ fragment: '…', uniforms: { uAmp: 0.004 } })]
tint, (中文(简体) ), brightness, (中文(简体) ), contrast, (中文(简体) ), saturate, (中文(简体) ), grayscale, (中文(简体) ), sepia, (中文(简体) ), hueRotate, (中文(简体) ), invert, (中文(简体) ), colorMatrix, (中文(简体) ), blur, (中文(简体) ),
dropShadow, (中文(简体) ), shader. Blur radi为每级封顶(32 / 16 / 0个单位:关闭在低级上);
engine.supports 说这里画什么 指南 : https://docs.fabiplay.app/engine/filters/ 页面存档备份,存于互联网档案馆。 。 。 .
节点池
对于产生多个节点的游戏,一秒: nodePool(factory, { max, reset }) 将节点重置为
工厂制造它们,而不是再破坏和制造它们。 进口自有( E)FabiEngine.nodePool 打开
脚本标签).
import { nodePool } from '@fabi-play/engine'
const coins = nodePool(() => engine.shape({ type: 'circle', r: 16, fill: '#FBD46A' }), { max: 40 })
const coin = layer.add(coins.get({ x: 200, y: -20 }))
engine.tween(coin, { y: 740 }, 2, 'linear').then(() => coins.release(coin))
大小
pnpm size 检查每个建筑与 size-budget.json (gzip -9),以及只导入什么游戏 createEngine
从 npm 建筑的捆绑。 第一次发布( 0. 1.0) 带有过滤器、 节点池、 WebGL 状态缓存、 结构
缓存密钥和无分配热路: npm index.js 它从30.3克兹到40.1克兹普
开发,脚本标记由同为~10 KB(它们携带了一切). 捆绑的游戏只收钱
进口: createEngine 单是32.9 KB(前29.1)。 过滤运行时间( GL 通过和程序
Canvas 2D计划)与第一个过滤工厂相接而来,一个游戏进口:一个工厂增加了3.6 KB,全部12 5.2 KB.
nodePool 是自身导入的: 0. 7 KB。 每个游戏付费的 3.8 KB( WebGL 状态缓存, 层边框,
结构缓存键、 无分配热路、 过滤钩和 engine.supports)在下文中作了解释
预算文件 notes。 。 。 .
许可证
Fabi Play Kit License:可自由使用,仅用于为Fabi Play制作游戏和工具. 见 自由主义。 。 。 .