Skip to content

F
fyge_for_tb
Commit 7508d1cc authored by wangjianfeng.yz's avatar wangjianfeng.yz
Browse files
Options

2.0.52

parent da265b69
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 283 additions and 79 deletions
adapters/wxAdapter.js
View file @ 7508d1cc
......@@ -80,11 +80,11 @@ var _window = {
},
//暂时仅用于加载文件，对于接口啥的再测试，class测试下，不行再改
XMLHttpRequest: (function () {
// static UNSEND = 0
// static OPENED = 1
// static HEADERS_RECEIVED = 2
// static LOADING = 3
// static DONE = 4
// static UNSEND = 0;
// static OPENED = 1;// open() 方法已经被调用。
// static HEADERS_RECEIVED = 2;// send() 方法已经被调用，并且头部和状态已经可获得。
// static LOADING = 3;// 下载中； responseText 属性已经包含部分数据。
// static DONE = 4; // 下载操作已完成。
function XMLHttpRequest() {
//0,1,2,3,4
this.readyState = 0;
......
build/FYGE.d.ts
View file @ 7508d1cc
declare namespace FYGE{export const VERSION = "2.0.51";
declare namespace FYGE{export const VERSION = "2.0.52";
export function cos(angle: number): number;
......@@ -6689,8 +6689,8 @@ export class TextField extends Sprite {
get textWidth(): number;
private _textWidth;
/**
* 文本的行高，设置过能进行垂直适配，
* 文本超出行高会被裁切
* 文本的总高度，设置过能进行垂直适配，
* 设置过的话，超出textHeight会被裁切
* @property textHeight
* @public
* @since 1.0.0
......@@ -6701,7 +6701,7 @@ export class TextField extends Sprite {
get textHeight(): number;
private _textHeight;
/**
* 行高，不设置就是size的1.4倍
* 行高，每行文本的高度，不设置就是size的1.4倍，和css的对应
*/
set lineHeight(value: number);
get lineHeight(): number;
......@@ -11382,6 +11382,8 @@ export function createTexturesByAtlas(baseTexture: BaseTexture, altaData: strin
export function loadSpine(url: string, onLoad: (spineData: ISkeletonData) => void, onError?: (err: any) => void): void;
export function parseSpineData(binary: ArrayBuffer, onComplete: (spineData: ISkeletonData) => void): void;
export class FpsPanel extends Sprite {
private context;
private bgColor;
......
build/fyge.esm.js
View file @ 7508d1cc
This diff is collapsed.
build/fyge.esm.js.map
View file @ 7508d1cc
This diff is collapsed.
build/fyge.min.js
View file @ 7508d1cc
This diff is collapsed.
build/fyge.min.js.map
View file @ 7508d1cc
This diff is collapsed.
build/types.d.ts
View file @ 7508d1cc
export const VERSION = "2.0.51";
export const VERSION = "2.0.52";
export function cos(angle: number): number;
......@@ -6689,8 +6689,8 @@ export class TextField extends Sprite {
get textWidth(): number;
private _textWidth;
/**
* 文本的行高，设置过能进行垂直适配，
* 文本超出行高会被裁切
* 文本的总高度，设置过能进行垂直适配，
* 设置过的话，超出textHeight会被裁切
* @property textHeight
* @public
* @since 1.0.0
......@@ -6701,7 +6701,7 @@ export class TextField extends Sprite {
get textHeight(): number;
private _textHeight;
/**
* 行高，不设置就是size的1.4倍
* 行高，每行文本的高度，不设置就是size的1.4倍，和css的对应
*/
set lineHeight(value: number);
get lineHeight(): number;
......@@ -11382,6 +11382,8 @@ export function createTexturesByAtlas(baseTexture: BaseTexture, altaData: strin
export function loadSpine(url: string, onLoad: (spineData: ISkeletonData) => void, onError?: (err: any) => void): void;
export function parseSpineData(binary: ArrayBuffer, onComplete: (spineData: ISkeletonData) => void): void;
export class FpsPanel extends Sprite {
private context;
private bgColor;
......
package.json
View file @ 7508d1cc
{
"name": "fyge",
"version": "2.0.51",
"version": "2.0.52",
"description": "canvas渲染引擎",
"main": "./build/fyge.min.js",
"module": "./build/fyge.esm.js",
......
record.txt
View file @ 7508d1cc
......@@ -498,6 +498,11 @@
EditableText改动较大，待测试
tbminAdpate里新增wx，略有改动
2.0.52 TextField的textBaseline修改成middle，oy直接改成行高的一半，去掉了减文本尺寸，为了部分浏览器等环境，文本偏移严重（淘宝环境待测试）
loadSpine抽象出parseSpineData方法
Spine的createMesh方法去掉了判断canvasPadding，直接赋值
......
src/2d/const.ts
View file @ 7508d1cc
......@@ -7,7 +7,7 @@
* @name VERSION
* @type {string}
*/
export const VERSION = "2.0.51";
export const VERSION = "2.0.52";
/**
......
src/2d/text/TextField.ts
View file @ 7508d1cc
......@@ -154,8 +154,8 @@ export class TextField extends Sprite {
private _textWidth: number = 0;
/**
* 文本的行高，设置过能进行垂直适配，
* 文本超出行高会被裁切
* 文本的总高度，设置过能进行垂直适配，
* 设置过的话，超出textHeight会被裁切
* @property textHeight
* @public
* @since 1.0.0
......@@ -182,7 +182,7 @@ export class TextField extends Sprite {
private _textHeight: number = 0;
/**
* 行高，不设置就是size的1.4倍
* 行高，每行文本的高度，不设置就是size的1.4倍，和css的对应
*/
set lineHeight(value: number) {
if (this._lineHeight != value) {
......@@ -425,7 +425,7 @@ export class TextField extends Sprite {
ctx.font = font;
ctx.textAlign = s._textAlign || TEXT_ALIGN.LEFT;
//暂时没开放
ctx.textBaseline = "top";
ctx.textBaseline = "middle"//"top";
ctx.fillStyle = getRGBA(s._fillColor, s._textAlpha)
}
/**
......@@ -626,7 +626,7 @@ export class TextField extends Sprite {
//还没测试是否已修复
getEnv() == "tb" && (upY -= 4);
for (let i = 0; i < realLines.length; i++) {
let oy = (lineH - s.size) / 2;
let oy = (lineH /*- s.size*/) / 2;
let ox = 0;
if (s.stroke) {
......
src/spine/Spine.ts
View file @ 7508d1cc
......@@ -776,7 +776,7 @@ export class Spine extends Container {
private createMesh(slot: Slot, attachment: MeshAttachment) {
var strip = new Mesh(attachment.texture, new Float32Array(attachment.regionUVs.length), attachment.regionUVs, new Uint16Array(attachment.triangles));
if (strip.canvasPadding) strip.canvasPadding = 1.5;
/*if (strip.canvasPadding)*/ strip.canvasPadding = 1.5;
strip.refresh(true)
strip.multiplyUvs()
// strip.alpha = attachment.color.a;
......
src/spine/loadSpine.ts
View file @ 7508d1cc
......@@ -22,39 +22,50 @@ export function loadSpine(
return
}
try {
var headerView = new DataView(res, 0, 12);
var imgLen = headerView.getUint32(0, true),
atlasLen = headerView.getUint32(4, true),
jsonLen = headerView.getUint32(8, true)
var base64String = `data:image/png;base64,${ArrayBufferToBase64(res.slice(12, imgLen + 12))}`;
var atlas = decodeText(new Uint8Array(res, 12 + imgLen, atlasLen));
var json = JSON.parse(decodeText(new Uint8Array(res, 12 + imgLen + atlasLen, jsonLen)));
GlobalLoader.loadImage((s, image) => {
//纹理加上
json.textures = createTexturesByAtlas(BaseTexture.fromImage(image), atlas);
//后续删除
Object.defineProperty(json, 'spine', {
get: function () {
console.warn("loadSpine方法不再返回spine对象，请使用new Spine(spineData)生成实例");
return new Spine(json)
}
})
//后续删除
Object.defineProperty(json, 'skeletonData', {
get: function () {
console.warn("loadSpine方法返回的是整个skeletonData了，不再是json.skeletonData");
console.warn("Spine构造函数直接传loadSpine加载成功的数据就行，不再分开传skeletonData和textures");
return json
}
})
//成功回调
onLoad && onLoad(json);
}, base64String)
parseSpineData(res, onLoad);
} catch (e) {
onError && onError(e);
}
}, url)
}
/**
* 解析spi后缀文件加载的数据
* @param binary spi后缀的二进制数据
* @param onComplete
*/
export function parseSpineData(
binary: ArrayBuffer,
onComplete: (spineData: ISkeletonData) => void
) {
var headerView = new DataView(binary, 0, 12);
var imgLen = headerView.getUint32(0, true),
atlasLen = headerView.getUint32(4, true),
jsonLen = headerView.getUint32(8, true)
var base64String = `data:image/png;base64,${ArrayBufferToBase64(binary.slice(12, imgLen + 12))}`;
var atlas = decodeText(new Uint8Array(binary, 12 + imgLen, atlasLen));
var json = JSON.parse(decodeText(new Uint8Array(binary, 12 + imgLen + atlasLen, jsonLen)));
GlobalLoader.loadImage((s, image) => {
//纹理加上
json.textures = createTexturesByAtlas(BaseTexture.fromImage(image), atlas);
//后续删除
Object.defineProperty(json, 'spine', {
get: function () {
console.warn("loadSpine方法不再返回spine对象，请使用new Spine(spineData)生成实例");
return new Spine(json)
}
})
//后续删除
Object.defineProperty(json, 'skeletonData', {
get: function () {
console.warn("loadSpine方法返回的是整个skeletonData了，不再是json.skeletonData");
console.warn("Spine构造函数直接传loadSpine加载成功的数据就行，不再分开传skeletonData和textures");
return json
}
})
//成功回调
onComplete && onComplete(json);
}, base64String)
}
\ No newline at end of file
test/testAxis.html 0 → 100644
View file @ 7508d1cc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport"
content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="full-screen" content="true" />
<meta name="screen-orientation" content="portrait" />
<meta name="x5-fullscreen" content="true" />
<meta name="360-fullscreen" content="true" />
<script src="../build/fyge.min.js"></script>
<style>
html,
body {
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
background-color: #eeeeee;
}
</style>
</head>
<body>
<div id="cusEngine" style="line-height:0;font-size:0">
<canvas id="canvas" style="width: 100%;height: 100%"></canvas>
</div>
<!-- 帧率检测 -->
<script src="//yun.duiba.com.cn/db_games/libs0924/stats.js"></script>
</body>
<script>
window.addEventListener("load", async function () {
//获取canvas
var canvas = document.getElementById("canvas");
canvas.width = document.body.clientWidth * (window.devicePixelRatio || 1)
canvas.height = document.body.clientHeight * (window.devicePixelRatio || 1)
//建舞台
var stage = new FYGE.Stage(
canvas,
750,//设计宽度，按设计搞给的就行
1624,//设计高度
document.body.clientWidth,
document.body.clientHeight,
FYGE.RENDERER_TYPE.WEBGL
);
stage.addWebMouseEvent()
//鼠标事件
var mouseEvent = stage.onMouseEvent.bind(stage);
canvas.addEventListener("touchstart", mouseEvent, false);
canvas.addEventListener('touchmove', mouseEvent, false);
canvas.addEventListener('touchend', mouseEvent, false);
//stage初始化
stage.addEventListener(FYGE.Event.INIT_STAGE, async () => {
//单图片资源
var texture = await new Promise((r) => {
FYGE.GlobalLoader.loadImage((s, image) => {
r(FYGE.Texture.fromImage(image))
}, "./res/aa.png")
})
//3d相关
var scene = new FYGE.Scene3D()
//加入舞台
stage.addChild(scene);
//相机在场景里面
scene.camera.position.set(6, 6, 14)
scene.camera.lookAt(0, 0, 0)
//设置一下相机的比例
scene.camera.set(undefined, stage.viewRect.width / stage.viewRect.height)
// scene.viewY = 500;
//3d视窗y与stage适配
scene.viewY = stage.viewRect.y;
//手势移动相机，暂时只有旋转
scene.setOrbitControl();
//视窗宽度
scene.viewWidth = 750;
//视窗高度
scene.viewHeight = stage.viewRect.height
//一个点光源
var pl = scene.addChild(new FYGE.PointLight(0xffffff, 1, 1000, 2))
pl.position.set(4, -4.0, 4)
//一个点光源
var pl = scene.addChild(new FYGE.PointLight(0xffffff, 0.5, 1000, 2))
pl.position.set(4, 4.0, 4)
//环境光
var pl = scene.addChild(new FYGE.AmbientLight(0xffffff, 0.4))
//方向光
var pl = scene.addChild(new FYGE.DirectionalLight(0xffffff, 0.2))
pl.position.set(1, 1, 1)
//坐标轴
scene.addChild(new FYGE.AxesHelper(10000))
//网格
var grid= scene.addChild(new FYGE.GridHelper(20, 20, 0xffffff, 0x00000))
console.log(grid)
}, this);
//循环
loop();
function loop() {
if (!window.paused) {
stage.flush();
}
FYGE.Tween.flush()
requestAnimationFrame(loop);
}
})
</script>
</html>
\ No newline at end of file
test/testThree.html
View file @ 7508d1cc
......@@ -12,7 +12,7 @@
font-size: 13px;
text-align: center;
background-color: #000000;
background-color: #999999;
margin: 0px;
overflow: hidden;
}
......@@ -33,8 +33,8 @@
<body>
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry -
lines - indexed</div>
<!-- <div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry -
lines - indexed</div> -->
<script src="./js/three.min.js"></script>
<script src="./js/OrbitControls.js"></script>
......@@ -47,7 +47,7 @@
var container, stats;
var camera, scene, renderer;
var camera, scene, renderer,camera1;
var mesh, parent_node;
......@@ -59,11 +59,18 @@
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 90;
camera.position.set(10, 10, 10);
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
camera1 = new THREE.OrthographicCamera(- 2, 2, 2, - 2, 0.1, 5 );
camera1.position.set(-2, 2, 2);
camera1.lookAt(0,0,0)
scene.add(camera1);
const helper = new THREE.CameraHelper(camera1);
scene.add(helper);
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
......@@ -81,22 +88,75 @@
// container.appendChild( stats.dom );
//
var geometry = new THREE.CylinderGeometry(10, 10, 10, 32, 1, true, 0, Math.PI / 3);
var material = new THREE.MeshBasicMaterial({ color: 0xffffff });
material.side = 2
var texture = new THREE.TextureLoader().load("./res/aa.png");
material.map = texture
var cylinder = new THREE.Mesh(geometry, material);
scene.add(cylinder);
var geometry = new THREE.CylinderGeometry(10, 10, 10, 32, 1, true, Math.PI / 3, Math.PI / 3);
var material = new THREE.MeshBasicMaterial({ color: 0xffffff });
material.side = 2
var texture = new THREE.TextureLoader().load("./res/aa.jpg");
material.map = texture
var cylinder = new THREE.Mesh(geometry, material);
scene.add(cylinder);
// var geometry = new THREE.CylinderGeometry(10, 10, 10, 32, 1, true, 0, Math.PI / 3);
// var material = new THREE.MeshBasicMaterial({ color: 0xffffff });
// material.side = 2
// var texture = new THREE.TextureLoader().load("./res/aa.png");
// material.map = texture
// var cylinder = new THREE.Mesh(geometry, material);
// scene.add(cylinder);
// var geometry = new THREE.CylinderGeometry(10, 10, 10, 32, 1, true, Math.PI / 3, Math.PI / 3);
// var material = new THREE.MeshBasicMaterial({ color: 0xffffff });
// material.side = 2
// var texture = new THREE.TextureLoader().load("./res/aa.jpg");
// material.map = texture
// var cylinder = new THREE.Mesh(geometry, material);
// scene.add(cylinder);
scene.add(new THREE.GridHelper(100, 100, 100, 0x888888, 0x888888))
//加坐标轴
// scene.add(new THREE.AxesHelper(1000))
//x轴
scene.add(new THREE.ArrowHelper(
new THREE.Vector3(1, 0, 0),
new THREE.Vector3(0, 0, 0),
2,
0xff0000
))
//y轴
scene.add(new THREE.ArrowHelper(
new THREE.Vector3(0, 1, 0),
new THREE.Vector3(0, 0, 0),
2,
0x00ff00
))
//z轴
scene.add(new THREE.ArrowHelper(
new THREE.Vector3(0, 0, 1),
new THREE.Vector3(0, 0, 0),
2,
0x0000ff
))
// 直线光
var dl = new THREE.DirectionalLight()
dl.position.set(1, -2, 3)
scene.add(dl);
scene.add(new THREE.AmbientLight(0xffffff, 0.2));
//加一个方块
var box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshPhongMaterial())
scene.add(box);
box.position.set(1.2, 1.3, -1.4);
box.rotation.set(-0.2, 0.4, 0.6)
box.add(new THREE.ArrowHelper(
new THREE.Vector3(1, 0, 0),
new THREE.Vector3(0, 0, 0),
1,
0xff0000
))
.add(new THREE.ArrowHelper(
new THREE.Vector3(0, 1, 0),
new THREE.Vector3(0, 0, 0),
1,
0x00ff00
))
.add(new THREE.ArrowHelper(
new THREE.Vector3(0, 0, 1),
new THREE.Vector3(0, 0, 0),
1,
0x0000ff
))
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment