Skip to content

Commit

Permalink
1
Browse files Browse the repository at this point in the history
  • Loading branch information
@LeroyK111
LeroyK111 committed Apr 17, 2023
1 parent 90e33ad commit f391e0f
Show file tree
Hide file tree
Showing 50 changed files with 35,373 additions and 2,040 deletions.
28 changes: 14 additions & 14 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
# 干掉大于50mb文件，二进制缓存
*.mdb
/__pycache__/
*.mp4
*.pkg
*.exe
*.zip
*.7z
*.mp3
*.rar
/node_modules/
bybrid_app
/unpackage/dist
HTML+CSS
# 干掉大于50mb文件，二进制缓存
*.mdb
/__pycache__/
*.mp4
*.pkg
*.exe
*.zip
*.7z
*.mp3
*.rar
/node_modules/
bybrid_app
/unpackage/dist
HTML+CSS
.obsidian
138 changes: 69 additions & 69 deletions 2D/10渲染层级.html
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://pixijs.download/release/pixi.js"></script>
</head>
<body></body>
<script>
// 创建实例
const app = new PIXI.Application({ width: 640, height: 360 });
document.body.appendChild(app.view);

// 标题文字
const label = new PIXI.Text(
"Scene Graph:\n\napp.stage\n ┗ A\n ┗ B\n ┗ C\n ┗ D",
{ fill: "#ffffff" }
);
label.position = { x: 300, y: 100 };
app.stage.addChild(label);

// 封装
const letters = [];
function addLetter(letter, parent, color, pos) {
// 方块
const bg = new PIXI.Sprite(PIXI.Texture.WHITE);
bg.width = 100;
bg.height = 100;
bg.tint = color;
// 方块中的文字
const text = new PIXI.Text(letter, { fill: "#ffffff" });
text.anchor.set(0.5);
text.position = { x: 50, y: 50 };

// 将方块和文字封装在容器中
const container = new PIXI.Container();
container.position = pos;
container.visible = false;
container.addChild(bg, text);
parent.addChild(container);

letters.push(container);
return container;
}

// 定义四个容器
let a = addLetter("A", app.stage, 0xff0000, { x: 100, y: 100 });
let b = addLetter("B", a, 0x00ff00, { x: 20, y: 20 });
let c = addLetter("C", a, 0x0000ff, { x: 20, y: 40 });
let d = addLetter("D", app.stage, 0xff8800, { x: 140, y: 100 });

// 随之时间展示他们
let elapsed = 0.0;
app.ticker.add((delta) => {
elapsed += delta / 60.0;
if (elapsed >= letters.length) {
// 清零重置
elapsed = 0.0;
}
for (let i = 0; i < letters.length; i++) {
// 循环展示到第几个
letters[i].visible = elapsed >= i;
}
});
// 如果您想重新排序子对象，您可以使用setChildIndex(). 要在父母列表中的给定点添加孩子，请使用addChildAt(). sortableChildren最后，您可以使用该选项并结合设置zIndex每个子项的属性来启用对象子项的自动排序。
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://pixijs.download/release/pixi.js"></script>
</head>
<body></body>
<script>
// 创建实例
const app = new PIXI.Application({ width: 640, height: 360 });
document.body.appendChild(app.view);

// 标题文字
const label = new PIXI.Text(
"Scene Graph:\n\napp.stage\n ┗ A\n ┗ B\n ┗ C\n ┗ D",
{ fill: "#ffffff" }
);
label.position = { x: 300, y: 100 };
app.stage.addChild(label);

// 封装
const letters = [];
function addLetter(letter, parent, color, pos) {
// 方块
const bg = new PIXI.Sprite(PIXI.Texture.WHITE);
bg.width = 100;
bg.height = 100;
bg.tint = color;
// 方块中的文字
const text = new PIXI.Text(letter, { fill: "#ffffff" });
text.anchor.set(0.5);
text.position = { x: 50, y: 50 };

// 将方块和文字封装在容器中
const container = new PIXI.Container();
container.position = pos;
container.visible = false;
container.addChild(bg, text);
parent.addChild(container);

letters.push(container);
return container;
}

// 定义四个容器
let a = addLetter("A", app.stage, 0xff0000, { x: 100, y: 100 });
let b = addLetter("B", a, 0x00ff00, { x: 20, y: 20 });
let c = addLetter("C", a, 0x0000ff, { x: 20, y: 40 });
let d = addLetter("D", app.stage, 0xff8800, { x: 140, y: 100 });

// 随之时间展示他们
let elapsed = 0.0;
app.ticker.add((delta) => {
elapsed += delta / 60.0;
if (elapsed >= letters.length) {
// 清零重置
elapsed = 0.0;
}
for (let i = 0; i < letters.length; i++) {
// 循环展示到第几个
letters[i].visible = elapsed >= i;
}
});
// 如果您想重新排序子对象，您可以使用setChildIndex(). 要在父母列表中的给定点添加孩子，请使用addChildAt(). sortableChildren最后，您可以使用该选项并结合设置zIndex每个子项的属性来启用对象子项的自动排序。
</script>
</html>
80 changes: 40 additions & 40 deletions 2D/11精灵.html
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://pixijs.download/release/pixi.js"></script>
</head>
<body></body>
<script>

