iiiypuk/pixi-learning
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add 4 tutorial

Browse Source
This commit is contained in:
Alexander Popov 2022-08-15 02:58:54 +03:00
parent c2f5ab7706
commit 3c46f48ed8
Signed by: iiiypuk
GPG Key ID: D8C9B59A9F04A70C
18 changed files with 319 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
.editorconfig
View File

@ -1,5 +1,7 @@
# EditorConfig is awesome: https://EditorConfig.org
root = true root = true
# for all projects
[*] [*]
indent_style = space indent_style = space
indent_size = 4 indent_size = 4
@ -8,12 +10,62 @@ charset = utf-8
trim_trailing_whitespace = true trim_trailing_whitespace = true
insert_final_newline = true insert_final_newline = true
# Python
[*.py]
indent_style = space
indent_size = 4
# PHP
[*.php]
indent_style = space
indent_size = 4
# Crystal
[*.cr]
indent_style = space
indent_size = 2
# C
[{*.c,*.h}]
indent_style = space
indent_size = 4
# Web Sites
[{*.html,*.css,*.json}] [{*.html,*.css,*.json}]
indent_style = tab indent_style = tab
indent_size = 4 indent_size = 4
[humans.txt]
indent_style = tab
indent_size = 2
# Markdown
[*.md]
trim_trailing_whitespace = false
# Other
[Makefile]
indent_style = tab
indent_size = 4
[.gitconfig]
indent_style = tab
indent_size = 4
# JavaScript
[*.js] [*.js]
indent_style = space indent_style = space
indent_size = 2 indent_size = 2
[] [package.json]
indent_style = space
indent_size = 2
## for this repo
[~/SSH/config]
indent_style = tab
indent_size = 4
[~/SublimeText/*.sublime-*]
indent_style = tab
indent_size = 4

39
scr/01/app.js Normal file
View File

@ -0,0 +1,39 @@
// Создаём приложение app...
let app = new PIXI.Application({ width: 400, height: 400 });
document.body.appendChild(app.view); // и добавляем его на страницу
// Отключаем сглаживание
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
// Добавляем фон
app.renderer.backgroundColor = 0x779911;
console.log(app.renderer.options);
// Создаём спрайт и добавляем его на сцену
let sprite = PIXI.Sprite.from('/assets/chest.png');
// Установим точку привязки спрайта по центру
sprite.anchor.set(0.5);
// Увеличим размер спрайта вдвое
sprite.width *= 5;
sprite.height *= 5;
// Разместим спрайт по центру
sprite.y = app.screen.height / 2;
sprite.x = app.screen.width / 2;
app.stage.addChild(sprite);
sprite.interactive = true;
sprite.cursor = 'wait';
sprite.on('click', (event) => {
alert('bye!');
sprite.destroy();
console.log(sprite);
});
// Добавляем ticker для перемещения спрайта туда-сюда
app.ticker.add((delta) => {
if (sprite._destroyed != true) {
sprite.rotation += 0.05 * delta;
}
});

10
scr/01/index.html Normal file
View File

@ -0,0 +1,10 @@
<!doctype html>
<html>
<head>
<title>PixiJS</title>
<script src="/pixi.js"></script>
</head>
<body>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

46
scr/02/app.js Normal file
View File

@ -0,0 +1,46 @@
let app = new PIXI.Application({ width: 400, height: 400, backgroundColor: 0x339955 });
document.body.appendChild(app.view);
const basicText = new PIXI.Text('Просто обычный текст');
basicText.anchor.set(0.5);
basicText.x = app.screen.width / 2;
basicText.y = 60;
const style = new PIXI.TextStyle({
fontFamily: 'serif',
fontSize: 36,
fontStyle: 'italic',
fontWeight: 'bold',
fill: ['#ffffff', '#00ff99'], // gradient
stroke: '#4a1850',
strokeThickness: 5,
dropShadow: true,
dropShadowColor: '#000000',
dropShadowBlur: 4,
dropShadowAngle: Math.PI / 6,
dropShadowDistance: 6,
wordWrap: true,
wordWrapWidth: 400,
lineJoin: 'round',
});
const richText = new PIXI.Text('Текст со всякими стилями', style);
richText.anchor.set(0.5, 0);
richText.x = app.screen.width / 2;
richText.y = 100;
const basicTextCounter = new PIXI.Text('0');
basicTextCounter.style.fontSize = 50;
basicTextCounter.anchor.set(0.5);
basicTextCounter.x = app.screen.width / 2;
basicTextCounter.y = 275;
basicTextCounter.interactive = true;
basicTextCounter.cursor = 'pointer';
basicTextCounter.on('click', (event) => {
basicTextCounter.text = parseInt(basicTextCounter.text) + 1;
});
app.stage.addChild(basicText);
app.stage.addChild(richText);
app.stage.addChild(basicTextCounter);

11
scr/02/index.html Normal file
View File

@ -0,0 +1,11 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PixiJS - Текст</title>
<script src="/pixi.js"></script>
</head>
<body>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

27
scr/03/app.js Normal file
View File

@ -0,0 +1,27 @@
let app = new PIXI.Application({ width: 400, height: 400, backgroundColor: 0x424242 });
document.body.appendChild(app.view);
const graphics = new PIXI.Graphics();
// Прямоугольник
graphics.beginFill(0xDE3249);
graphics.drawRect(50, 50, 100, 100);
graphics.endFill();
// lineStyle(0) необходим, чтобы нарисовать круг без внешней обводки
graphics.lineStyle(0);
graphics.beginFill(0xDE3249, 1);
graphics.drawCircle(100, 250, 50);
graphics.endFill();
// А так мы нарисуем круг без заливки. Кольцо
graphics.lineStyle(2, 0xFEEB77, 1);
graphics.beginFill(0, .5);
graphics.drawCircle(250, 250, 50);
graphics.endFill();
graphics.interactive = true;
graphics.buttonMode = true;
graphics.on('click', (event) => { console.log('Click on shape'); });
app.stage.addChild(graphics);

11
scr/03/index.html Normal file
View File

@ -0,0 +1,11 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PixiJS - Фигуры</title>
<script src="/pixi.js"></script>
</head>
<body>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

50
scr/04/app.js Normal file
View File

@ -0,0 +1,50 @@
let app = new PIXI.Application({ width: 400, height: 400, backgroundColor: 0x2a2a3a });
document.body.appendChild(app.view);
let cirleVisible = true;
const shapeCircle = new PIXI.Graphics();
const shapeRect = new PIXI.Graphics();
shapeCircle.lineStyle(4, 0x101024, 1);
shapeCircle.beginFill(0xec8a4b, 1);
shapeCircle.drawCircle(app.screen.width / 2, app.screen.height / 2, 50);
shapeCircle.endFill();
shapeRect.lineStyle(2, 0x101024, 1);
shapeRect.beginFill(0xDE3249);
shapeRect.drawRect(app.screen.width / 2 - 100, app.screen.height - 100, 200, 50);
shapeRect.endFill();
shapeRect.interactive = true;
shapeRect.cursor = 'pointer';
shapeRect.on('mouseover', (event) => {
basicText.style.fill = 0xffffff;
});
shapeRect.on('mouseout', (event) => {
basicText.style.fill = 0;
});
shapeRect.on('click', (event) => {
cirleVisible = cirleVisible ? false : true;
// shapeCircle.visible = shapeCircle.visible ? false : true;
});
const basicText = new PIXI.Text('On / Off');
basicText.anchor.set(0.5);
basicText.x = app.screen.width / 2;
basicText.y = app.screen.height - 75;
app.ticker.add((delta) => {
if (cirleVisible) {
if (shapeCircle.alpha < 1) {
shapeCircle.visible = true;
shapeCircle.alpha += 0.05;
}
}
else {
if (shapeCircle.alpha > 0) shapeCircle.alpha -= 0.05;
else shapeCircle.visible = false;
}
});
app.stage.addChild(shapeCircle, shapeRect, basicText);

11
scr/04/index.html Normal file
View File

@ -0,0 +1,11 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PixiJS - Видимые и невидимые объекты</title>
<script src="/pixi.js"></script>
</head>
<body>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

50
scr/05/app.js Normal file
View File

@ -0,0 +1,50 @@
let app = new PIXI.Application({ width: 400, height: 400, backgroundColor: 0x2a2a3a });
document.body.appendChild(app.view);
let cirleVisible = true;
const shapeCircle = new PIXI.Graphics();
const shapeRect = new PIXI.Graphics();
shapeCircle.lineStyle(4, 0x101024, 1);
shapeCircle.beginFill(0xec8a4b, 1);
shapeCircle.drawCircle(app.screen.width / 2, app.screen.height / 2, 50);
shapeCircle.endFill();
shapeRect.lineStyle(2, 0x101024, 1);
shapeRect.beginFill(0xDE3249);
shapeRect.drawRect(app.screen.width / 2 - 100, app.screen.height - 100, 200, 50);
shapeRect.endFill();
shapeRect.interactive = true;
shapeRect.cursor = 'pointer';
shapeRect.on('mouseover', (event) => {
basicText.style.fill = 0xffffff;
});
shapeRect.on('mouseout', (event) => {
basicText.style.fill = 0;
});
shapeRect.on('click', (event) => {
cirleVisible = cirleVisible ? false : true;
// shapeCircle.visible = shapeCircle.visible ? false : true;
});
const basicText = new PIXI.Text('On / Off');
basicText.anchor.set(0.5);
basicText.x = app.screen.width / 2;
basicText.y = app.screen.height - 75;
app.ticker.add((delta) => {
if (cirleVisible) {
if (shapeCircle.alpha < 1) {
shapeCircle.visible = true;
shapeCircle.alpha += 0.05;
}
}
else {
if (shapeCircle.alpha > 0) shapeCircle.alpha -= 0.05;
else shapeCircle.visible = false;
}
});
app.stage.addChild(shapeCircle, shapeRect, basicText);

11
scr/05/index.html Normal file
View File

@ -0,0 +1,11 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PixiJS - Слот-машина</title>
<script src="/pixi.js"></script>
</head>
<body>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

BIN
scr/assets/aa/Animation Strips/Coin Animation Strip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 518 B

BIN
scr/assets/aa/Animation Strips/Coin Collect Particle Strip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 515 B

BIN
scr/assets/aa/Background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
scr/assets/aa/Tilesets/Decoration Tiles.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
scr/assets/aa/Tilesets/Game Objects Tiles.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
scr/assets/aa/Tilesets/Ground Tiles.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
scr/assets/chest.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 381 B