diff --git a/.editorconfig b/.editorconfig index e5abd51..7675716 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,5 +1,7 @@ +# EditorConfig is awesome: https://EditorConfig.org root = true +# for all projects [*] indent_style = space indent_size = 4 @@ -8,12 +10,62 @@ charset = utf-8 trim_trailing_whitespace = 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}] indent_style = tab 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] indent_style = space 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 diff --git a/scr/01/app.js b/scr/01/app.js new file mode 100644 index 0000000..e61e043 --- /dev/null +++ b/scr/01/app.js @@ -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; + } +}); diff --git a/scr/01/index.html b/scr/01/index.html new file mode 100644 index 0000000..dc3f81e --- /dev/null +++ b/scr/01/index.html @@ -0,0 +1,10 @@ + + + + PixiJS + + + + + + diff --git a/scr/02/app.js b/scr/02/app.js new file mode 100644 index 0000000..89097ba --- /dev/null +++ b/scr/02/app.js @@ -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); diff --git a/scr/02/index.html b/scr/02/index.html new file mode 100644 index 0000000..1dcdad9 --- /dev/null +++ b/scr/02/index.html @@ -0,0 +1,11 @@ + + + + + PixiJS - Текст + + + + + + diff --git a/scr/03/app.js b/scr/03/app.js new file mode 100644 index 0000000..29b0509 --- /dev/null +++ b/scr/03/app.js @@ -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); diff --git a/scr/03/index.html b/scr/03/index.html new file mode 100644 index 0000000..27f70d0 --- /dev/null +++ b/scr/03/index.html @@ -0,0 +1,11 @@ + + + + + PixiJS - Фигуры + + + + + + diff --git a/scr/04/app.js b/scr/04/app.js new file mode 100644 index 0000000..0553b7d --- /dev/null +++ b/scr/04/app.js @@ -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); diff --git a/scr/04/index.html b/scr/04/index.html new file mode 100644 index 0000000..caeddd8 --- /dev/null +++ b/scr/04/index.html @@ -0,0 +1,11 @@ + + + + + PixiJS - Видимые и невидимые объекты + + + + + + diff --git a/scr/05/app.js b/scr/05/app.js new file mode 100644 index 0000000..0553b7d --- /dev/null +++ b/scr/05/app.js @@ -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); diff --git a/scr/05/index.html b/scr/05/index.html new file mode 100644 index 0000000..38f52f2 --- /dev/null +++ b/scr/05/index.html @@ -0,0 +1,11 @@ + + + + + PixiJS - Слот-машина + + + + + + diff --git a/scr/assets/aa/Animation Strips/Coin Animation Strip.png b/scr/assets/aa/Animation Strips/Coin Animation Strip.png new file mode 100644 index 0000000..e81e554 Binary files /dev/null and b/scr/assets/aa/Animation Strips/Coin Animation Strip.png differ diff --git a/scr/assets/aa/Animation Strips/Coin Collect Particle Strip.png b/scr/assets/aa/Animation Strips/Coin Collect Particle Strip.png new file mode 100644 index 0000000..ac98c26 Binary files /dev/null and b/scr/assets/aa/Animation Strips/Coin Collect Particle Strip.png differ diff --git a/scr/assets/aa/Background.png b/scr/assets/aa/Background.png new file mode 100644 index 0000000..2adf10d Binary files /dev/null and b/scr/assets/aa/Background.png differ diff --git a/scr/assets/aa/Tilesets/Decoration Tiles.png b/scr/assets/aa/Tilesets/Decoration Tiles.png new file mode 100644 index 0000000..687b7ed Binary files /dev/null and b/scr/assets/aa/Tilesets/Decoration Tiles.png differ diff --git a/scr/assets/aa/Tilesets/Game Objects Tiles.png b/scr/assets/aa/Tilesets/Game Objects Tiles.png new file mode 100644 index 0000000..541d21f Binary files /dev/null and b/scr/assets/aa/Tilesets/Game Objects Tiles.png differ diff --git a/scr/assets/aa/Tilesets/Ground Tiles.png b/scr/assets/aa/Tilesets/Ground Tiles.png new file mode 100644 index 0000000..03d2978 Binary files /dev/null and b/scr/assets/aa/Tilesets/Ground Tiles.png differ diff --git a/scr/assets/chest.png b/scr/assets/chest.png new file mode 100644 index 0000000..b64231b Binary files /dev/null and b/scr/assets/chest.png differ