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();
});


シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