// 创建实例
const app = new PIXI.Application({ background: "#1099bb" });
document.body.appendChild(app.view);

// create a new Sprite from an image path
const bunny = PIXI.Sprite.from("https://pixijs.io/examples/examples/assets/bunny.png");

// center the sprite's anchor point
bunny.anchor.set(0.5);

// move the sprite to the center of the screen
bunny.x = app.screen.width / 2;
bunny.y = app.screen.height / 2;

app.stage.addChild(bunny);

// Listen for animate update
app.ticker.add((delta) => {
// just for fun, let's rotate mr rabbit a little
// delta is 1 if running at 100% performance
// creates frame-independent transformation
bunny.rotation += 0.1 * delta;
});



</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://pixijs.download/release/pixi.js"></script>
</head>
<body></body>
<script>

// 创建实例
const app = new PIXI.Application({ background: "#1099bb" });
document.body.appendChild(app.view);

// create a new Sprite from an image path
const bunny = PIXI.Sprite.from("https://pixijs.io/examples/examples/assets/bunny.png");

// center the sprite's anchor point
bunny.anchor.set(0.5);

// move the sprite to the center of the screen
bunny.x = app.screen.width / 2;
bunny.y = app.screen.height / 2;

app.stage.addChild(bunny);

// Listen for animate update
app.ticker.add((delta) => {
// just for fun, let's rotate mr rabbit a little
// delta is 1 if running at 100% performance
// creates frame-independent transformation
bunny.rotation += 0.1 * delta;
});



</script>
</html>
128 changes: 64 additions & 64 deletions 2D/12精灵表.html
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="module" src="https://pixijs.download/release/pixi.js"></script>
</head>
<body></body>
<script async type="module">
import * as PIXI from "pixi.js";

const app = new PIXI.Application(600, 600, { background: "#1099bb" });
document.body.appendChild(app.view);

// Create object to store sprite sheet data
const atlasData = {
frames: {
enemy1: {
frame: { x: 0, y:0, w:32, h:32 },
sourceSize: { w: 32, h: 32 },
spriteSourceSize: { x: 0, y: 0, w: 32, h: 32 }
},
enemy2: {
frame: { x: 32, y:0, w:32, h:32 },
sourceSize: { w: 32, h: 32 },
spriteSourceSize: { x: 0, y: 0, w: 32, h: 32 }
},
},
meta: {
image: 'https://pixijs.io/examples/examples/assets/bunny.png',
format: 'RGBA8888',
size: { w: 128, h: 32 },
scale: 1
},
animations: {
enemy: ['enemy1','enemy2'] //array of frames by name
}
}


// Create the SpriteSheet from data and image
const spritesheet = new PIXI.Spritesheet(
PIXI.BaseTexture.from(atlasData.meta.image),
atlasData
);

// Generate all the Textures asynchronously
await spritesheet.parse();

// spritesheet is ready to use!
const anim = new PIXI.AnimatedSprite(spritesheet.animations.enemy);

// set the animation speed
anim.animationSpeed = 0.1666;

// play the animation on a loop
anim.play();

// add it to the stage to render
app.stage.addChild(anim);
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="module" src="https://pixijs.download/release/pixi.js"></script>
</head>
<body></body>
<script async type="module">
import * as PIXI from "pixi.js";

const app = new PIXI.Application(600, 600, { background: "#1099bb" });
document.body.appendChild(app.view);

// Create object to store sprite sheet data
const atlasData = {
frames: {
enemy1: {
frame: { x: 0, y:0, w:32, h:32 },
sourceSize: { w: 32, h: 32 },
spriteSourceSize: { x: 0, y: 0, w: 32, h: 32 }
},
enemy2: {
frame: { x: 32, y:0, w:32, h:32 },
sourceSize: { w: 32, h: 32 },
spriteSourceSize: { x: 0, y: 0, w: 32, h: 32 }
},
},
meta: {
image: 'https://pixijs.io/examples/examples/assets/bunny.png',
format: 'RGBA8888',
size: { w: 128, h: 32 },
scale: 1
},
animations: {
enemy: ['enemy1','enemy2'] //array of frames by name
}
}


// Create the SpriteSheet from data and image
const spritesheet = new PIXI.Spritesheet(
PIXI.BaseTexture.from(atlasData.meta.image),
atlasData
);

// Generate all the Textures asynchronously
await spritesheet.parse();

// spritesheet is ready to use!
const anim = new PIXI.AnimatedSprite(spritesheet.animations.enemy);

// set the animation speed
anim.animationSpeed = 0.1666;

// play the animation on a loop
anim.play();

// add it to the stage to render
app.stage.addChild(anim);
</script>
</html>
Loading

0 comments on commit f391e0f

Please sign in to comment.