Jump to content

template for phaser - cocoon.io and scale for all devices without black borders + prototypes


Recommended Posts

Hi everybody,

To thank the users of this forum who helped me a lot, i put my template available to help new beginners or someone else.

This template offers :

  • correct scaling without stretching effect
  • portrait mode (for landscape mode you must invert width and height)
  • works with cocoon in webview+ and canvas+ mode (deviceready implemented) upload the file source.zip in cocoon.io and run it. https://cocoon.io/
  • NOTICE for canvas+, avoid this syntax, that don't work in canvas+, in webview and webview+ no problem
  • let variable;
    const anothervariable;
    var myFunc=()=>{}

    and prefer this:

  • var variable;
    var myFunc = function(){};


  • simple example with prototype and inheritance
  • use the states (i personnaly put all the states in a single file but you can quite put them in separate files, it's necessary to inform them in index.html eg:

    <script src="src/otherfile.js"></script>

This template is based on :


and how to adjust the scale is based on:



Now my template for the beginners , index.html

<!DOCTYPE html>

<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
body {
	margin: auto;
	display: table;
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 0; margin: 0;
	background: #ffff00
<!--necessary for cocoon.js-->
<script src="cordova.js"></script>    
<script src="src/phaser.js"></script>
<script src="src/main.js"></script>
document.addEventListener("deviceready", function() {
		setTimeout(function() {
				}, 5000, false);
(function() {
 //start with a game with these resolution : 1280-1920
 // personnaly i find it offers the best graphics for all devices but may slow some devices.
 // after put a safe zone 
 //1280+200 > 1480
 //1920 +350 > 2270 (350 is 200*1.5 > ratio from 1920/1280)
 var safe_zone_width=1480;
 var safe_zone_height=2270;
 var w = window.innerWidth ;//* pixelRatio,
 var h = window.innerHeight ;//* pixelRatio;
 var lw, lh; 
 if ( h > w ) {
 lw = h;
 lh = w;
 } else {
 lw = w;
 lh = h;
 var aspect_ratio_device = lw/lh;

 var aspect_ratio_safe_zone = safe_zone_height / safe_zone_width;
 var extra_height = 0, extra_width = 0;
 if (aspect_ratio_safe_zone < aspect_ratio_device) {
	 // have to add game pixels horizontally in order to fill the device screen
	 extra_height = aspect_ratio_device * safe_zone_width - safe_zone_height;
 } else {
	 // have to add game pixels vertically
	 extra_width = safe_zone_height / aspect_ratio_device - safe_zone_width;
 game = new Phaser.Game( safe_zone_width + extra_width, safe_zone_height + extra_height, Phaser.CANVAS, 'game');
 game.state.add('boot', boot);
 game.state.add('preloader', preloader);
 game.state.add('the_game', the_game);
 game.state.add('next_screen', next_screen);


my main.js

//initialize variables here
var test="1...2...3";
var text="hello from sprite";
//example of prototype => a simple sprite
_sprite = function(game,posx,posy,picture){
	//call the class sprite from Phaser

// say hello from sprite

//use another prototype but with the previous parameter from _sprite, it's inheritance
	//call the first prototype
// add a new characteritic to this prototype

var boot = {
	preload: function() {
	create: function() {
		//to scale the game
		this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
		this.game.scale.pageAlignHorizontally = true;
		this.game.scale.pageAlignVertically = true;
		//red color to see the background of the game itself
		// you must change the background in the index.html to have the same color in the background game 
		// > change the yellow in red it's only to see how the game is scalling
		this.game.stage.backgroundColor = '#ff4000';

var preloader = {
	preload: function() {
		this.load.image('green_circle', 'img/green_circle.png');
		this.load.image('white_circle', 'img/white_circle.png');
	create: function() {
		//do not use arrow function like this var some_function=()=>{alert(test)} 
		//it works on webview+ mode but not on canvas mode
		var some_function=function(){

var the_game = {
	create: function(){
		//to center an object in your game use this:
		this.green_circle = this.add.sprite(this.game.world.centerX,this.game.world.centerY,'green_circle');
		//use prototype => sprite with white_circle
		this.white_circle=new _sprite(game,this.game.world.centerX,1800,'white_circle');
		//use another prototype with inheritance 
		this.super_white_circle=new _super_sprite(game,this.game.world.centerX,1500,'white_circle','i am superman');

//for the next screen => next state, the green_circle move to top and alpha is minder
var next_screen = {
	create: function(){
		this.green_circle = this.add.sprite(this.game.world.centerX,300,'green_circle');


And finally you could download all the template below(template.zip).  To launch the app, go to template/www/index.html  or upload the file template.zip in cocoon.io and run it.


Enjoy !



ps liste of tools i use :

image editor => https://www.gimp.org/fr/

vector image => https://inkscape.org/fr/

font to image => http://kvazars.com/littera/

convert music to ogg  => https://audio.online-convert.com/fr/convertir-en-ogg

reduce png => https://tinypng.com/

particle editor => https://phaser-particle-editor.firebaseapp.com/

text editor the best  => https://neovim.io/doc/user/nvim.html

plugin with nvim :

Plug 'scrooloose/nerdtree'
Plug 'morhetz/gruvbox'
Plug 'Shougo/deoplete.nvim', { 'do': ':UpdateRemotePlugins' }
Plug 'Raimondi/delimitMate'
Plug 'rhysd/github-complete.vim'
Plug 'easymotion/vim-easymotion'
Plug 'terryma/vim-multiple-cursors'
Plug 'vim-syntastic/syntastic'
Plug 'kien/ctrlp.vim'
Plug 'majutsushi/tagbar'
Plug 'pangloss/vim-javascript'
Plug 'vim-scripts/indenthtml.vim'
Plug 'walm/jshint.vim'

syntax style correct => http://jshint.com/

colorscheme => https://github.com/joshdick/onedark.vim

os : awesome wm on linux with zsh

an interesting link to review the basis from javascript in 5 minutes > https://learnxinyminutes.com/docs/javascript/









Link to comment
Share on other sites

  • 3 weeks later...

having some problem with both cordova.js, chartboost and webview...

chartboost + canvas =>ok

chartboost+ webview+=> ok

chartboost+ webview=> no-ok

is anybody a good remplate who works with webview and chartboost ?

so i could put another update of my template

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...