espace

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 :

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.