Compare commits
No commits in common. "4438b6ce743a395c06ee653f9189724000f6855d" and "c808a38f5ffca7088e5b735981bb428ce6f526c7" have entirely different histories.
4438b6ce74
...
c808a38f5f
@ -1,19 +0,0 @@
|
|||||||
---
|
|
||||||
title: "Проверка номера на MNP"
|
|
||||||
date: 2022-10-28T21:13:48+03:00
|
|
||||||
draft: false
|
|
||||||
tags: [life]
|
|
||||||
---
|
|
||||||
|
|
||||||
### Об MNP
|
|
||||||
MNP (mobile number portability) — это возможность сохранить свой телефонный номер
|
|
||||||
после смены поставщика услуг связи.
|
|
||||||
|
|
||||||
Есть вполне бесплатная возможность узнать оператора номера
|
|
||||||
на [сайте](https://zniis.ru/bdpn/check/)
|
|
||||||
«Центрального научно-исследовательского института связи».
|
|
||||||
Сервис возвращает оператора и регион номера.
|
|
||||||
|
|
||||||
А вот телеграм бот https://t.me/mnp_bot знает ещё дату и время переноса.
|
|
||||||
Откуда информация, я пока не выясил.
|
|
||||||
Возможно есть API на сайте **zniis.ru**.
|
|
||||||
@ -1,286 +0,0 @@
|
|||||||
---
|
|
||||||
title: "Pixi.js: Пример эффекта параллакс и использование ассетов"
|
|
||||||
date: 2022-10-29T00:24:59+03:00
|
|
||||||
draft: false
|
|
||||||
tags: [pixijs, gamedev, tutorial, javascript]
|
|
||||||
---
|
|
||||||
|
|
||||||
## Pixi.js 7.0.0
|
|
||||||
|
|
||||||
4 часа назад вышла [7–я версия](https://github.com/pixijs/pixijs/releases/tag/v7.0.0)
|
|
||||||
библиотеки [Pixi.js](https://pixijs.com).
|
|
||||||
|
|
||||||
Для тех, кто уже использует Pixi.js подготовлен
|
|
||||||
[документ](https://github.com/pixijs/pixijs/wiki/v7-Migration-Guide)
|
|
||||||
по миграции на новую версию.
|
|
||||||
|
|
||||||
В данном примере будем использовать загрузчик ассетов [PIXI.Assets](https://pixijs.download/release/docs/PIXI.Assets.html),
|
|
||||||
который потеснил [PIXI.Loader](https://pixijs.download/release/docs/PIXI.Loader.html).
|
|
||||||
Подробнее написано здесь: [v7-Migration-Guide#-replaces-loader-with-assets](https://github.com/pixijs/pixijs/wiki/v7-Migration-Guide#-replaces-loader-with-assets).
|
|
||||||
|
|
||||||
## PIXI.Assets
|
|
||||||
|
|
||||||
> PIXI.Assets — это универсальный инструмент для управления ресурсами в Pixi!
|
|
||||||
> Суперсовременный и простой в использовании, с достаточной гибкостью,
|
|
||||||
> чтобы настраивать и делать то, что вам нужно!
|
|
||||||
|
|
||||||
### Загрузка ассетов
|
|
||||||
Не бойся загружать данные несколько раз —
|
|
||||||
Pixi.Assets **НИКОГДА** ничего не загрузит больше одного раза.
|
|
||||||
|
|
||||||
Например:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
promise1 = PIXI.Assets.load('bunny.png')
|
|
||||||
promise2 = PIXI.Assets.load('bunny.png')
|
|
||||||
|
|
||||||
// promise1 === promise2
|
|
||||||
```
|
|
||||||
|
|
||||||
Вот несколько примеров загрузки ассетов:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// простой пример
|
|
||||||
PIXI.Assets.add('bunnyBooBoo', 'bunny.png');
|
|
||||||
const bunny = await PIXI.Assets.load('bunnyBooBoo');
|
|
||||||
|
|
||||||
// несколько значений
|
|
||||||
PIXI.Assets.add(['burger', 'chicken'], 'bunny.png');
|
|
||||||
|
|
||||||
const bunny = await PIXI.Assets.load('burger');
|
|
||||||
const bunny2 = await PIXI.Assets.load('chicken');
|
|
||||||
|
|
||||||
// передача параметров объекту
|
|
||||||
PIXI.Assets.add(
|
|
||||||
'bunnyBooBooSmooth',
|
|
||||||
'bunny{png,webp}',
|
|
||||||
{scaleMode:SCALE_MODES.NEAREST},
|
|
||||||
);
|
|
||||||
```
|
|
||||||
|
|
||||||
## Каркас приложения
|
|
||||||
|
|
||||||
HTML документ `index.html`:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<title>pixi.js - assets & parallax</title>
|
|
||||||
<script type="text/javascript" src="pixi.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script type="text/javascript" src="app.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
```
|
|
||||||
|
|
||||||
Код приложения `app.js`
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
let app;
|
|
||||||
let backgroundTextures;
|
|
||||||
let background = {
|
|
||||||
sky: null,
|
|
||||||
back: null,
|
|
||||||
middle: null,
|
|
||||||
front: null,
|
|
||||||
x: 0,
|
|
||||||
speed: 1,
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Инициализация PIXI и настройка PIXI.Assets */
|
|
||||||
window.onload = function() {
|
|
||||||
app = new PIXI.Application({
|
|
||||||
width: 640,
|
|
||||||
height: 360,
|
|
||||||
backgroundColor: 0x2a2a3a,
|
|
||||||
});
|
|
||||||
document.body.appendChild(app.view);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Функция инициализации уровня */
|
|
||||||
function initLevel() {
|
|
||||||
app.ticker.add(gameLoop);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Игровой цикл */
|
|
||||||
function gameLoop(delta) {
|
|
||||||
//
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
В переменной `app` я буду хранить объект `PIXI.Application`,
|
|
||||||
чтобы можно было получать доступ к нему из других функций.
|
|
||||||
|
|
||||||
В переменную `backgroundTextures` будет загружать текстуры.
|
|
||||||
|
|
||||||
Переменная `background` отвечает за необходимые параметры,
|
|
||||||
такие как скорость эффекта параллакса и положение тайлов изображений
|
|
||||||
**sky**, **back**, **middle**, **front**.
|
|
||||||
|
|
||||||
В этом примере я буду использовать ассет
|
|
||||||
[Desert Parallax Background](https://styloo.itch.io/desert-parallax-background)
|
|
||||||
за авторством **styloo**.
|
|
||||||
|
|
||||||
В этом ассете есть фон, и три изображения с частями пустыни.
|
|
||||||
|
|
||||||
## Добавление ассетов
|
|
||||||
|
|
||||||
Я распаковал ассет **Desert Parallax Background** в директорию `assets`,
|
|
||||||
а также переименовал изображения.
|
|
||||||
|
|
||||||
Теперь в функцию `window.onload = function() {}` указываем ресурсы,
|
|
||||||
которые я буду загружать и вызываем их загрузку.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
PIXI.Assets.add('bg_back', '/assets/3.png');
|
|
||||||
PIXI.Assets.add('desert_2', '/assets/2.png');
|
|
||||||
PIXI.Assets.add('desert_1', '/assets/1.png');
|
|
||||||
PIXI.Assets.add('desert_0', '/assets/0.png');
|
|
||||||
|
|
||||||
let promise = PIXI.Assets.load(
|
|
||||||
['bg_back', 'desert_2', 'desert_1', 'desert_0'],
|
|
||||||
(progress) => {
|
|
||||||
console.log(`Assets loading progress: ${progress * 100}%`);
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
Функция `PIXI.Assets.load` принимает в качестве аргумента имя ассета, который
|
|
||||||
необходимо загрузить, либо список ассетов.
|
|
||||||
|
|
||||||
Второй необязательный аргумент, это callback функция,
|
|
||||||
которая вызывается во время загрузки Ассетов.
|
|
||||||
Функции передается параметр `progress`,
|
|
||||||
который представляет процент (0.0 - 1.0) загруженных ассетов.
|
|
||||||
|
|
||||||
Функция возвращает **Promise** ассетов, которые были загружены.
|
|
||||||
|
|
||||||
По окончании загрузки ассетов, я вызываю функцию `initLevel()`,
|
|
||||||
а также передаю в переменную `backgroundTextures` список загруженых ассетов,
|
|
||||||
в данном случае это текстуры.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
promise.then((value) => {
|
|
||||||
backgroundTextures = value;
|
|
||||||
initLevel();
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## Инициализация тайлов
|
|
||||||
|
|
||||||
Для создания тайлов, я написал функцию `createBg()`, которая создаёт объект
|
|
||||||
[PIXI.TilingSprite](https://pixijs.download/release/docs/PIXI.TilingSprite.html)
|
|
||||||
и устанавливает позицию на экране.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
function createBg(texture) {
|
|
||||||
let tiling = new PIXI.TilingSprite(texture, 640, 360);
|
|
||||||
tiling.position.set(0, 0);
|
|
||||||
app.stage.addChild(tiling);
|
|
||||||
|
|
||||||
return tiling;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Создаёт тайлы:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
function initLevel() {
|
|
||||||
background.sky = createBg(backgroundTextures.bg_back);
|
|
||||||
background.back = createBg(backgroundTextures.desert_2);
|
|
||||||
background.middle = createBg(backgroundTextures.desert_1);
|
|
||||||
background.front = createBg(backgroundTextures.desert_0);
|
|
||||||
|
|
||||||
app.ticker.add(gameLoop);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Создаём эффект параллакса
|
|
||||||
|
|
||||||
Этот этап самый простой.
|
|
||||||
|
|
||||||
В игровом цикле я изменяю значение переменной `background.x` и
|
|
||||||
смещаю позицию тайлов.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
function gameLoop(delta) {
|
|
||||||
background.x = (background.x - background.speed);
|
|
||||||
background.front.tilePosition.x = background.x;
|
|
||||||
background.middle.tilePosition.x = background.x / 2;
|
|
||||||
background.back.tilePosition.x = background.x / 4;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Исходный код
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const DEBUG = true;
|
|
||||||
|
|
||||||
let app;
|
|
||||||
let backgroundTextures;
|
|
||||||
let background = {
|
|
||||||
sky: null,
|
|
||||||
back: null,
|
|
||||||
middle: null,
|
|
||||||
front: null,
|
|
||||||
x: 0,
|
|
||||||
speed: 1,
|
|
||||||
};
|
|
||||||
|
|
||||||
/** PIXI and PIXI.Assets init */
|
|
||||||
window.onload = function() {
|
|
||||||
app = new PIXI.Application({
|
|
||||||
width: 640,
|
|
||||||
height: 360,
|
|
||||||
backgroundColor: 0x2a2a3a,
|
|
||||||
});
|
|
||||||
document.body.appendChild(app.view);
|
|
||||||
|
|
||||||
PIXI.Assets.add('bg_back', '/assets/3.png');
|
|
||||||
PIXI.Assets.add('desert_2', '/assets/2.png');
|
|
||||||
PIXI.Assets.add('desert_1', '/assets/1.png');
|
|
||||||
PIXI.Assets.add('desert_0', '/assets/0.png');
|
|
||||||
|
|
||||||
let promise = PIXI.Assets.load(
|
|
||||||
['bg_back', 'desert_2', 'desert_1', 'desert_0'],
|
|
||||||
(progress) => {
|
|
||||||
if (DEBUG)
|
|
||||||
console.log(`Assets loading progress: ${progress * 100}%`);
|
|
||||||
});
|
|
||||||
|
|
||||||
promise.then((value) => {
|
|
||||||
backgroundTextures = value;
|
|
||||||
initLevel();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Level init */
|
|
||||||
function initLevel() {
|
|
||||||
background.sky = createBg(backgroundTextures.bg_back);
|
|
||||||
background.back = createBg(backgroundTextures.desert_2);
|
|
||||||
background.middle = createBg(backgroundTextures.desert_1);
|
|
||||||
background.front = createBg(backgroundTextures.desert_0);
|
|
||||||
|
|
||||||
app.ticker.add(gameLoop);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Game loop */
|
|
||||||
function gameLoop(delta) {
|
|
||||||
background.x = (background.x - background.speed);
|
|
||||||
background.front.tilePosition.x = background.x;
|
|
||||||
background.middle.tilePosition.x = background.x / 2;
|
|
||||||
background.back.tilePosition.x = background.x / 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Create background sprite */
|
|
||||||
function createBg(texture) {
|
|
||||||
let tiling = new PIXI.TilingSprite(texture, 640, 360);
|
|
||||||
tiling.position.set(0, 0);
|
|
||||||
app.stage.addChild(tiling);
|
|
||||||
|
|
||||||
return tiling;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
Loading…
Reference in New Issue
Block a user