Search the Community

Showing results for tags 'cocoon.js'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 3 results

  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 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
  2. Hello, I try to figure out the business model of cocoon.js, but with no luck so far. Does anybody know if cocoon.js is free to use for commercial products? Regards, Kai
  3. Hello everyone, I am new to Phaser, and I am having trouble using it with Ludei's CocoonJS on the iPad. I am using Phaser 1.0.7 (although I had the same problem with 1.0.6 as well). When I use Phaser.CANVAS for rendering, I get the following error from CocoonJS: JavaScript Exception (Line: 1 Tag: 'DOMContentLoaded'): Error: Phaser.Game - cannot create Canvas or WebGL context, aborting.When I use Phaser.WEBGL or Phaser.Auto, the program seems to run OK, but isn't properly scaled (it runs in a small square on the bottom left of the screen). Is anyone successfully using Phaser with Ludei CocoonJS and able to get it to scale correctly (or run in canvas mode). Any help would be greatly appreciated! Thanks, Rex