Skip to content

F
fyge_for_tb
Commit 7650b0a2 authored by 邱旭's avatar 邱旭
Browse files
Options

触摸事件，代理多个点鸡点(为了兼容淘宝)

parent 35fc3497
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 44828 additions and 20 deletions
build/fyge.min.js
View file @ 7650b0a2
This diff is collapsed.
build/fyge.min.js.map
View file @ 7650b0a2
This diff is collapsed.
examples/2d.html
View file @ 7650b0a2
......@@ -14,7 +14,8 @@
<!-- 加载svga文件用 npm svga-parser-->
<script src="./js/svgaParser.min.js"></script>
<!-- 主引擎 -->
<script src="../build/fyge.min.js"></script>
<!-- <script src="../build/fyge.min.js"></script>-->
<script src="../debug/FYGE.js"></script>
<style>
html,
body {
......@@ -69,7 +70,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//分辨率
......@@ -274,4 +275,4 @@
})
</script>
</html>
\ No newline at end of file
</html>
examples/spine.html 0 → 100644
View file @ 7650b0a2
<!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"/>
<!-- 加载svga文件用 npm svga-parser-->
<script src="./js/svgaParser.min.js"></script>
<!-- 主引擎 -->
<!-- <script src="../build/fyge.min.js"></script>-->
<script src="../debug/FYGE.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;position: absolute;">
<canvas id="canvas" style="width: 100%;height: 100%;background-color:rgba(0, 0, 0, 0.7);"></canvas>
</div>
<div id="anis" style="position: absolute;z-index: 999;top:5%;width: 5%;">
</div>
<div id="skins" style="position: absolute;z-index: 999;top:5%;right:0%;width: 5%;">
</div>
<input type="text" id="x" value="" placeholder="x坐标"
style="position: absolute;z-index: 999;width: 10%;left:35%;top:5%">
<input type="text" id="y" value="" placeholder="y坐标"
style="position: absolute;z-index: 999;width: 10%;right:35%;top:5%">
</body>
<script>
window.addEventListener("load", async function () {
//获取canvas
const canvas = document.getElementById("canvas");
//建舞台，定宽适配，会根据实际窗口尺寸上下裁切，所以stage实际y坐标会偏移stage.viewRect.y
const stage = new FYGE.Stage(
canvas,
750,//设计宽度，按设计搞给的就行
1624,//设计高度
document.body.clientWidth,
document.body.clientHeight,
FYGE.RENDERER_TYPE.WEBGL,
false,
false,
window.devicePixelRatio || 1//分辨率
);
//鼠标事件
stage.addWebMouseEvent();
//stage初始化
stage.addEventListener(FYGE.Event.INIT_STAGE, async () => {
const textures = await new Promise((r) => {
FYGE.loadAtlas(
"./输出文件/小招喵换装.atlas",
(d) => r(d),
(e) => console.log(e),
"./输出文件/小招喵换装.png",
)
});
FYGE.GlobalLoader.loadJson((s, res) => {
res.textures = textures;
creatSpine(res)
}, "./输出文件/小招喵换装.json",);
function creatSpine(spineData) {
const spine = new FYGE.Spine(spineData);
stage.addChild(spine);
spine.position.set(375, 800);
console.log("皮肤名称：", spine.skinNames);
// 设置当前皮肤，会把后面设置的挂件都加到这个皮肤上，应该由UED专门出一套默认皮肤。用于换皮，因为切换皮肤后挂件需要重新设置一遍
spine.setSkin("1yund"); // 设置到默认皮肤，无涂装的皮肤
spine.animationManager.showAni("1daiji", 0);
// const mySkin = new FYGE.Skin("mySkin");
// spine.skins.push(mySkin);
// spine.setSkin("mySkin");
console.log("皮肤名称：", spine.skinNames);
// 墨镜插槽
const mojSlot = spine.findSlot("moj"); // 对应插槽
const mojIndex = spine.findSlotIndex("moj"); // 插槽的index
// 裤子插槽
const kuziSlot = spine.findSlot("kuzi");
const kuziIndex = spine.findSlotIndex("kuzi");
const ysxxSlot = spine.findSlot("ysxx");
const ysxxIndex = spine.findSlotIndex("ysxx");
const zsxx2Slot = spine.findSlot("zsxx");
const zsxx2Index = spine.findSlotIndex("zsxx");
const skin = spine.findSkin("4yuanqi"); // 找到对应皮肤
const mojAtta = skin.getAttachment(mojIndex, "moj"); // 从对应皮肤找到插槽里的挂件
mojSlot.setAttachment(mojAtta); // 在当前皮肤的插槽里加入挂件
const ysxeAtta = skin.getAttachment(ysxxIndex, "ysxe"); // 从对应皮肤找到插槽里的挂件
ysxxSlot.setAttachment(ysxeAtta);
const zsseAtta = skin.getAttachment(ysxxIndex, "zsse"); // 从对应皮肤找到插槽里的挂件
ysxxSlot.setAttachment(zsseAtta); // 在当前皮肤的插槽里加入挂件
const zsse2Atta = skin.getAttachment(zsxx2Index, "zsse"); // 从对应皮肤找到插槽里的挂件
zsxx2Slot.setAttachment(zsse2Atta);
// const zsxeAtta = skin.getAttachment(zsxx2Index, "zsxe"); // 从对应皮肤找到插槽里的挂件
// zsxx2Slot.setAttachment(zsxeAtta); // 在当前皮肤的插槽里加入挂件
const skin2 = spine.findSkin("3mengmeng"); // 找到对应皮肤
const kuziAtta = skin2.getAttachment(kuziIndex, "kuzie"); // 从对应皮肤找到插槽里的挂件
kuziSlot.setAttachment(kuziAtta); // 在当前皮肤的插槽里加入挂件
// spine.updateSlots();
// 如何解析数据，示范
const dressData = {}; // 解析后的数据
// 将UED给的插槽和挂件名，还有分类，写成静态数据
const slotAndAtta = [
{ slotName: "moj", attaName: "moj", className: "墨镜" },
{ slotName: "kuzi", attaName: "kuzie", className: "裤子" },
{ slotName: "zsss2", attaName: "zsse", className: "右上手" },
{ slotName: "zsss", attaName: "zsse", className: "左上手" },
];
// 循环获取所有插槽的index
slotAndAtta.forEach((data) => {
data.slotIndex = spine.findSlotIndex(data.slotName);
});
// 获取皮肤名，并去掉默认皮肤
const skinNames = spine.skinNames;
skinNames.splice(skinNames.indexOf("default"), 1);
// 从插槽开始循环
slotAndAtta.forEach((data) => {
const { slotIndex, slotName, attaName, className } = data;
dressData[className] = dressData[className] || [];
// 再依此从皮肤中取挂件
skinNames.forEach((skinName) => {
const skin = spine.findSkin(skinName);
const atta = skin.getAttachment(slotIndex, attaName);
if (atta) {
dressData[className].push({
slotName, attaName, slotIndex, skinName,
texture: atta.texture, // 挂件的texture就是贴图，可以直接用Sprite渲染
});
}
});
});
console.log(dressData);
// 接下来进行列表渲染，自己写
// const slotIndex = spine.findSlotIndex("moj");
// let attachment = spine.getAttachment(slotIndex, "moj");
// console.log(attachment);
//
// const texture1 = new FYGE.Texture.fromUrl("./输出文件/images/moj.png");
// const texture = attachment.texture;
// console.log(texture)
// console.log(texture1)
// attachment.texture = texture1;
// spine.updateSlots();
createAnis(spine);
createSkins(spine);
//添加输入框xy
const inputX = document.getElementById("x");
inputX.oninput = () => {
const x = parseInt(inputX.value);
spine.x = x || 0;
}
const inputY = document.getElementById("y");
inputY.oninput = () => {
const y = parseInt(inputY.value);
spine.y = y || 0;
}
}
function createAnis(spine) {
const arr = spine.aniNames;
const div = document.getElementById("anis");
div.innerHTML = "";
for (let i = 0; i < arr.length; i++) {
let ani = arr[i];
const o = document.createElement("input");
o.type = "button";
o.style.margin = "7px";
o.style.minWidth = "50px";
o.value = ani;
o.addEventListener("click", () => {
spine.animationManager.showAni(ani, 0);
});
div.appendChild(o);
}
}
function createSkins(spine) {
const arr = spine.skinNames;
const div = document.getElementById("skins");
div.innerHTML = "";
for (let i = 0; i < arr.length; i++) {
let skin = arr[i];
const o = document.createElement("input");
o.type = "button";
o.style.margin = "7px";
o.style.minWidth = "50px";
o.style.float = "right"
o.value = skin;
o.addEventListener("click", () => {
console.log(skin)
spine.setSkin(skin);
});
div.appendChild(o);
}
}
// FYGE.loadSpine('https://yun.duiba.com.cn/db_games/activity/fyge_playground/Anim/testSpi.spi', (data => {
//
// //创建spine对象
// const spine = stage.addChild(new FYGE.Spine(data));
//
// console.log(spine.slots);
//
// //播放对应动画
// spine.animationManager.showAni('猫待机');
// spine.position.set(25, 400);
//
// const maoyz = spine.slots[3];
// console.log(maoyz);
//
// const shape = new FYGE.Shape();
// shape.beginFill(0xff0000).drawRect(0, 0, 100, 100).endFill();
//
// maoyz.addChild(shape);
//
// stage.addEventListener(FYGE.MouseEvent.CLICK, () => {
// const type = Math.floor(Math.random() * 2) + 1;
// //更换皮肤
// spine.setSkin('mao' + type);
// });
//
// }));
}, this);
//循环
loop();
function loop() {
//Tween每帧刷新
FYGE.Tween.flush()
//舞台每帧刷新
stage.flush();
requestAnimationFrame(loop)
}
})
</script>
</html>
examples/图片溶解.html 0 → 100644
View file @ 7650b0a2
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Fyge</title>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#render {
width: 100%;
height: 100%;
background-color: rgb(51, 51, 51);
border-radius: 5px;
}
#console {
margin-top: 8px;
width: 100%;
height: 100%;
border-radius: 5px;
}
</style>
<!-- <script src="//yun.duiba.com.cn/fyge/engine/2.0.50/fyge.min.js"></script>-->
<script src="//localhost:8090/debug/FYGE.js"></script>
<!-- <script src="//yun.duiba.com.cn/fyge/engine/2.0.43/fyge.min.js"></script>-->
<link rel="stylesheet" href="//yun.duiba.com.cn/fyge/luna-console/luna-object-viewer.css"/>
<link rel="stylesheet" href="//yun.duiba.com.cn/fyge/luna-console/luna-console.css"/>
<script src="//yun.duiba.com.cn/fyge/luna-console/luna-object-viewer.js"></script>
<script src="//yun.duiba.com.cn/fyge/luna-console/luna-console.js"></script>
</head>
<body>
<canvas id="render"></canvas>
<div id="console"></div>
<script type="module">
const SvgaParser = top.SvgaParser;
const consoleDiv = document.getElementById("console");
console.log(
"%cWelcome to Fyge Playground, My old friend! ♥♥♥",
"color: red; font-weight: bolder;"
);
window.addEventListener("error", (e) => {
console.error(e.message);
}, true);
window.addEventListener("unhandledrejection", (e) => {
console.error(e.reason);
}, true);
function debounce(fn, delay = 2000) {
let timer = null;
return function (...args) {
let context = this;
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(context, args)
}, delay)
}
}
let stage = null;
window.onload = function () {
const canvas = document.getElementById("render");
const { innerWidth, innerHeight, devicePixelRatio: dpi = 1 } = window;
canvas.width = innerWidth;
canvas.height = innerHeight;
stage = new FYGE.Stage(
canvas,
1000, 750,
innerWidth, innerHeight,
FYGE.RENDERER_TYPE.WEBGL,
false, false, 2
);
// 鼠标事件
const mouseEvent = stage.onMouseEvent.bind(stage);
// canvas.addEventListener("touchstart", mouseEvent, false);
// canvas.addEventListener('touchmove', mouseEvent, false);
// canvas.addEventListener('touchend', mouseEvent, false);
canvas.addEventListener("mousedown", mouseEvent, false);
canvas.addEventListener('mousemove', mouseEvent, false);
canvas.addEventListener('mouseup', mouseEvent, false);
// stage.addEventListener(FYGE.Event.INIT_STAGE, () => {
// initScene(stage);
// }, this);
const winSizeChange = async () => {
const width = window.innerWidth;
const height = width * 0.75;
canvas.style.width = width + "px";
canvas.style.height = height + "px";
consoleDiv.style.height = "calc(100% - " + height + "px)";
stage.resize(width, height);
}
window.addEventListener("resize", debounce(winSizeChange, 1000));
winSizeChange();
loop();
initScene(stage);
}
const loop = () => {
requestAnimationFrame(loop);
FYGE.Tween.flush();
stage.flush();
}
async function initScene(stage) {
const winSize = {}; // winSize
Object.defineProperty(winSize, "width", {
get: function () {
return 1000;
},
set: function () {
console.error("不可以修改winSize.width")
},
enumerable: true,
configurable: false,
});
Object.defineProperty(winSize, "height", {
get: function () {
return 750;
},
set: function () {
console.error("不可以修改winSize.height")
},
enumerable: true,
configurable: false,
});
// shader
const fs = `precision mediump float;
uniform sampler2D u_texture;
uniform sampler2D u_dissolve;
uniform float u_dissolveThreshold;
varying vec2 vTextureCoord;
void main () {
float value = texture2D(u_dissolve, vTextureCoord).r;
if (value < u_dissolveThreshold){
discard;
}
vec4 color = texture2D(u_texture, vTextureCoord);
if (value < u_dissolveThreshold + 0.05){
color = vec4(0.9, 0.6, 0.3, color.a);
}
gl_FragColor = color;
}
`;
// //yun.duiba.com.cn/spark/assets/856b0e12c1056234126d9c768ac28d02cacba3df.png
// //yun.duiba.com.cn/spark/assets/8522883a58cada0f8771b992cb79c43b1d2b5260.png
// //yun.duiba.com.cn/spark/assets/avatar.795b192a3cf189bc93e795f449510b2d6b8566b4.jpeg
// //yun.duiba.com.cn/aurora/assets/7dc53c81c594c683276013e91c56d6ef15c7cc94.jpg
const src = "//yun.duiba.com.cn/spark/assets/856b0e12c1056234126d9c768ac28d02cacba3df.png";
const dissolveSrc = "//yun.duiba.com.cn/spark/assets/8522883a58cada0f8771b992cb79c43b1d2b5260.png";
const texture = await new Promise((resolve) => {
FYGE.GlobalLoader.loadImage((success, image) => {
if (success) resolve(FYGE.Texture.fromImage(image));
}, src);
})
const dissolve = await new Promise((resolve) => {
FYGE.GlobalLoader.loadImage((success, image) => {
if (success) resolve(FYGE.Texture.fromImage(image));
}, dissolveSrc);
})
// 创建图片
const sprite = new FYGE.Sprite(texture);
sprite.anchorTexture.set(0.5, 0.5);
sprite.position.set(375, 375);
stage.addChild(sprite);
// 创建滤镜
const filter = new FYGE.Filter(null, fs);
// 设置一些uniform变量
filter.uniforms.u_dissolveThreshold = 0.5;
filter.uniforms.u_dissolve = dissolve;
// 给图片设置滤镜
sprite.filters = [filter];
const bar = stage.addChild(new FYGE.Shape())
.beginFill(0xffffff)
.drawRect(0, 0, 400, 20)
.endFill();
bar.position.set(300, 700);
const handler = stage.addChild(new FYGE.Shape())
.beginFill(0xff0000)
.drawCircle(0, 0, 30)
.endFill();
handler.position.set(500, 710);
handler.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, (e) => {
const move = (e) => {
handler.x = e.stageX;
let progress = (e.stageX - 300) / 400;
if (progress < 0) {
progress = 0;
handler.x = 300;
}
if (progress > 1) {
progress = 1;
handler.x = 700;
}
filter.uniforms.u_dissolveThreshold = progress;
}
stage.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, move);
handler.once(FYGE.MouseEvent.MOUSE_UP, () => {
stage.removeEventListener(FYGE.MouseEvent.MOUSE_MOVE, move);
});
});
}
</script>
</body>
</html>
package.json
View file @ 7650b0a2
......@@ -13,7 +13,7 @@
"declare2": "tsc -d --declarationDir types --emitDeclarationOnly",
"build": "webpack",
"dev": "webpack -w",
"dev1": "rollup -c -m -w",
"dev1": "rollup -c rollup.config.js -m -w",
"watch": "webpack --watch",
"typedoc": "typedoc src/index.ts"
},
......
src/2d/display/Stage.ts
View file @ 7650b0a2
......@@ -464,7 +464,8 @@ export class Stage extends Container {
e.identifier = 0;
points = [e];
} else {
points = [e.changedTouches[0]];
// points = [e.changedTouches[0]];
points = e.changedTouches;
}
// points = [e.changedTouches[0]];
// points = [e.touches[0]];//不能用这个
......
src/2d/text/BitmapText.ts
View file @ 7650b0a2
......@@ -67,11 +67,11 @@ export class BitmapText extends Container {
* 设置文本
*/
set text(value: string) {
if (value === this._text) return;
let i;
if (value === this._text) return;
this._text = value;
var arr = value || [];
//
for (var i = 0; i < arr.length; i++) {
const arr = value || [];
for (i = 0; i < arr.length; i++) {
if (this.children[i]) {
//先用完原先$children里的
this.children[i]["text"] = arr[i];
......@@ -90,17 +90,17 @@ export class BitmapText extends Container {
//如果多了，去掉后面的，回收
if (this.children.length > arr.length) {
//移除后序
for (var i = this.children.length - 1; i >= arr.length; i--) {
for (i = this.children.length - 1; i >= arr.length; i--) {
let c = this.children[i] as BitmapTextSingle;
this.removeChild(c);
bitmapTextSinglePool.push(c);
}
}
//适配
this.adaptate()
this.adaptate();
}
/**
*
*
* @param textures 0到9的贴图
*/
constructor(textures: { [text: string]: Texture }) {
......@@ -187,7 +187,7 @@ class BitmapTextSingle extends Sprite {
}
/**
*
*
* @param textures 贴图表，{"0":texture1,"1":texture2,".":texture3}
*/
constructor(textures: { [text: string]: Texture }) {
......@@ -197,9 +197,9 @@ class BitmapTextSingle extends Sprite {
/**
* 替换资源，基本不用吧应该
* @param textures
* @param textures
*/
reset(textures: { [text: string]: Texture }) {
this.textures = textures
}
}
\ No newline at end of file
}
src/3d/Mesh3D.ts
View file @ 7650b0a2
import { Object3D } from "./Object3D";
import { Geometry } from "./Geometry";
import { BaseMaterial, RenderSideType } from "./materials/BaseMaterial";
import { BaseMaterial, RenderSideType } from "./materials";
import { Matrix4 } from "./math/Matrix4";
import { Ray } from "./math/Ray";
import { Sphere } from "./math/Sphere";
......
webpack.config.js
View file @ 7650b0a2
......@@ -2,7 +2,7 @@ var path = require('path');
var webpack = require('webpack')
module.exports = {
mode: "production",//'development',production
mode: "development",//'development',production
entry: {
"fyge.min": "./src/index.ts",
},
......@@ -30,4 +30,4 @@ module.exports = {
resolve: {
extensions: ['.webpack.js', '.web.js', '.ts', '.js']
}
}
\ 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