Skip to content

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

2.0.51

parent 9f99bda7
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 938 additions and 370 deletions
adapters/ttAdapter.js
View file @ da265b69
......@@ -16,7 +16,7 @@ var _window = {
devicePixelRatio: systemInfo.devicePixelRatio,
WebGLRenderingContext: 1,
navigator: {
platform,
platform: platform,
language: 'zh-cn',
appVersion: '5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1',
// userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Mobile/14E8301 MicroMessenger/6.6.0 MiniGame NetType/WIFI Language/zh_CN',
......@@ -79,22 +79,20 @@ var _window = {
}
},
//暂时仅用于加载文件，对于接口啥的再测试，class测试下，不行再改
XMLHttpRequest: class {
XMLHttpRequest: (function () {
// static UNSEND = 0
// static OPENED = 1
// static HEADERS_RECEIVED = 2
// static LOADING = 3
// static DONE = 4
constructor() {
function XMLHttpRequest() {
//0,1,2,3,4
this.readyState = 0;
this.status = 0;
this.response = null
this.responseText = null
this.responseType = ''
this.responseXML = null
this.response = null;
this.responseText = null;
this.responseType = '';
this.responseXML = null;
this.onabort = null;
this.onerror = null;
this.onload = null;
......@@ -102,7 +100,7 @@ var _window = {
this.onprogress = null;
this.ontimeout = null;
this.onloadend = null;
this.onreadystatechange = null
this.onreadystatechange = null;
/**
* POST|GET
*/
......@@ -111,34 +109,36 @@ var _window = {
//这个就当作请求头，返回头不管先，其实加_的最好用WeakMap私有化
this._headers = {
'content-type': 'application/x-www-form-urlencoded'
}
};
}
/**
*
* @param {*} key
* @param {*} value
*
* @param {*} key
* @param {*} value
*/
setRequestHeader(key, value) {
this._headers[key] = value
}
XMLHttpRequest.prototype.setRequestHeader = function (key, value) {
this._headers[key] = value;
};
/**
*
*
* @param {"GET"|"POST"} method
* @param {*} url ,get请求会拼上的
* @param {*} async
*/
open(method, url, async = true) {
XMLHttpRequest.prototype.open = function (method, url, async) {
if (async === void 0) { async = true; }
this._method = method;
this._url = url;
this.readyState = 1;
//调用
this.onreadystatechange && this.onreadystatechange();
}
};
/**
* post时候会有
* @param {*} params
* @param {*} params
*/
send(data = null) {
XMLHttpRequest.prototype.send = function (data) {
if (data === void 0) { data = null; }
if (this.readyState !== 1) {
throw new Error("Failed to execute 'send' on 'XMLHttpRequest': The object's state must be OPENED.");
return;
......@@ -147,7 +147,7 @@ var _window = {
var responseType = this.responseType;
var url = this._url;
var header = this._header;
var method = this._method
var method = this._method;
var _this = this;
//本地文件
if (!/^https?:\/\//.test(url)) {
......@@ -156,89 +156,74 @@ var _window = {
encoding: responseType == "arraybuffer" ? "" : "utf8",
success: onSuccess,
fail: onFail
})
return
});
return;
}
tt.request({
data,
url,
method,
header,
responseType,
data: data,
url: url,
method: method,
header: header,
responseType: responseType,
success: onSuccess,
fail: onFail
});
//
function onSuccess(_ref) {
var data = _ref.data,
statusCode = _ref.statusCode,
header = _ref.header;
var data = _ref.data, statusCode = _ref.statusCode, header = _ref.header;
if (typeof data !== 'string' && !(data instanceof ArrayBuffer)) {
try {
data = JSON.stringify(data);
} catch (e) {
}
catch (e) {
data = data;
}
}
_this.status = statusCode || 200;
//如果以后需要实现获取返回头getResponseHeader和getAllResponseHeaders再说
// _responseHeader.set(_this, header);
// _triggerEvent.call(_this, 'loadstart');
_this.onloadstart && _this.onloadstart();
_this.readyState = 2;
_this.readyState = 3;
_this.response = responseType == "json" ? JSON.parse(data) : data;
if (data instanceof ArrayBuffer) {
_this.responseText = '';
var bytes = new Uint8Array(data);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
_this.responseText += String.fromCharCode(bytes[i]);
}
} else {
}
else {
_this.responseText = data;
}
_this.readyState = 4;
_this.onreadystatechange && _this.onreadystatechange();
// _triggerEvent.call(_this, 'load');
_this.onload && _this.onload();
// _triggerEvent.call(_this, 'loadend');
_this.onloadend && _this.onloadend();
}
function onFail(_ref2) {
var errMsg = _ref2.errMsg; // TODO 规范错误
_this.status = _ref2.statusCode || 404;
_this.readyState = 4;
_this.onreadystatechange && _this.onreadystatechange();
if (errMsg.indexOf('abort') !== -1) {
// _triggerEvent.call(_this, 'abort');
_this.onabort && _this.onabort()
} else {
_this.onabort && _this.onabort();
}
else {
// _triggerEvent.call(_this, 'error', errMsg);
_this.onerror && _this.onerror(errMsg)
_this.onerror && _this.onerror(errMsg);
}
// _triggerEvent.call(_this, 'loadend');
_this.onloadend && _this.onloadend()
_this.onloadend && _this.onloadend();
}
}
}
};
return XMLHttpRequest;
}())
};
//需要在全局环境挂上
if (!global._hasAdapted) {
......
adapters/wxAdapter.js 0 → 100644
View file @ da265b69
This diff is collapsed.
adapters/wxEditabelText.js 0 → 100644
View file @ da265b69
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
}
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var FYGE = window.FYGE;
(function (FYGE) {
var EditableText = /** @class */ (function (_super) {
__extends(EditableText, _super);
function EditableText() {
var _this = _super.call(this) || this;
_this._prompt = "请输入";
_this._promptColor = "#eeeeee";
_this._textColor = "#000000";
/**
* 输入的内容
*/
_this._inputValue = "";
_this._instanceType = "EditableText";
var s = _this;
s.onKeyboardComplete = s.onKeyboardComplete.bind(s);
s.onKeyboardInput = s.onKeyboardInput.bind(s);
s.addEventListener(FYGE.MouseEvent.CLICK, function () {
var info = {
defaultValue: s._inputValue,
maxLength: 9999,
multiple: s.lineType == FYGE.TEXT_lINETYPE.MULTI,
confirmHold: true,
confirmType: 'done',
fail: function (res) {
console.log(res.errMsg);
}
};
wx.showKeyboard(info);
wx.onKeyboardConfirm(s.onKeyboardComplete);
wx.onKeyboardComplete(s.onKeyboardComplete);
wx.onKeyboardInput(s.onKeyboardInput);
s.dispatchEvent(FYGE.Event.FOCUS);
//
s.text = s._inputValue || s.prompt;
s.fillColor = s._inputValue ? s.textColor : s.promptColor;
//待测试能否手动调用
s.stage.once(FYGE.MouseEvent.MOUSE_UP, function () {
s.onKeyboardComplete({ value: s._inputValue });
});
});
return _this;
}
Object.defineProperty(EditableText.prototype, "prompt", {
/**
* 未输入文本时显示的文字
*/
get: function () {
return this._prompt;
},
set: function (value) {
if (this._prompt != value) {
this._prompt = value;
this["dirty"] = true;
//如果无输入文本直接修改
if (!this._inputValue) {
this.text = this._prompt;
}
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(EditableText.prototype, "promptColor", {
/**
* 未输入文本时显示文字的颜色
*/
get: function () {
return this._promptColor;
},
set: function (value) {
if (this._promptColor != value) {
this._promptColor = value;
this["dirty"] = true;
//如果无输入文本直接修改
if (!this._inputValue) {
this.fillColor = this._promptColor;
}
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(EditableText.prototype, "textColor", {
/**
* 文本颜色，不用fillColor为了和父类区分
* 输入文本时的颜色
*/
get: function () {
return this._textColor;
},
set: function (value) {
if (this._textColor != value) {
this._textColor = value;
this["dirty"] = true;
//如果又文本直接修改
if (this._inputValue) {
this.fillColor = this._textColor;
}
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(EditableText.prototype, "inputValue", {
/**
* 获取输入框内容
*/
get: function () {
return this._inputValue;
},
set: function (v) {
v = v || "";
//如果v不存在就用默认文案
this.text = v ? v : this._prompt;
//如果v不存在就用默认颜色
this.fillColor = v ? this.textColor : this._promptColor;
//记录一下，这个是准确的
this._inputValue = v;
},
enumerable: true,
configurable: true
});
EditableText.prototype.onKeyboardInput = function (data) {
this.setText(data.value);
this.dispatchEvent(FYGE.Event.INPUT, data);
};
EditableText.prototype.onKeyboardComplete = function (res) {
var s = this;
s.setText(res.value);
wx.offKeyboardComplete();
wx.offKeyboardConfirm();
wx.offKeyboardInput();
wx.hideKeyboard({});
s.dispatchEvent(FYGE.Event.BLUR, res);
};
EditableText.prototype.setText = function (text) {
var s = this;
s.text = text ? text : s._prompt;
s.fillColor = text ? s.textColor : s._promptColor;
//记录一下需要
s._inputValue = text;
};
return EditableText;
}(FYGE.TextField));
FYGE.EditableText = EditableText;
})(FYGE || (FYGE = {}));
adapters/wxEditabelText.ts 0 → 100644
View file @ da265b69
declare const wx;
namespace FYGE {
export class EditableText extends FYGE.TextField {
private _prompt: string = "请输入";
/**
* 未输入文本时显示的文字
*/
get prompt() {
return this._prompt
}
set prompt(value: string) {
if (this._prompt != value) {
this._prompt = value;
this["dirty"] = true;
//如果无输入文本直接修改
if (!this._inputValue) {
this.text = this._prompt;
}
}
}
private _promptColor: string = "#eeeeee";
/**
* 未输入文本时显示文字的颜色
*/
get promptColor() {
return this._promptColor
}
set promptColor(value: string) {
if (this._promptColor != value) {
this._promptColor = value;
this["dirty"] = true;
//如果无输入文本直接修改
if (!this._inputValue) {
this.fillColor = this._promptColor;
}
}
}
private _textColor: string = "#000000";
/**
* 文本颜色，不用fillColor为了和父类区分
* 输入文本时的颜色
*/
get textColor() {
return this._textColor
}
set textColor(value: string) {
if (this._textColor != value) {
this._textColor = value;
this["dirty"] = true;
//如果又文本直接修改
if (this._inputValue) {
this.fillColor = this._textColor;
}
}
}
/**
* 输入的内容
*/
private _inputValue: string = ""
/**
* 获取输入框内容
*/
get inputValue(): string {
return this._inputValue;
}
set inputValue(v: string) {
v = v || "";
//如果v不存在就用默认文案
this.text = v ? v : this._prompt;
//如果v不存在就用默认颜色
this.fillColor = v ? this.textColor : this._promptColor;
//记录一下，这个是准确的
this._inputValue = v;
}
public constructor() {
super();
this._instanceType = "EditableText";
var s: this = this;
s.onKeyboardComplete = s.onKeyboardComplete.bind(s);
s.onKeyboardInput = s.onKeyboardInput.bind(s);
s.addEventListener(FYGE.MouseEvent.CLICK, function () {
var info = {
defaultValue: s._inputValue,
maxLength: 9999,//暂时不管
multiple: s.lineType == FYGE.TEXT_lINETYPE.MULTI,
confirmHold: true,
confirmType: 'done',
fail: function (res) {
console.log(res.errMsg);
}
};
wx.showKeyboard(info);
wx.onKeyboardConfirm(s.onKeyboardComplete);
wx.onKeyboardComplete(s.onKeyboardComplete);
wx.onKeyboardInput(s.onKeyboardInput);
s.dispatchEvent(FYGE.Event.FOCUS);
//
s.text = s._inputValue || s.prompt;
s.fillColor = s._inputValue ? s.textColor : s.promptColor;
//待测试能否手动调用
s.stage.once(FYGE.MouseEvent.MOUSE_UP, () => {
s.onKeyboardComplete({ value: s._inputValue })
});
});
}
private onKeyboardInput(data) {
this.setText(data.value)
this.dispatchEvent(FYGE.Event.INPUT, data);
}
private onKeyboardComplete(res) {
var s = this;
s.setText(res.value)
wx.offKeyboardComplete();
wx.offKeyboardConfirm();
wx.offKeyboardInput();
wx.hideKeyboard({});
s.dispatchEvent(FYGE.Event.BLUR, res);
}
private setText(text: string) {
var s = this;
s.text = text ? text : s._prompt;
s.fillColor = text ? s.textColor : s._promptColor;
//记录一下需要
s._inputValue = text;
}
}
}
\ No newline at end of file
build/FYGE.d.ts
View file @ da265b69
declare namespace FYGE{export const VERSION = "2.0.50";
declare namespace FYGE{export const VERSION = "2.0.51";
export function cos(angle: number): number;
......@@ -1283,16 +1283,15 @@ export enum EnvType {
*/
web = "web",
/**
* 字节helium环境，暂时废弃
* 打包的时候，
* 1、引擎一并打入，并且头部添加helium-adapter，基本和Web保持一致
* 2、客户端先loadScript(helium-adapter.js)，再loadScript(引擎)，最后loadScript(项目代码)
* 头条，抖音小游戏
* 需要先执行ttAdapter.js注入兼容的全局变量
*/
tt = "tt",
/**
* 头条，抖音小程序
* 需要先执行adapter.js注入兼容的全局变量
* 微信小游戏
* 需要先执行wxAdapter.js注入兼容的全局变量
*/
tt = "tt"
wx = "wx"
}
export function getEnv(): EnvType;
......@@ -1315,8 +1314,6 @@ export function requestAnimationFrame(callback: any): any;
export function cancelAnimationFrame(id: number): void;
export function getRequestAnimationFrame(): void;
export function isWebGLSupported(): boolean;
export function getOsType(): "ios" | "android" | "pc";
......@@ -6871,7 +6868,7 @@ export class TextField extends Sprite {
}
export class EditableText extends TextField {
htmlElement: any;
htmlElement: HTMLInputElement;
private _prompt;
/**
* 未输入文本时显示的文字
......@@ -6887,9 +6884,14 @@ export class EditableText extends TextField {
private _textColor;
/**
* 文本颜色，不用fillColor为了和父类区分
* 输入文本时的颜色
*/
get textColor(): string;
set textColor(value: string);
/**
* 输入的内容
*/
private _inputValue;
/**
* 获取输入框内容
*/
......@@ -11378,4 +11380,35 @@ export function createTexturesByAtlas(baseTexture: BaseTexture, altaData: strin
[key: string]: Texture;
}
export function loadSpine(url: string, onLoad: (spineData: ISkeletonData) => void, onError?: (err: any) => void): void;}
\ No newline at end of file
export function loadSpine(url: string, onLoad: (spineData: ISkeletonData) => void, onError?: (err: any) => void): void;
export class FpsPanel extends Sprite {
private context;
private bgColor;
private textColor;
private PR;
private WIDTH;
private HEIGHT;
private TEXT_X;
private TEXT_Y;
private GRAPH_X;
private GRAPH_Y;
private GRAPH_WIDTH;
private GRAPH_HEIGHT;
private GRAPH_SIZE;
private maxValue;
private min;
private max;
private items;
/**
* 帧率面板
* 后续可以加入每次drawCall，总绘制对象等等
*/
constructor();
private lastTime;
private frames;
reset(): void;
update(): void;
private updatePanel;
private updateText;
}}
\ No newline at end of file
build/fyge.esm.js
View file @ da265b69
This diff is collapsed.
build/fyge.esm.js.map
View file @ da265b69
This diff is collapsed.
build/fyge.min.js
View file @ da265b69
This diff is collapsed.
build/fyge.min.js.map
View file @ da265b69
This diff is collapsed.
build/types.d.ts
View file @ da265b69
export const VERSION = "2.0.50";
export const VERSION = "2.0.51";
export function cos(angle: number): number;
......@@ -1283,16 +1283,15 @@ export enum EnvType {
*/
web = "web",
/**
* 字节helium环境，暂时废弃
* 打包的时候，
* 1、引擎一并打入，并且头部添加helium-adapter，基本和Web保持一致
* 2、客户端先loadScript(helium-adapter.js)，再loadScript(引擎)，最后loadScript(项目代码)
* 头条，抖音小游戏
* 需要先执行ttAdapter.js注入兼容的全局变量
*/
tt = "tt",
/**
* 头条，抖音小程序
* 需要先执行adapter.js注入兼容的全局变量
* 微信小游戏
* 需要先执行wxAdapter.js注入兼容的全局变量
*/
tt = "tt"
wx = "wx"
}
export function getEnv(): EnvType;
......@@ -1315,8 +1314,6 @@ export function requestAnimationFrame(callback: any): any;
export function cancelAnimationFrame(id: number): void;
export function getRequestAnimationFrame(): void;
export function isWebGLSupported(): boolean;
export function getOsType(): "ios" | "android" | "pc";
......@@ -6871,7 +6868,7 @@ export class TextField extends Sprite {
}
export class EditableText extends TextField {
htmlElement: any;
htmlElement: HTMLInputElement;
private _prompt;
/**
* 未输入文本时显示的文字
......@@ -6887,9 +6884,14 @@ export class EditableText extends TextField {
private _textColor;
/**
* 文本颜色，不用fillColor为了和父类区分
* 输入文本时的颜色
*/
get textColor(): string;
set textColor(value: string);
/**
* 输入的内容
*/
private _inputValue;
/**
* 获取输入框内容
*/
......@@ -11378,4 +11380,35 @@ export function createTexturesByAtlas(baseTexture: BaseTexture, altaData: strin
[key: string]: Texture;
}
export function loadSpine(url: string, onLoad: (spineData: ISkeletonData) => void, onError?: (err: any) => void): void;
\ No newline at end of file
export function loadSpine(url: string, onLoad: (spineData: ISkeletonData) => void, onError?: (err: any) => void): void;
export class FpsPanel extends Sprite {
private context;
private bgColor;
private textColor;
private PR;
private WIDTH;
private HEIGHT;
private TEXT_X;
private TEXT_Y;
private GRAPH_X;
private GRAPH_Y;
private GRAPH_WIDTH;
private GRAPH_HEIGHT;
private GRAPH_SIZE;
private maxValue;
private min;
private max;
private items;
/**
* 帧率面板
* 后续可以加入每次drawCall，总绘制对象等等
*/
constructor();
private lastTime;
private frames;
reset(): void;
update(): void;
private updatePanel;
private updateText;
}
\ No newline at end of file
examples/2d.html
View file @ da265b69
......@@ -69,7 +69,7 @@
1624,//设计高度
sysInfo && sysInfo.windowWidth || document.body.clientWidth,
sysInfo && sysInfo.windowHeight || document.body.clientHeight,
FYGE.RENDERER_TYPE.CANVAS,
FYGE.RENDERER_TYPE.WEBGL,
false,
false,
sysInfo && sysInfo.pixelRatio || window.devicePixelRatio || 1//分辨率
......
examples/pef.html
View file @ da265b69
......@@ -136,6 +136,10 @@
// .to({ x: end.x }, 1000, FYGE.Ease.quadIn)
// }
// }
// var s= stage.addChild(new FYGE.FpsPanel)
// setTimeout(()=>{
// s.reset()
// },6000)
}, this);
//循环
......
package.json
View file @ da265b69
{
"name": "fyge",
"version": "2.0.50",
"version": "2.0.51",
"description": "canvas渲染引擎",
"main": "./build/fyge.min.js",
"module": "./build/fyge.esm.js",
......
record.txt
View file @ da265b69
......@@ -492,10 +492,18 @@
TextureManager的updateTexture方法判断图片数据改成_data
getTintedTexture里的tintMethod改成用到时才调用判断
tbminAdpate里改动很大。。。待测试tb，tt，web环境
2.0.51 添加FpsPanel类
BatchRenderer里建vao时加回attrs.aTextureId的判断
EditableText改动较大，待测试
tbminAdpate里新增wx，略有改动
使用多纹理通道时需要着色器做if判断，所以性能会变差，但是使用单通道在有多纹理时需要断批一样影响性能，具体权衡暂时不改
用namespace会很方便分包，也很方便重写，是否考虑，那构建好烦
外层canvas标签的transform数据在获取鼠标坐标时并未考虑，比如旋转
......
src/2d/FpsPanel.ts 0 → 100644
View file @ da265b69
import { createCanvas } from "./utils";
import { Sprite } from "./display";
import { Texture } from "./texture";
export class FpsPanel extends Sprite {
private context: CanvasRenderingContext2D;
private bgColor: string = '#002002';
private textColor: string = '#0ff0ff';
private PR: number = 3;
private WIDTH = 80 * this.PR;
private HEIGHT = 48 * this.PR;
private TEXT_X = 3 * this.PR;
private TEXT_Y = 2 * this.PR;
private GRAPH_X = 3 * this.PR;
private GRAPH_Y = 15 * this.PR;
private GRAPH_WIDTH = 74 * this.PR;
private GRAPH_HEIGHT = 30 * this.PR;
private GRAPH_SIZE = 74;
private maxValue = 100;
private min = Infinity;
private max = 0;
private items = [];
/**
* 帧率面板
* 后续可以加入每次drawCall，总绘制对象等等
*/
constructor() {
super()
//离屏canvas
var canvas = createCanvas();
canvas.width = this.WIDTH;
canvas.height = this.HEIGHT;
this.texture = Texture.fromCanvas(canvas)
this.context = canvas.getContext("2d");
this.context.font = 'bold ' + (9 * this.PR) + 'px Helvetica,Arial,sans-serif';
this.context.textBaseline = 'top';
this.updateText("FPS");
}
private lastTime: number = Date.now();
private frames: number = 0;
reset() {
this.lastTime = Date.now();
this.min = Infinity;
this.max = 0;
this.items.length = 0;
this.frames = 0;
}
update() {
this.frames++;
var time = Date.now();
//每秒跑一次
if (time >= this.lastTime + 1000) {
var value = (this.frames * 1000) / (time - this.lastTime);
this.updatePanel(value)
this.lastTime = time;
this.frames = 0;
}
super.update();
}
private updatePanel(value: number) {
const { items, GRAPH_SIZE, context, GRAPH_X, textColor, GRAPH_Y, PR, GRAPH_HEIGHT, bgColor, maxValue } = this
items.push(value);
while (items.length > GRAPH_SIZE) {
items.shift();
}
this.min = Math.min(this.min, value);
this.max = Math.max(this.max, value);
this.updateText(Math.round(value) + ' FPS (' + Math.round(this.min) + '-' + Math.round(this.max) + ')');
for (var i = 0; i < items.length; i++) {
var startPos = GRAPH_X + (i + GRAPH_SIZE - items.length) * PR;
context.fillStyle = textColor;
context.globalAlpha = 1;
context.fillRect(startPos, GRAPH_Y, PR, GRAPH_HEIGHT);
context.fillStyle = bgColor;
context.globalAlpha = 0.9;
context.fillRect(startPos, GRAPH_Y, PR, Math.round((1 - (items[i] / maxValue)) * GRAPH_HEIGHT));
}
this.texture.update();
}
private updateText(text: string) {
const { context, bgColor, textColor, WIDTH, HEIGHT, TEXT_X, TEXT_Y, GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT } = this
context.fillStyle = bgColor;
context.globalAlpha = 1;
context.fillRect(0, 0, WIDTH, HEIGHT);
context.fillStyle = textColor;
context.fillText(text, TEXT_X, TEXT_Y);
context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
context.fillStyle = bgColor;
context.globalAlpha = 0.9;
context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
}
}
src/2d/const.ts
View file @ da265b69
......@@ -7,7 +7,7 @@
* @name VERSION
* @type {string}
*/
export const VERSION = "2.0.50";
export const VERSION = "2.0.51";
/**
......
src/2d/renderers/plugins/BatchRenderer.ts
View file @ da265b69
......@@ -166,13 +166,12 @@ export class BatchRenderer extends ObjectRenderer {
.addAttribute(vertexBuffer, attrs.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0)
// .addAttribute(vertexBuffer, attrs.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4)
// .addAttribute(vertexBuffer, attrs.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4);
.addAttribute(vertexBuffer, attrs.aTextureCoord, gl.FLOAT, true, this.vertByteSize, 2 * 4)
.addAttribute(vertexBuffer, attrs.aTextureCoord, gl.FLOAT, true, this.vertByteSize, 2 * 4)//这里uv改成两位了
.addAttribute(vertexBuffer, attrs.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 4 * 4)
.addAttribute(vertexBuffer, attrs.aTextureId, gl.FLOAT, false, this.vertByteSize, 5 * 4);
// if (attrs.aTextureId)
// {
// vao.addAttribute(vertexBuffer, attrs.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4);
// }
// .addAttribute(vertexBuffer, attrs.aTextureId, gl.FLOAT, false, this.vertByteSize, 5 * 4);//用下面的判断，因为MAX_TEXTURES为1的话attrs.aTextureId就不存在了
if (attrs.aTextureId) {
vao.addAttribute(vertexBuffer, attrs.aTextureId, gl.FLOAT, false, this.vertByteSize, 5 * 4);
}
this.vaos[i] = vao;
}
......@@ -380,7 +379,10 @@ export class BatchRenderer extends ObjectRenderer {
.addAttribute(vertexBuffer, attrs.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0)
.addAttribute(vertexBuffer, attrs.aTextureCoord, gl.FLOAT, true, this.vertByteSize, 2 * 4)
.addAttribute(vertexBuffer, attrs.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 4 * 4)
.addAttribute(vertexBuffer, attrs.aTextureId, gl.FLOAT, false, this.vertByteSize, 5 * 4);
// .addAttribute(vertexBuffer, attrs.aTextureId, gl.FLOAT, false, this.vertByteSize, 5 * 4);//理由同上
if (attrs.aTextureId) {
vao.addAttribute(vertexBuffer, attrs.aTextureId, gl.FLOAT, false, this.vertByteSize, 5 * 4);
}
this.vaos[this.vertexCount] = vao;
// console.log(this.vertexCount)
......
src/2d/text/EditableText.ts
View file @ da265b69
......@@ -9,7 +9,7 @@ import { getOsType } from "../utils";
*/
export class EditableText extends TextField {
htmlElement: any;
htmlElement: HTMLInputElement;
private _prompt: string = "请输入";
/**
* 未输入文本时显示的文字
......@@ -21,8 +21,8 @@ export class EditableText extends TextField {
if (this._prompt != value) {
this._prompt = value;
this["dirty"] = true;
//如果无文本直接修改
if (!this.htmlElement || !this.htmlElement.value) {
//如果无输入文本直接修改
if (/*!this.htmlElement || !this.htmlElement.value*/!this._inputValue) {
this.text = this._prompt;
}
}
......@@ -38,8 +38,8 @@ export class EditableText extends TextField {
if (this._promptColor != value) {
this._promptColor = value;
this["dirty"] = true;
//如果无文本直接修改
if (!this.htmlElement || !this.htmlElement.value) {
//如果无输入文本直接修改
if (/*!this.htmlElement || !this.htmlElement.value*/!this._inputValue) {
this.fillColor = this._promptColor;
}
}
......@@ -48,6 +48,7 @@ export class EditableText extends TextField {
private _textColor: string = "#000000";
/**
* 文本颜色，不用fillColor为了和父类区分
* 输入文本时的颜色
*/
get textColor() {
return this._textColor
......@@ -57,21 +58,32 @@ export class EditableText extends TextField {
this._textColor = value;
this["dirty"] = true;
//如果又文本直接修改
if (this.htmlElement && this.htmlElement.value) {
if (/*this.htmlElement && this.htmlElement.value*/this._inputValue) {
this.fillColor = this._textColor;
}
}
}
/**
* 输入的内容
*/
private _inputValue: string = ""
/**
* 获取输入框内容
*/
get inputValue(): string {
return this.htmlElement && this.htmlElement.value || (this.text != this._prompt ? this.text : "")
// return this.htmlElement && this.htmlElement.value || (this.text != this._prompt ? this.text : "")
return this._inputValue;
}
set inputValue(v: string) {
v = v || "";
//有就加上，无碍
if (this.htmlElement) this.htmlElement.value = v;
this.text = v;
this.fillColor = this.textColor;
//如果v不存在就用默认文案
this.text = v ? v : this._prompt;
//如果v不存在就用默认颜色
this.fillColor = v ? this.textColor : this._promptColor;
//记录一下，这个是准确的
this._inputValue = v;
}
public constructor() {
......@@ -91,13 +103,15 @@ export class EditableText extends TextField {
s.text = s.prompt;
s.fillColor = s.promptColor;
}
//记录一下需要
s._inputValue = s.htmlElement.value || "";
window.scrollTo(0, 0)
};
this.addEventListener(MouseEvent.CLICK, function (e: Event) {
s.initElement()
//font包括字体和大小
s.htmlElement.style.font = s.size + "px " + this.font;
s.htmlElement.style.font = s.size + "px " + s.font;
s.htmlElement.style.color = s.textColor;
s.htmlElement.style.textAlign = s.textAlign;
// s.htmlElement.setAttribute("class", "inputTextFor");
......@@ -107,9 +121,15 @@ export class EditableText extends TextField {
s.htmlElement.style.height = s.textHeight + "px";
s.htmlElement.style.width = s.textWidth + "px";
//如果文案不是默认的
if (s.text !== s.prompt) s.htmlElement.value = s.text;//这样判断还是可能有问题，TODO
// if (s.text !== s.prompt) s.htmlElement.value = s.text;//这样判断还是可能有问题，TODO
if (s.htmlElement.value != s._inputValue) {
s.htmlElement.value = s._inputValue;
}
s.text = "";
s.htmlElement.style.display = "block";
s.htmlElement.selectionStart = s._inputValue.length;
s.htmlElement.selectionEnd = s._inputValue.length;
s.htmlElement.focus();
let mtx = s.transform.worldMatrix;
......@@ -173,13 +193,44 @@ export class EditableText extends TextField {
//输入事件
htmlElement.oninput = function (e) {
//抛出原生的input的事件
if (s.hasEventListener(Event.INPUT)) s.dispatchEvent(Event.INPUT, e)
// if (s.hasEventListener(Event.INPUT)) s.dispatchEvent(Event.INPUT, e)
setTimeout(function () {
if (htmlElement.selectionStart == htmlElement.selectionEnd) {//避免中文输入法
s._inputValue = htmlElement.value || "";
if (s.hasEventListener(Event.INPUT)) s.dispatchEvent(Event.INPUT, e)
}
}, 0);
}
//聚焦事件
htmlElement.onfocus = function (e) {
//抛出原生的聚焦的事件
if (s.hasEventListener(Event.FOCUS)) s.dispatchEvent(Event.FOCUS, e)
}
// //输入事件
// let inputLock = false;
// htmlElement.oninput = function (e) {
// if (!inputLock) {
// _onInput(e);
// }
// };
// htmlElement.addEventListener('compositionstart', function () {
// inputLock = true;
// });
// htmlElement.addEventListener('compositionend', function () {
// inputLock = false;
// if (!inputLock) {
// _onInput(e);
// }
// });
// function _onInput(e) {
// setTimeout(function () {
// if (htmlElement.selectionStart == htmlElement.selectionEnd) {
// s._inputValue = htmlElement.value;
// if (s.hasEventListener(Event.INPUT)) s.dispatchEvent(Event.INPUT, e)
// }
// }, 0);
// }
}
destroy() {
......
src/2d/utils/tbminiAdapte.ts
View file @ da265b69
......@@ -7,18 +7,23 @@ export enum EnvType {
* web环境
*/
web = "web",
// /**
// * 字节helium环境，暂时废弃
// * 打包的时候，
// * 1、引擎一并打入，并且头部添加helium-adapter，基本和Web保持一致
// * 2、客户端先loadScript(helium-adapter.js)，再loadScript(引擎)，最后loadScript(项目代码)
// */
// hel = "hel",
/**
* 字节helium环境，暂时废弃
* 打包的时候，
* 1、引擎一并打入，并且头部添加helium-adapter，基本和Web保持一致
* 2、客户端先loadScript(helium-adapter.js)，再loadScript(引擎)，最后loadScript(项目代码)
* 头条，抖音小游戏
* 需要先执行ttAdapter.js注入兼容的全局变量
*/
// hel = "hel",
tt = "tt",
/**
* 头条，抖音小程序
* 需要先执行adapter.js注入兼容的全局变量
* 微信小游戏
* 需要先执行wxAdapter.js注入兼容的全局变量
*/
tt = "tt"
wx = "wx",
}
let env: EnvType = EnvType.web;
......@@ -45,8 +50,6 @@ export function createCanvas(): HTMLCanvasElement {
if (getEnv() == "tb") return createTbOffscreenCanvas()//my._createOffscreenCanvas();
//web环境或其他环境，当作兼容过document的
/*if (getEnv() == "web" || getEnv() == "hel" || getEnv() == "tt")*/ return document.createElement("canvas");
//提示下
console.warn("未知环境，创建canvas失败")
}
function createTbOffscreenCanvas() {
//@ts-ignore
......@@ -100,8 +103,9 @@ export function createImage(): HTMLImageElement {
console.warn("淘宝小程序初始化canvas不存在");
}
//当作兼容过Image的
/*if (getEnv() == "web" || getEnv() == "hel" || getEnv() == "tt")*/ return new Image();
console.warn("未知环境，创建Image失败")
else {
return new Image();
}
}
/**
* 尽量外部自行调用循环，不用引擎给的，即将废弃
......@@ -109,42 +113,30 @@ export function createImage(): HTMLImageElement {
* @returns
*/
export function requestAnimationFrame(callback) {
//直接用window的
if (getEnv() == "web") return window.requestAnimationFrame(callback);
//淘宝小程序环境
if (getEnv() == "tb") {
if (tbCanvas) return tbCanvas.requestAnimationFrame(callback);
console.warn("淘宝小程序初始化canvas不存在");
}
//tt环境，待测试，js运行环境可能默认有，TODO
if (getEnv() == "tt") return requestAnimationFrame(callback);
console.warn("未知环境，requestAnimationFrame调用无效")
//其他环境，当作兼容过的
else {
return requestAnimationFrame(callback);
}
}
export function cancelAnimationFrame(id: number) {
if (getEnv() == "web") {
window.cancelAnimationFrame(id);
return;
}
//淘宝小程序环境
else if (getEnv() == "tb") {
if (getEnv() == "tb") {
if (tbCanvas) {
tbCanvas.cancelAnimationFrame(id);
return;
}
console.warn("淘宝小程序初始化canvas不存在");
}
//tt环境，待测试，js运行环境可能默认有，TODO
else if (getEnv() == "tt") {
//其他环境，当作兼容过的
else {
cancelAnimationFrame(id);
return;
}
console.warn("未知环境，cancelAnimationFrame调用无效")
}
//老版本使用提示，TODO废弃
export function getRequestAnimationFrame() {
console.error("requestAnimationFrame,cancelAnimationFrame统统外部自行调用，引擎内不给方法，淘宝小程序在canvas上，web环境在window上")
}
let webglSupported: boolean;
......@@ -155,7 +147,7 @@ let webglSupported: boolean;
*/
export function isWebGLSupported(): boolean {
//淘宝环境直接返回true，否则找淘宝小程序解决，tt环境待测试，TODO
if (getEnv() == "tb" || getEnv() == "tt" /*|| getEnv() == "hel"*/) return true;
if (getEnv() == "tb" || getEnv() == "tt" /*|| getEnv() == "hel"*/ || getEnv() == "wx") return true;
//已经判断过了，直接返回
if (webglSupported !== undefined) return webglSupported;
//进入判断，加上低性能下是否使用webgl标识，pc上因为failIfMajorPerformanceCaveat设为true获取不到webgl一般是驱动问题
......@@ -213,15 +205,13 @@ export function getOsType(): "ios" | "android" | "pc" {
})() || null;
//@ts-ignore 如果没取到，有可能环境还没切换，直接用老方法获取，或者直接给个提示
if (!osType && my) osType = my.getSystemInfoSync().platform.toLowerCase();
//tt的再来一次，TODO
// if(!osType&&)
}
return osType;
}
let devicePixelRatio: number;
/**
* 获取屏幕像素比dpr
* 获取屏幕像素比dpr，内部没有用到
* @returns
*/
export function getDevicePixelRatio() {
......@@ -236,8 +226,6 @@ export function getDevicePixelRatio() {
devicePixelRatio = window && (window.devicePixelRatio || 1);
//@ts-ignore如果还没取到，环境切换有问题，用老方法
if (!devicePixelRatio && my) devicePixelRatio = my.getSystemInfoSync().pixelRatio;
//tt的再来一个，TODO
// if(!devicePixelRatio&&)
}
return devicePixelRatio;
}
src/Stats.ts deleted 100644 → 0
View file @ 9f99bda7
/**
* @author mrdoob / http://mrdoob.com/
*/
var Stats = function (canvasId) {
var beginTime = Date.now(), prevTime = beginTime, frames = 0;
//@ts-ignore
var fpsPanel = new Stats.Panel(canvasId, 'FPS', '#0ff', '#002');
return {
begin: function () {
beginTime = Date.now();
},
end: function () {
frames++;
var time = Date.now();
if (time >= prevTime + 1000) {
fpsPanel.update((frames * 1000) / (time - prevTime), 100.0);
prevTime = time;
frames = 0;
}
return time;
},
update: function () {
beginTime = this.end();
},
};
};
//@ts-ignore
Stats.Panel = function (canvasId, name, fg, bg) {
var min = Infinity, max = 0, round = Math.round;
var PR = 3;
var WIDTH = 80 * PR, HEIGHT = 48 * PR,
TEXT_X = 3 * PR, TEXT_Y = 2 * PR,
GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR,
GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR;
var GRAPH_SIZE = GRAPH_WIDTH / PR;
var items = [];
var context //= my.createCanvasContext(canvasId);
//@ts-ignore
my.createCanvas({
id: canvasId,
success: (ccc) => {
context = ccc.getContext("2d")
context.font = 'bold ' + (9 * PR) + 'px Helvetica,Arial,sans-serif';
// context.setTextBaseline('top');
context.textBaseline = 'top'
drawWithoutGraph(name);
// context.draw();
}
})
return {
update: function (value, maxValue) {
items.push(value);
while (items.length > GRAPH_SIZE) {
items.shift();
}
min = Math.min(min, value);
max = Math.max(max, value);
drawWithoutGraph(round(value) + ' ' + name + ' (' + round(min) + '-' + round(max) + ')');
// graph inner
for (var i = 0; i < items.length; i++) {
var startPos = GRAPH_X + (i + GRAPH_SIZE - items.length) * PR;
// context.setFillStyle(fg);
// context.setGlobalAlpha(1);
context.fillStyle = fg;
context.globalAlpha = 1;
context.fillRect(startPos, GRAPH_Y, PR, GRAPH_HEIGHT);
// context.setFillStyle(bg);
// context.setGlobalAlpha(0.9);
context.fillStyle = bg;
context.globalAlpha = 0.9;
context.fillRect(startPos, GRAPH_Y, PR, round((1 - (items[i] / maxValue)) * GRAPH_HEIGHT));
}
// context.draw();
}
};
function drawWithoutGraph(text) {
// bg
// context.setFillStyle(bg);
// context.setGlobalAlpha(1);
context.fillStyle = bg;
context.globalAlpha = 1;
context.fillRect(0, 0, WIDTH, HEIGHT);
// text
// context.setFillStyle(fg);
context.fillStyle = fg;
context.fillText(text, TEXT_X, TEXT_Y);
// graph bg
context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
// context.setFillStyle(bg);
// context.setGlobalAlpha(0.9);
context.fillStyle = bg;
context.globalAlpha = 0.9;
context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
}
};
export { Stats /*as default*/ };
src/Stats1.ts deleted 100644 → 0
View file @ 9f99bda7
/**
* @author mrdoob / http://mrdoob.com/
*/
var Stats = function (canvasId) {
var beginTime = Date.now(), prevTime = beginTime, frames = 0;
//@ts-ignore
var fpsPanel = new Stats.Panel(canvasId, 'FPS', '#0ff', '#002');
return {
begin: function () {
beginTime = Date.now();
},
end: function () {
frames++;
var time = Date.now();
if (time >= prevTime + 1000) {
fpsPanel.update((frames * 1000) / (time - prevTime), 100.0);
prevTime = time;
frames = 0;
}
return time;
},
update: function () {
beginTime = this.end();
},
};
};
//@ts-ignore
Stats.Panel = function (canvasId, name, fg, bg) {
var min = Infinity, max = 0, round = Math.round;
var PR = 1;
var WIDTH = 80 * PR, HEIGHT = 48 * PR,
TEXT_X = 3 * PR, TEXT_Y = 2 * PR,
GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR,
GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR;
var GRAPH_SIZE = GRAPH_WIDTH / PR;
var items = [];
//@ts-ignore
var context = my.createCanvasContext(canvasId);
context.font = 'bold ' + (9 * PR) + 'px Helvetica,Arial,sans-serif';
context.setTextBaseline('top');
drawWithoutGraph(name);
context.draw();
return {
update: function (value, maxValue) {
items.push(value);
while (items.length > GRAPH_SIZE) {
items.shift();
}
min = Math.min(min, value);
max = Math.max(max, value);
drawWithoutGraph(round(value) + ' ' + name + ' (' + round(min) + '-' + round(max) + ')');
// graph inner
for (var i = 0; i < items.length; i++) {
var startPos = GRAPH_X + (i + GRAPH_SIZE - items.length) * PR;
context.setFillStyle(fg);
context.setGlobalAlpha(1);
context.fillRect(startPos, GRAPH_Y, PR, GRAPH_HEIGHT);
context.setFillStyle(bg);
context.setGlobalAlpha(0.9);
context.fillRect(startPos, GRAPH_Y, PR, round((1 - (items[i] / maxValue)) * GRAPH_HEIGHT));
}
context.draw();
}
};
function drawWithoutGraph(text) {
// bg
context.setFillStyle(bg);
context.setGlobalAlpha(1);
context.fillRect(0, 0, WIDTH, HEIGHT);
// text
context.setFillStyle(fg);
context.fillText(text, TEXT_X, TEXT_Y);
// graph bg
context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
context.setFillStyle(bg);
context.setGlobalAlpha(0.9);
context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
}
};
export { Stats /*as default*/ };
src/index.ts
View file @ da265b69
......@@ -36,5 +36,5 @@ export * from "./3d";
//spine
export * from "./spine";
// export * from "./Stats";
\ No newline at end of file
//fps面板，后续可以加入每次drawCall，总绘制对象等等
export * from "./2d/FpsPanel";
\ No newline at end of file
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