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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.