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