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

espace · October 5, 2017

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 :

https://github.com/EnclaveGames/Cyber-Orb

and how to adjust the scale is based on:

Now my template for the beginners , index.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>example_test_scale</title>
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
<style>
body {
	margin: auto;
	display: table;
	position: absolute;
	border:0px;
	top: 0px;
	left: 0px;
	padding: 0; margin: 0;
	background: #ffff00
}
</style>
<!--necessary for cocoon.js-->
<script src="cordova.js"></script>    
<script src="src/phaser.js"></script>
<script src="src/main.js"></script>
</head>
<body>
</body>
<script>
document.addEventListener("deviceready", function() {
		setTimeout(function() {
				navigator.splashscreen.hide();
				}, 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);
 game.state.start('boot');
})();
</script>

</html>

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){
	this.picture=picture,
	this.posx=posx;
	this.posy=posy;
	//call the class sprite from Phaser
	Phaser.Sprite.call(this,game,this.posx,this.posy,this.picture);
	this.anchor.setTo(0.5,0.5);
	game.add.existing(this);
};

_sprite.prototype=Object.create(Phaser.Sprite.prototype);
// say hello from sprite
_sprite.prototype.say_hello=function(){
	alert(text);
};

//use another prototype but with the previous parameter from _sprite, it's inheritance
_super_sprite=function(game,posx,posy,picture,super_power){
	//call the first prototype
	_sprite.call(this,game,posx,posy,picture);
	this.super_power=super_power;
	this.scale.setTo(2,2);
};
_super_sprite.prototype=Object.create(_sprite.prototype);
// add a new characteritic to this prototype
_super_sprite.prototype.show_super_power=function(){
	alert(this.super_power);
};

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';
		this.game.scale.refresh();
		this.game.state.start('preloader');
	},
};

var preloader = {
	preload: function() {
		this.load.image('green_circle', 'img/green_circle.png');
		this.load.image('white_circle', 'img/white_circle.png');
	},
	create: function() {
		this.game.state.start('the_game');
		//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(){
			alert(test);
		};
		some_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');
		this.green_circle.anchor.setTo(0.5,0.5);
		this.game.add.existing(this.green_circle);
		this.game.time.events.add(2000,function(){this.game.state.start('next_screen');},this);
		//use prototype => sprite with white_circle
		this.white_circle=new _sprite(game,this.game.world.centerX,1800,'white_circle');
		this.game.time.events.add(1000,function(){this.white_circle.say_hello();},this);
		//use another prototype with inheritance 
		this.super_white_circle=new _super_sprite(game,this.game.world.centerX,1500,'white_circle','i am superman');
		this.game.time.events.add(1500,function(){this.super_white_circle.show_super_power();},this);
		this.game.time.events.add(1800,function(){this.super_white_circle.say_hello();},this);
	},
};

//for the next screen => next state, the green_circle move to top and alpha is minder
var next_screen = {
	create: function(){
		console.log("next");
		this.green_circle = this.add.sprite(this.game.world.centerX,300,'green_circle');
		this.green_circle.anchor.setTo(0.5,0.5);
		this.green_circle.alpha=0.5;
		this.game.add.existing(this.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.

https://docs.cocoon.io/article/developer-app/

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/

template.zip

bexphones · October 7, 2017

Excellent ! This works for me. Thanks for sharing.

Just a question : why arrow functions don't work in canvas+ ?

espace · October 7, 2017

honestly i don't know why ...maybe someone else could answer...

ps : i have updated my first code, it's more simple

espace · October 10, 2017

yet updated with simple example of prototype and inheritance inside.

espace · October 31, 2017

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

espace · November 5, 2017

update :

correcting style syntax with http://jshint.com/

add some advices to canvas+ and usefull tools

for chartboost i put it later.

Sign In

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

Recommended Posts

espace

Link to comment

Share on other sites

bexphones

Link to comment

Share on other sites

espace

Link to comment

Share on other sites

espace

Link to comment

Share on other sites

espace

Link to comment

Share on other sites

espace

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

Activity