Popular Content

Showing content with the highest reputation on 11/30/15 in all areas

  1. 7 points

    Does babylon.js has a particle editor?

    i made one... it can save to file, and i add a function to read particle file. it can also just show the code so that u can adjust the particle and copy the code. and u can add your texture.
  2. 6 points
    Hi! I’ve spent of lot of my free time recently to work on an upgraded version of babylonjs.com to be responsive across devices: http://www.babylonjs.com The new site uses Media Queries of course, Flexbox, SVG and much more fun: CSS Filters! Hovering the mouse on our elements will zoom it a little using CSS transforms & transitions and will apply a blur & sepia filter on the other elements of the flexbox. Using the scrolling links will also use a slight gray filter during the scrolling. The website has been tested on IE11/Edge/Chrome/Firefox & iPhone/iPad/Android & Windows Phone devices but if you find anything wrong on your device, please tell me. The website is now also much more faster to load (from 6s to 600ms!). This is because we've splitted the demos into specific page. In the past, we're using a SPA like approach. It was complex for our users to find the right file to review. Now, by simply view the source of a specific demo like this one: http://babylonjs.com/Demos/PointLightShadowMap/, you should be able to understand how it works. I've put also all images on our CDN. That's why the new page now loads very fast. In conclusion, this website is using almost all modern features supported by modern browsers: WebGL, Web Audio, Gamepad, Pointer Events, IndexedDB, Media Queries, SVG, Flexbox, Filters, Transform & transitions. Don’t know a lot of sites using that much features. ;-) Cheers, David
  3. 3 points
    Hi guyz ! I have to clean up a bit and optimize the code, but here is what i get playing with the particles system updateFunction. Maybe someone was looking for something similar, so i decided to post it. Any feedbacks/comments are welcome http://www.babylonjs-playground.com/#JVH6E#6
  4. 3 points

    Better Outline for Mesh

    i can append this in to babylon js material like OutLineMaterial just look that and say me to do it. discard outline ::: alpha OutLine :::: Orginal Mesh
  5. 1 point
    Almost http://www.babylonjs-playground.com/#145AGC#1
  6. 1 point
    Glad you are interested in Morphing. I have a major new release in the works. This version may still not work correctly against a mesh with a skeleton using the standard BJS animation system, but MORPH (renamed to QueuedInterpolation, QI) will have an integrated bone interpolator right inside the beforeRender. BABYLON.Animation objects can loaded directly from Motion capture files (only Acclaim format right now) without running them through Blender. I still use a BABYLON.Animation object for data storage, but it is designed to work best if you only include key frames. In your example, I think you would only need 1 frame, the last one. The final pose will be where it ends up, no matter what state is left after the earlier queued end state. I looked at the behavior you are getting with skeletons & meshes with ShapeKeyGroups. Part of the problem may be that you are using BJS 2.3. The MORPH in the repository still calls updateVerticesDirectly(). I have done a lot of work in 2.3 to ensure things work together. First was upgrading the standard updatingVertices() to be optimized to work with Float32Arrays. updateVerticesDirectly() is no longer needed, so it was not updated & depreciated. Next I updated the cpu skinning process, such that morphing & it use the same Float32Arrays to inter-operate as best as possible. Have done a lot of testing using MakeHuman 1.1. One can have 50 facial shapekeys. I have converted my proof of concept VoiceSync tool to be for MakeHuman meshes. I have not gotten all the face shapes coded for each sound yet, but you can interactively develop them using slider controls, then write the typescript snippet needed to put back into the program onto the console. It is the first scene I know of where you can actually direct a mesh deforming using controls. I also have an interactive tool to bring in Motion Capture files from Carnegie Mellon Graphics Lab http://mocap.cs.cmu.edu/ This is not likely to be released though, in a pre-built way at least. You have to down load a 1 GB zip file of the entire library, then put the html, JS, and texture files in the top level directory. You then launch the html via double click. The individual online files are not CORS enabled. Really close to getting this to turn over. Not going to spend time to get the error you have fixed, sorry.
  7. 1 point

    Serialize scene not complete

    I solved by creating my own model serializer that serializes all.
  8. 1 point

    Get mouse/touch position? (SOLVED)

    You can also get latest mouse position from game.input.mouse.xgame.input.mouse.y
  9. 1 point

    Better Outline for Mesh

    why dont use frensel for that ? http://www.babylonjs.com/cyos/#2KUJ1T
  10. 1 point
    howdy! thought I might jump in with my two cents: http://www.babylonjs-playground.com/#1NSBMU#1 Dispose is a very magical function. It does a LOT to the mesh and to its internal references (and is helping a lot with memory consumption). The one thing it doesn't do is actually deleting the JS object. This is the developer's job. One of the reasons for that is that you COULD use the mesh even after disposing it (thou it is not recommended). The other reason, which is the more prominent one - you can set the object undefined inside an internal function of the object itself. this = nulldoesn't look quite right... There are a few ways of doing that (I would personally rearrange the entire playground), one of them is on line 48. Notice I am (de)referencing box1, which is a scope variable. This is, of course, allowed. Then before checking if they intersect, you need to check if box1 exists. One more thing, and this is the reason why I had to recreate the plyround from scratch - when registering an event listener, you have to take care of removing it as well. Otherwise, this function will be called many times. As many times as you press play. A simple function does that - the scene.onDispose can handle this wonderfully. Lines 58-60 in the demo. Another little thing - scene.registerBeforeRender will regiser this function for ever. The function will continue running, making your game slower and slower each time. Make you you unregister the function you registered. You could use the Mesh.registerBeforeRender (those functions are disposed when the mesh is disposed), the catch is that the mesh must be visible in order for this functions to run. So! Quite a lot, I hope it is all clear.
  11. 1 point


    Hi All, New guy here with a question regarding asset loading. I've scoured these forums, the Phaser source and couldn't figure this out (if it is even possible). Is it possible to create a new instance of Phaser.Loader without a game instance? From the source it appears not. This may seem like a strange request but let me explain the use case: I am working on a single page application that allows navigation between different games, each game is wrapped in a custom <phaser></phaser> directive that is responsible for creating a new Phaser.Game instance. Angular allows you to render the navigated page once a set of async tasks have been completed (using promises). The <phaser> directive is contained within the page being navigated to, so ideally I would like to load assets prior to the page being loaded and Phaser.Game being created so the navigation is more seamless. There's a whole bunch of other stuff happening during this process also but is a bit outside the scope of this question, so I've omitted those. So in a nutshell this is the process I'd like to achieve: game link clicked ---> angular navigation starts ---> Phaser.Loader() loads assets ---> Asset load complete ---> Angular page change ---> <phaser> directive creates new Phaser.Game with the previously loaded assets injected into it I'm trying to avoid a "preload" splash screen for each game simply because the branding is the same across all games and is not required and would provide the user with a "dis-jointed" experience. Any help is greatly appreciated.
  12. 1 point
  13. 1 point

    Minifying/Uglifying the Game

    The process of minification is something you configure as part of a build process so is not a responsibility of Panda / Phaser / any game framework. You normally run minification via a task manager like grunt http://gruntjs.com/ This uses a package manager to install plugins https://www.npmjs.com/ one of which might be Uglify.js https://github.com/gruntjs/grunt-contrib-uglify which handles minifying and optionally 'uglifying' your code Normally before uglifying you want to concatenate all your code into one big js file. There is a standard grunt task for this https://github.com/gruntjs/grunt-contrib-concat
  14. 1 point
    All I mean is that, as dad72 said, using something like this - new BABYLON.Sound("Audio", ["audio.ogg", "audio.mp3"], scene, null, { loop: true, autoplay: true, spatialSound: true });would be nice.
  15. 1 point

    Drawing Custom Shapes

    Simple example on using Graphics: var grap = new game.Graphics();grap.beginFill(0xffffff);grap.drawRect(0, 0, 100, 100);grap.position.set(200, 200);grap.addTo(this.stage);http://www.goodboydigital.com/pixijs/docs/classes/Graphics.html
  16. 1 point
    This is quite an important post that I didn't want you to have to wait until the docs are ready to find out about. Phaser has a number of special "reserved" functions that are executed at specific points in the game, and should contain different sorts of code. Here's a list of them: preload This function is called first. It should contain code to handle the loading of assets needed by your game. I.e. game.load.image(), etc. Note: while 'preload' is running the game doesn't call the update or render functions, instead it calls 2 special functions (if they exist): loadUpdate and loadRender. You don't have to put just loader specific code in the preload function. You could also do things like set the stage background color or scale modes. However to keep it clean and logical I would suggest you do limit it to just loading assets. Note that you don't need to tell Phaser to start the load, it happens automatically. loadUpdate This is a special-case function that is only called while assets are preloading (as the standard update function is not). You could use it to do something like update a progress bar. loadRender Most likely not needed (especially not for WebGL games) but this is an optional special-case function that is called after update and should contain render specific code. create The create function is called automatically once the preload has finished. Equally if you don't actually load any assets at all or don't have a preload function then create is the first function called by Phaser. In here you can safely create sprites, particles and anything else you need that may use assets the preload will now have loaded for you. Typically this function would contain the bulk of your set-up code, creating game objects and the like. update The update (and render) functions are called every frame. So on a desktop that'd be around 60 time per second. In update this is where you'd do things like poll for input to move a player, check for object collision, etc. It's the heart of your game really. render The render function is called AFTER the WebGL/canvas render has taken place, so consider it the place to apply post-render effects or extra debug overlays. For example when building a game I will often put the game into CANVAS mode only and then use the render function to draw lots of debug info over the top of my game. Once render has completed the frame is over and it returns to update again. resize Introduced in Phaser 2.1.0 this method is called only if your game is running under the RESIZE scale mode, and only when the game container changes scale (be that the browser or the dom element your game is within). It is passed two variables, the new width and height. You can use this method to re-align responsive game elements. shutdown This method is called when the State is shutdown (i.e. you switch to another state from this one). Note that you cannot use any of the above function names in your game other than for the use they were intended above. What I mean by that is you should consider them as being 'reserved' as game system only functions. As well as the above methods there are a set of default properties that are always created in your State objects. They are as follows: /*** @property {Phaser.Game} game - This is a reference to the currently running Game.*/this.game = null;/*** @property {Phaser.GameObjectFactory} add - A reference to the GameObjectFactory which can be used to add new objects to the World.*/this.add = null;/*** @property {Phaser.GameObjectCreator} make - A reference to the GameObjectCreator which can be used to make new objects.*/this.make = null;/*** @property {Phaser.Camera} camera - A handy reference to World.camera.*/this.camera = null;/*** @property {Phaser.Cache} cache - A reference to the game cache which contains any loaded or generated assets, such as images, sound and more.*/this.cache = null;/*** @property {Phaser.Input} input - A reference to the Input Manager.*/this.input = null;/*** @property {Phaser.Loader} load - A reference to the Loader, which you mostly use in the preload method of your state to load external assets.*/this.load = null;/*** @property {Phaser.Math} math - A reference to Math class with lots of helpful functions.*/this.math = null;/*** @property {Phaser.SoundManager} sound - A reference to the Sound Manager which can create, play and stop sounds, as well as adjust global volume.*/this.sound = null;/*** @property {Phaser.ScaleManager} scale - A reference to the Scale Manager which controls the way the game scales on different displays.*/this.scale = null;/*** @property {Phaser.Stage} stage - A reference to the Stage.*/this.stage = null;/*** @property {Phaser.Time} time - A reference to the game clock and timed events system.*/this.time = null;/*** @property {Phaser.TweenManager} tweens - A reference to the tween manager.*/this.tweens = null;/*** @property {Phaser.World} world - A reference to the game world. All objects live in the Game World and its size is not bound by the display resolution.*/this.world = null;/*** @property {Phaser.Particles} particles - The Particle Manager. It is called during the core gameloop and updates any Particle Emitters it has created.*/this.particles = null;/*** @property {Phaser.Physics} physics - A reference to the physics manager which looks after the different physics systems available within Phaser.*/this.physics = null;/*** @property {Phaser.RandomDataGenerator} rnd - A reference to the seeded and repeatable random data generator.*/this.rnd = null;Again consider the above as 'reserved variables'. You CAN over-write and replace them if you like, but it's probably easier not to.
  17. 1 point
    @acott To implement that touch-on-screen behavior is fairly easy, you can do something like: var RIGHT = 0, LEFT = 1;/* Divide the current tap x coordinate to half the game.width, floor it and there you go */game.input.onTap.add(function(e){ if (Math.floor(e.x/(this.game.width/2)) === LEFT) { //do left stuff } if (Math.floor(e.x/(this.game.width/2)) === RIGHT) { //do right stuff }}); Hope this helps! Cheers!
  18. 1 point
    You don't really need to - you'd use the button events in this case: button.events.onInputOver.add(isTouchingButton, this);function isTouchingButton(button, pointer) { // stuff}You've got these events you can use (on any Sprite or Button object) onInputOver onInputOut onInputDown onInputUp onDragStart onDragStop
  19. 1 point
    Here's a brief explanation of how the Pointers are set-up: game.input.mousePointer always references the mouse (if present on the device). If you know you only need to query the mouse it's safe to use this. game.input.activePointer is a reference to the most recently active pointer object. By 'active' we mean the one that created the most recent event on the device. On a non-Surface desktop this will be the mouse. On an iPhone for example it will be the most recent finger active on the screen. The game.input.pointer1 through to pointer10 objects are for multi-touch systems. By default Phaser will start 2 of them (allowing for 2-finger games). If you want more you can start up the others too. Pointers are issued sequentially as each new finger is pressed on the screen. So if you press down 3 fingers then pointer1, 2 and 3 will become active. If you then remove the 2nd finger you placed down pointer2 will become inactive, but pointers 1 and 3 will remain active. If you put another finger down it will fill-in the gap and become pointer2 again. game.input.x/y = the most recently active pointer coordinates. You can listen to game.input events too, for example: game.input.onDown.add(doSomething, this);function doSomething(pointer) { // pointer will contain the pointer that activated this event}You can listen for "onDown", "onUp", "onTap" and "onHold".