dataset data() 除了给sprite元素设置属性外，SpriteJS提供了设置数据到sprite元素上的方法。 dataset 我们可以直接通过元素的dataset属性设置数据。 data() 如果要批量设置数据，我们也可以通过.data() 方法。

着色器 着色器 SpriteJSNext的3D扩展预置了一些默认的着色器，能够方便开发者快速创建应用。 这些预置着色器定义在这个文件里 。 包括： NORMAL 一个简单的根据法向量来确定表面颜色的着色器，主要用于测试 NORMAL_GEOMETRY 支持光照、表面颜色的通用着色器，一般的几何元素可以使用它 NORMAL_TEXTURE 支持...

创建Scene resolution 弹性resolution stickMode viewport appendChild() appendLayer() delegateEvent() dispatchEvent() hasLayer() insertBefore() layer() layers() preload() re...

模型 批量绘制 共享模型 模型 前面我们已经看到过，只要给元素传入一组顶点，就可以渲染出来。这一组顶点的数据，就是元素的模型 model。 但是实际上只有顶点是不够的，如果我们要比较逼真的点光源漫反射效果，还要计算出每个面的法向量 normal。 const { Scene } = spritejs ; const { Me...

Transition 过渡动画 Web Animations API 动画的 Timeline 使用第三方动画库 Transition 过渡动画 spritejs最简单的动画方式是transition动画： // 让精灵在1s内向右移动50个像素 sprite . transition ( 1.0 ). attr ({ x : ...

图片的异步加载 雪碧图 批量资源预加载进度 图片的异步加载 spritejs支持图片URL作为资源，我们前面已经看过，我们可以把URL作为texture直接传给Sprite的textures属性。但是，因为网络图片资源是异步加载的，这会可能导致sprite的异步显示以及我们拿到的sprite的contentSize为0。 获取图片大小之所以...

设置简单的transition 给transition添加Easing reverse transition 除了使用Web Animation API的动画之外，SpriteJS还提供了更简单的过渡动画 —— Transition 设置简单的transition 我们可以在改变元素的属性前先调用transition方法，这样就会产生一个过渡效...

摄像机 正交相机 摄像机 我们前面已经使用过layer上自带的透视相机，实际上，我们还可以创建并使用新的相机。 const vertex = /* glsl */ ` attribute vec2 uv ; attribute vec3 position ; uniform mat4 model...

与 matter-js 一同使用 Matter.Render 与 matter-js 一同使用 我们可以将2D物理引擎 matter-js 与spritejs一同使用。 // module aliases const { Engine , World , Composites , Composite , Bodies...

绘图尺寸 锚点 anchor 绘图尺寸 我们知道，画布canvas的坐标范围它的宽高属性决定，而在网页中，canvas呈现在文档中的大小则由canvas对象的css样式决定，两者不一定相同。对应于spritejs，用resolution 表示画布的宽高，而用viewport 表示canvas呈现在文档中的宽高。 const scene = ...