phina.jsで背景画像のサイズ変更方法
前の投稿(phina.jsで画面サイズの変更方法)では、背景画像ではなく、ゲーム画面のサイズ変更について書きました。今回は、背景画像のサイズの変更方法です。
ほぼ、前回と同じです。
phina.jsのバージョンは、0.2.3
Windows10のパソコンで確認をしました。
参考にしたサイトは、https://qiita.com/halboujp/items/1cae099645d7a4e1bf2f
Step-1のコードを参考にしました。
phina.jsのコンストラクタ(init: function())と、親クラス(this.superInit())にオプションとして背景画像の横幅、縦幅を指定します。
背景画像の横幅、縦幅をグローバル変数として宣言。
let SCREEN_X = 800; //横幅
let SCREEN_Y = 300; //縦幅
背景画像を指定します。
let ASSETS = {
image:{
bg: “img/bg.jpg”,
},
};
参考にしたコードは、背景画像を指定したサイズで表示しているので、そのまま23行目~27行目をコピーしました。
this.bg = Sprite(“bg”).addChildTo(this);
this.bg.origin.set(0, 0);
this.bg.width = SCREEN_X;
this.bg.height = SCREEN_Y;
phina.main(function() {
let app = GameApp({
部分は変更はないので、そのまま参考にしたプログラムをコピーしました。
注意するのは、背景画像が指定されたサイズに縮小、拡大されて表示されることです。
私が書いたサンプルプログラムです。
ソースはこちら
<!doctype html> <html> <head> <meta charset='utf-8' /> <!-- 画面の横幅にあわせた窓をつくる。ユーザがズームできないように設定している--> <meta name="viewport" content="width=device-width, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>js勉強中</title> <!-- phina.js を読み込む --> <script src='phina.js'></script> <!-- メイン処理 --> <script src='main.js'></script> </head> <body> <!-- Javascript作るだけでゲームはうごきます --> </body> </html>
phina.globalize(); // phina.jsがこれで使えるようになります。 let SCREEN_X = 800; // 背景画像の横サイズ let SCREEN_Y = 600; // 背景画像の縦サイズ let scale = 1; // こんな感じで画像や音のファイルを指定します let ASSETS = { image:{ white:"img/te01.png", //背景画像 bg: "img/bg.jpg", }, }; phina.define('MainScene', { superClass: 'DisplayScene', init: function(option) { // ここでオプションとして横サイズ、縦サイズを指定します。 this.superInit(option); this.bg = Sprite("bg").addChildTo(this); // 背景画像に関する設定 this.bg.origin.set(0, 0); this.bg.width = SCREEN_X; this.bg.height = SCREEN_Y; let player = Sprite("white", 162, 199) .addChildTo(this) .setPosition(this.gridX.center(), this.gridY.center()) .setScale(scale); }, }); // ここがゲームスタートの入り口です phina.main(function() { let app = GameApp({ startLabel: 'main', width: SCREEN_X, height: SCREEN_Y, assets: ASSETS, }); app.run(); });
Your Message