• Content Count

  • Joined

  • Last visited

About GourmetGorilla

  • Rank
    Advanced Member

Recent Profile Visitors

1161 profile views
  1. Mat have you guys considered putting a gui on the front of pixi? It's brilliant but seems to be seriously underused. It could be the next flash.
  2. Thanks @crowbar that's great! It's working to resize the canvas, but not updating the size of my content - is this updating your content too?
  3. Trying to think through how to dynamically resizing pixi stage on window resize. I'm using the following the set the size of my stage to the window, it works fine (though it distorts the images, does not keep ratio). stageWidth = $(window).innerWidth(); stageHeight = $(window).innerHeight();console.log(stageWidth, stageHeight); // create an new instance of a pixi stage var stage = new PIXI.Stage(0xff00ff); var renderer = PIXI.autoDetectRenderer(stageWidth, stageHeight);But how do I extend this to update the stage size when the browser window is resized? I tried the following (with a call to onResize inside my animate function) - it may be resizing the stage (i'm not sure), but it's not resizing the content - and I'm getting a warning in the console (WARNING: Too many active WebGL contexts. Oldest context will be lost): function onResize(){ $( window ).resize(function(){ stageWidth = $(window).innerWidth(); stageHeight = $(window).innerHeight(); renderer = PIXI.autoDetectRenderer(stageWidth, stageHeight); }) } Maybe I need to be updating the ' document.body.appendChild(renderer.view); ' instead? How would I do that, if in fact that's what I need to do?
  4. I put a var on my renderer.view var mypixiStage = document.body.appendChild(renderer.view);and added the code suggested window.addEventListener("resize", mypixiStage.resizeToWindow.bind(mypixiStage));I'm getting the following error - any suggestions? Uncaught ReferenceError: MO5 is not defined(anonymous function) @ StageResizer.js:3
  5. 'myStageResizerInstance' - I'm confused by this, using renderer.view to scale, how do we create the instance you suggest? Here's how pixi does the renderer.view document.body.appendChild(renderer.view);
  6. . deleted post. (Don't know how to actually delete it, sorry!).
  7. GourmetGorilla


    So, a tween usually is triggered, it runs for it's duration and stops. but how do you tie a tween to the moving y position of a pixi.point tied to the mousescroll for instance? Not that it's triggered and executes till it's complete, but that the tween moves with the y of the mousescroll. Let say I have something like: TweenLite.to(element, 2, {scale:1.5, x:10, y:0, alpha:0});I could say if y == 400 run tween but it would just execute and be finished. But I want this tween to run from pixi.point.y 400 to 450, so not use a time element (currently 2sec), but two pixipoint y positions instead. So then if I moved the pixipoint with my mousescroll to 410, 20% of the the tween would run in sync with my mouse scroll, if I moved the mouse back to 400, the tween would reverse back to the beginning, if I moved it to 403, a tiny amount of the tween would happen, etc, etc so the tween events always stay in sync with the mouse scroll Y (pixi,point). Does this make sense? How would I do this? Can I do this with greensock, impact or tween.js ? basically the tween would be constantly updating every 24sec or more, with input from the pixi.point's (mousescroll) Y position and moving in sync with it.
  8. Haha, got it, thanks for clarifying. When I reread the above, I see Hubert is just calling his container 'camera'. I just wondered if it had a camera whether it would help me. I'm trying to figure out how flashvhtml.com generated their scrollmap. http://flashvhtml.com/js/site/ScrollMap.js (but I asked about that somewhere else on this forum I think). Beyond the simple examples, some aspects of Pixi, or what people have done with it, are a lot to get my head around. o.O!
  9. What benefit does using the camera give us in this situation? Newbie question o.O
  10. Can anyone explain this file, how it was generated, what is was made with. How the sequence of 'position' and 'alpha' numbers are used, and how they relate to the scrollable feature of the site? http://flashvhtml.com/js/site/ScrollMap.js For instance: var rockets = {rockets:[{startFrame:0, endFrame:100, position:[1.15,5,3.14,2.25,10,3.14,3.3,15,3.14,4.3,20,3.14,5.3,25,3.14,6.25,30,3.13,7.15,35,3.13,8.05,40,3.13,8.9,45,3.13,9.75,50,3.13,10.55,53,3.13,11.35,54,3.13,12.15,53,3.13,12.9,50,3.13,13.65,45,3.13,14.4,38,3.13,15.1,29,3.13,15.8,18,3.13,16.5,5,3.13,17.2,-9.95,3.13,17.85,-26.9,3.13,18.5,-45.85,3.13,19.15,-66.8,3.13,19.8,-89.75,3.13,20.45,-114.7,3.13,21.05,-141.65,3.13,21.65,-170.6,3.13,22.25,-201.55,3.13,22.85,-234.5,3.13,23.45,-269.45,3.13,24.05,-306.4,3.13,24.6,-345.35,3.13,25.15,-386.3,3.13,25.7,-429.25,3.13,26.25,-474.2,3.13,26.8,-521.15,3.13,27.35,-570.1,3.13,27.9,-621.05,3.13,28.45,-674,3.13,29,-728.95,3.13,29.55,-785.9,3.13,30.05,-844.85,3.13,30.55,-905.8,3.13,31.05,-968.75,3.13,31.55,-1033.7,3.13,32.05,-1100.65,3.13,32.55,-1169.6,3.13,33.05,-1240.55,3.13,33.55,-1313.5,3.13,34.05,-1388.45,3.13,34.55,-1465.4,3.13,35.05,-1544.35,3.13,35.55,-1625.3,3.13,36.05,-1708.25,3.13,36.55,-1793.2,3.13,37.05,-1880.15,3.13,37.55,-1969.1,3.13,38.05,-2060.05,3.13,38.55,-2153,3.13,39.05,-2247.95,3.13,39.55,-2344.9,3.13,40.05,-2443.85,3.13,40.55,-2544.8,3.13,41,-2647.75,3.13,41.45,-2752.7,3.13,41.9,-2859.65,3.13,42.35,-2968.6,3.13,42.8,-3079.55,3.13,43.25,-3192.5,3.13,43.7,-3307.45,3.13,44.15,-3424.4,3.13,44.6,-3543.35,3.13,45.05,-3664.3,3.13,45.5,-3787.25,3.13,45.95,-3912.2,3.13,46.4,-4039.15,3.13,46.85,-4168.1,3.13,47.3,-4299.05,3.13,47.75,-4432,3.13,48.2,-4566.95,3.13,48.65,-4703.9,3.13,49.1,-4842.85,3.13,49.55,-4983.8,3.13,50,-5126.75,3.13,50.45,-5271.7,3.13,50.9,-5418.65,3.13,51.35,-5567.6,3.13,51.8,-5718.55,3.13,52.25,-5871.5,3.13,52.7,-6026.45,3.13,53.15,-6183.4,3.13,53.6,-6342.35,3.13,54.05,-6503.3,3.13,54.5,-6666.25,3.13,54.95,-6831.2,3.13,55.4,-6998.15,3.13,55.85,-7167.1,3.13,56.3,-7338.05,3.13,56.75,-7511,3.13,57.2,-7685.95,3.13]}, and also the position, scale and alpha here: mc89:{view:'cloudFade', depth:3, startFrame:488, endFrame:540, position:[1,1,0.95,1.2,0.95,1.2,0.95,1.2,1,1,0.95,1.2,0.95,1.2,0.95,1.2,0.95,1.2,0.95,1.2,0.95,1.2,0.95,1.2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], scale:[20.718994140625,15.5989990234375,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718994140625,15.5989990234375,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375], alpha:[0,0.25,0.5,0.75,1,0.875,0.75,0.625,0.5,0.375,0.25,0.125,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]}, How do I make sense of all those numbers? And how do I make one of these? It kind of looks like skrollr.js meets greensock on steroids. It's from the brilliant http://flashvhtml.com site.
  11. Has anyone seen a deconstruction of flashvhtml.com? Similar to Petr Tichy's deconstruction of Sony's Be Moved site? https://ihatetomatoes.net/sonys-be-moved-website-deconstructed/
  12. Using Chrome Version 42.0.2311.152 (64-bit) on OSX Snow Leopard on a 2.66Ghz Quad Core Intel Xeon Mac Tower with NVIDIA GeForce GT 120 Graphics card. It worked fine then one day just stopped and looked like the above All the Phaser examples on their site look like this too. But everything works in Firefox. I just want to use Chrome for the js console at least How do I get this browser working again?
  13. Hey Mat, how was the file scrollMap.js generated on your awesome flashvhtml.com project?