Bobby

Members
  • Content Count

    7
  • Joined

  • Last visited

About Bobby

  • Rank
    Newbie
  • Birthday 06/15/1990

Profile Information

  • Gender
    Male
  • Location
    Jakarta, Indonesia

Contact Methods

  • Twitter
    _bobbylie

Recent Profile Visitors

780 profile views
  1. Using single Graphics object can't achieve the same result I expected. Anyway I found the culprit that make fps gradually drop, it was the changeBoxColor function. if ( curr.position.y < 0 ) { curr.isGoingDown = true; changeBoxColor( curr ); // Taking much resource } if ( curr.position.x < 0 ) { curr.isGoingRight = true; changeBoxColor( curr ); // Taking much resource } if ( curr.position.y > boxEdgeBottom ) { curr.isGoingDown = false; changeBoxColor( curr ); // Taking much resource } if ( curr.position.x > boxEdgeRight ) { curr.isGoingRight = false; changeBoxColor( curr ); // Taking much resource }in the end, I drop that feature and boom! the animation is now running smoothly with 100 boxes.
  2. Woah that's nice, didn't know that PIXI shipped with rAF polyfill. Adding that information to the doc might be useful for newcomers.
  3. I find PIXI v2 documentation is way better than current documentation. What I found really useful from documentation v2: Quick search/accessBird view to all method and propertiesIs there any chance current documentation implement same features?
  4. You must be using Paul Irish's requestAnimFrame. Download the script and include it in HTML before you javascript file.
  5. I end up using PIXI v3 and no more error I mentioned above.
  6. I made a little demo called pixi-bouncing-box. You can see the demo here. So initially there are 10 bouncing boxes. When button add 10 boxes is clicked, another 10 boxes are added to stage. The animation run smoothly at 60fps, even after 90 boxes added. But after awhile, the fps gradually decreased from 60 to 50 then down until 20fps with 90 boxes added to stage. I saw the PIXI v3 100k bunnies benchmark and it claimed it got 40fps. Did I make some mistakes? The code I made is available at Github, but I'll also post it here in case you need a quick scan. ;(function ( window, document, undefined ) { 'use strict'; var WIN_WIDTH = window.innerWidth; var WIN_HEIGHT = window.innerHeight; var btnAdd = document.querySelector('#add'); var renderer = new PIXI.CanvasRenderer(WIN_WIDTH, WIN_HEIGHT, { transparent: false, autoResize: true }); renderer.backgroundColor = 0xF5866B; document.body.appendChild( renderer.view ); var stage = new PIXI.Container(); var speed = 10; var box_w = 70; var box_h = 70; var boxes = []; addTenBoxes(); btnAdd.addEventListener('click', addTenBoxes, false); var boxEdgeRight = WIN_WIDTH - box_w; var boxEdgeBottom = WIN_HEIGHT - box_h; requestAnimationFrame(animate); function animate() { for (var i = boxes.length - 1; i >= 0; i--) { var curr = boxes[i]; if ( curr.isGoingRight ) { curr.position.x += speed; } else { curr.position.x -= speed; } if ( curr.isGoingDown ) { curr.position.y += speed; } else { curr.position.y -= speed; } if ( curr.position.y < 0 ) { curr.isGoingDown = true; changeBoxColor( curr ); } if ( curr.position.x < 0 ) { curr.isGoingRight = true; changeBoxColor( curr ); } if ( curr.position.y > boxEdgeBottom ) { curr.isGoingDown = false; changeBoxColor( curr ); } if ( curr.position.x > boxEdgeRight ) { curr.isGoingRight = false; changeBoxColor( curr ); } } renderer.render(stage); requestAnimationFrame(animate); } function addTenBoxes() { for (var i = 10 - 1; i >= 0; i--) { var box = new PIXI.Graphics(); box.beginFill(getRandomColor()); box.drawRect(0,0,box_w,box_h); box.isGoingRight = true; box.isGoingDown = true; box.position.x = getRandomXPos(); box.position.y = getRandomYPos(); box.endFill(); stage.addChild(box); boxes.push(box); } } function changeBoxColor( _box ) { _box.beginFill( randomColor().replace('#', '0x') ); _box.drawRect(0,0,box_w,box_h); _box.endFill(); } function getRandomXPos() { return Math.random() * WIN_WIDTH - box_w; } function getRandomYPos() { return Math.random() * WIN_HEIGHT - box_h; } function getRandomColor() { return randomColor().replace('#', '0x'); }})( window, document );Does this have something to do with CanvasRenderer? Because when I switch to WebGLRenderer, the animation run smoothly at 60fps even after 3-5 minutes. I am aware that WebGLRenderer is faster than CanvasRenderer but not all device support it, that's why I used CanvasRenderer. This demo is tested in the latest Chrome on Yosemite.
  7. This is my setup: var win_width = window.innerWidth;var win_height = window.innerHeight;var stage = new PIXI.Stage(0xFFFFFF);var renderer = new PIXI.WebGLRenderer( win_width, win_height, { transparent: true});document.body.insertBefore( renderer.view, document.body.firstChild );var game = requestAnimationFrame( updateGame );var rect = new PIXI.Graphics();rect.beginFill(0x336699);rect.drawRect(0, 0, 400, 400);stage.addChild( rect );function updateGame() { // My simple game logic renderer.render( stage ); game = requestAnimationFrame( updateGame );}And when I open in a browser I got this error message Uncaught TypeError: Cannot read property 'length' of nullTried to change it to autoDetectRenderer and still producing same error but, If I change the renderer to CanvasRenderer, everything work normally. What do I miss? Additional info: Using PIXI v2.2.8Tested in Google Chrome 41, OS X Yosemite