Cara Membuat Tampilan Game Phaser Otomatis Mengikuti Ukuran Layar Perangkat

Pada saat membuat game dengan Phaser versi 2, setelah Game dapat berjalan dengan baik pada layar komputer maka selanjutnya adalah menguji coba game dilayar perangkat. Masalahnya setiap perangkat mobile seperti Android dan iPhone pada umumnya memiliki ukuran resolusi yang berbeda-beda. Dengan banyaknya perbedaan itu maka game yang sudah tampil bagus disatu perangkat belum tentu juga akan sama bagusnya diperangkat yang lain.

Masalah ini akan selalu dihadapi bila game akan dirilis. Oleh sebab itu, kita harus segera menemukan solusinya. Salah satu cara yang disarankan adalah dengan membuat game dapat mendeteksi sendiri ukuran layar kemudian menyesuikan secara otomatis setiap kali game sedang diload.

Cara Membuat Phaser Menyesuaikan Ukuran Layar Perangkat

Pertama kita tentukan dulu ukuran game yang kita inginkan dalam variabel, ukuran landscape berarti lebar lebih dari tingginya atau potrait berarti ukuran tingginya lebih dari lebarnya.

var targetWidth = 720; // lebar game yang kita inginkan

var targetHeight = 480; // tinggi game yang kita inginkan

// Ukuran rasio

//Small – 360x240

//Normal – 480x320

//Large – 720x480

//XLarge – 960x640

//XXLarge – 1440x960

//aspect ratio perangkat

var deviceRatio = (window.innerWidth/window.innerHeight);

//ratio baru menyesuaikan ukuran layar

var newRatio = (targetHeight/targetWidth)*deviceRatio;

var newWidth = targetWidth*newRatio;

var newHeight = targetHeight;

var gameWidth = newWidth;

var gameHeight = newHeight;

var gameRendrer = Phaser.AUTO;

Kemudian Tambahkan kode berikut di dalam state boot sehingga kode ini akan dijalankan lebih dulu dan akan dieksekusi setiap game dijalankan.

//Kode pada state Boot

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

        game.scale.pageAlignHorizontally = true;

        game.scale.pageAlignVertically = true;

        game.scale.forceLandscape = true;

        game.scale.setScreenSize(true);

Anda juga boleh mengubah ukuran menjadi potrait seperti berikut:

var targetWidth = 480; // lebar game yang anda inginkan

var targetHeight = 720; // tinggi game yang anda inginkan

Setelah itu maka Game akan dapat ditampilkan menyesuaikan pada resolusi perangkat setiap diload. Contohnya seperti berikut:

Tampilan di Smartphone

Tampilan di Tablet