Search the Community

Showing results for tags 'black borders'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 1 result

  1. 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 in and run it. 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> <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,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,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 = Phaser.ScaleManager.SHOW_ALL; = true; = 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 = '#ff4000';;'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() {'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(,,'green_circle'); this.green_circle.anchor.setTo(0.5,0.5);;,function(){'next_screen');},this); //use prototype => sprite with white_circle this.white_circle=new _sprite(game,,1800,'white_circle');,function(){this.white_circle.say_hello();},this); //use another prototype with inheritance this.super_white_circle=new _super_sprite(game,,1500,'white_circle','i am superman');,function(){this.super_white_circle.show_super_power();},this);,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(,300,'green_circle'); this.green_circle.anchor.setTo(0.5,0.5); this.green_circle.alpha=0.5;; }, }; And finally you could download all the template below( To launch the app, go to template/www/index.html or upload the file in and run it. Enjoy ! ps liste of tools i use : image editor => vector image => font to image => convert music to ogg => reduce png => particle editor => text editor the best => 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 => colorscheme => os : awesome wm on linux with zsh an interesting link to review the basis from javascript in 5 minutes >