ノート 8/10

最近Javascriptに興味があってPixi,jsを使ってみた。初めて使う言語なので書き方がおかしいかも

基本的なコード

PixiJS API Documentation

JSONで読み込む

• スプライトシートを扱いたいときに必要

const app = new PIXI.Application();
document.body.appendChild(app.view);

app.loader
.add('imgs', './img.json')
.load((loader, resources) => {
    const imgs = resources['img'].textures;
    img = new PIXI.Sprite(imgs['001']);
    app.renderer.resize(img.width, img.height);
    app.stage.addChild(img);
});

参照

• PIXI.loaderで読んだjsonから、複数のオブジェクトを描き出す - Bye Bye Moore

選択した画像を読み込んで表示する

<input id="file" type="file"></input>

const app = new PIXI.Application();
document.body.appendChild(app.view);

var $ = function (x) { return document.getElementById(x); };
$('file')
.addEventListener('change', (e) => {
    var file = e.target.files[0];
    if (!file.type.includes('image')) {
        return;
    }
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () { //ファイル名と拡張子と最終更新日時が同じファイルは同一と見なされて読み込まれない
        var name = file.name + file.type + file.size + file.lastModifiedDate;
        app.loader
        .add(name, reader.result)
        .load((loader, resources) => {
            img = new PIXI.Sprite(resources[name].texture);
            app.renderer.resize(img.width, img.height);
            app.stage.removeChild();
            app.stage.addChild(img);
        });
    };
},
false);