Popular Content

Showing content with the highest reputation on 01/10/2016 in all areas

  1. 1 point

    New typewriter effect script

    Hello all, Just release a script for creating a typewriter effect, using Phaser timers, and also able to mix sound in there as the typewriter is animating. Check out the source here: https://github.com/netgfx/Phaser-typewriter Or an example here: http://www.netgfx.com/trunk/games/tools/phaser-typewriter Let me know if you come across any issues or if you want something added.
  2. 1 point

    Phaser To Desktop Application Beta

    Hey everyone! I've been working on a little app for myself that allows exporting any html5 and javascript application to a "native" desktop application. It uses node-webkit to create binaries that work on all platforms. One awesome side effect of this is that node-webkit has it's own internal server, so there's no need to have a server installed to test your application. And, by enabling the toolbar, you can debug your apps just like you would in the browser. If you'd like to test the app and give me some feedback, that would be awesome. I'm hoping this will take down a part of the barrier of setting up a server in order to use phaser. Anyways, here's the link to my project: https://github.com/jyapayne/Web2Executable There are links to precompiled binaries on the github page and you can also check out the source code to see how it works. The source is kind of ugly right now and I need to clean it up a lot, but the app works and is functional on all platforms. Let me know what you think! Cheers!
  3. 1 point

    [TUTO] Analyzer

    Hi guyz ! Here is a little tutorial about the analyzer in Babylon. This is the effect we will try to do here : http://synergy-development.fr/webaudio2/ We will make a grid of cube moving with the music var analyserEffect = { // our master scene scene: null, w: 10, // width of our grid cubes h: 10, // height of our grid cubes createScene: function(engine) { // create our scene and set it's background color to black var s = new BABYLON.Scene(engine); s.clearColor = BABYLON.Color3.Black(); // our main camera. We dont want the user to be able to move it, so, no attached controls. var camera = new BABYLON.ArcRotateCamera("camera", -0.87, 1.1, 600, BABYLON.Vector3.Zero(), s); // Here we create 3 lights, 2 grey and 1 yellow/orange, something like gold. var pl1 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(-200, 200, -100), s); pl1.diffuse = new BABYLON.Color3(219 / 255, 138 / 255, 73 / 255); pl1.specular = new BABYLON.Color3(219 / 255, 138 / 255, 73 / 255); var pl2 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(200, 200, -100), s); pl2.diffuse = new BABYLON.Color3(226 / 255, 217 / 255, 184 / 255); pl2.specular = new BABYLON.Color3(226 / 255, 217 / 255, 184 / 255); var pl3 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(-100, 250, 100), s); pl3.diffuse = new BABYLON.Color3(226 / 255, 217 / 255, 184 / 255); pl3.specular = new BABYLON.Color3(226 / 255, 217 / 255, 184 / 255); // let's create a shadow generator for each lights var shadowGenerator1 = new BABYLON.ShadowGenerator(1024, pl1); var shadowGenerator2 = new BABYLON.ShadowGenerator(1024, pl2); var shadowGenerator3 = new BABYLON.ShadowGenerator(1024, pl3); // Our main cube. We make it invisble, we only need it to create instances for our grid cube. var b = BABYLON.Mesh.CreateBox("b", 20, s); b.isVisible = false; // First, we create our "cool" material var mat = new BABYLON.StandardMaterial("m", s); mat.diffuseColor = new BABYLON.Color3(0.1, 0.5, 0.5); // We will move it later mat.bumpTexture = new BABYLON.Texture("assets/img/grained_uv.png", s); // A cool bumpmap // Scale it 2 times as our grid will be big mat.bumpTexture.uScale = 2.0; mat.bumpTexture.vScale = 2.0; // A also cool reflection map. Set it to spherical mode and a really little level of reflection mat.reflectionTexture = new BABYLON.Texture("assets/img/metal.png", s); mat.reflectionTexture.coordinatesMode = BABYLON.Texture.SPHERICAL_MODE; mat.reflectionTexture.level = 0.1; // Assign our material to our main cube. b.material = mat; // Standard material for the container we will create var mat2 = new BABYLON.StandardMaterial("m", s); mat2.diffuseColor = new BABYLON.Color3(0, 0, 0); // Now we will construct our grid var analyser_map = []; var i=0; // Our grid will be 20x20 for (var x=-this.w; x<this.w; x++) { for (var y=-this.h;y<this.h; y++) { // Create instances analyser_map[i] = b.createInstance("b", 10, s); // Multiply x & y to have space between cubes analyser_map[i].position = new BABYLON.Vector3(x*25, 0, y*25); // Add the cubes to shadow render list shadowGenerator1.getShadowMap().renderList.push(analyser_map[i]); shadowGenerator2.getShadowMap().renderList.push(analyser_map[i]); shadowGenerator3.getShadowMap().renderList.push(analyser_map[i]); analyser_map[i].receiveShadows = true; i++; } } // Create a doublesided (to have lights inside) ball as a container var ball = BABYLON.Mesh.CreateSphere("s", 16, 1250, s, false, BABYLON.Mesh.DOUBLESIDE); ball.material = mat2; // Add an HDR filter to get "WOW" effect var hdr = new BABYLON.HDRRenderingPipeline("hdr", s, 1.0, null, [s.activeCamera]); hdr.brightThreshold = 0.2; // Minimum luminance needed to compute HDR hdr.gaussCoeff = 0.5; // Gaussian coefficient = gaussCoeff * theEffectOutput; hdr.gaussMean = 1; // The Gaussian blur mean hdr.gaussStandDev = 5; // Standard Deviation of the gaussian blur. hdr.exposure = 1.0; hdr.minimumLuminance = 0.2; hdr.maximumLuminance = 1.0; hdr.luminanceDecreaseRate = 0.3; // Decrease rate: darkness to light hdr.luminanceIncreaserate = 0.5; // Increase rate: light to darkness hdr.gaussMultiplier = 1.0; // Increase the blur intensity // Create our analyzer and attach it to the current scene var analyzer = new BABYLON.Analyser(s); BABYLON.Engine.audioEngine.connectToAnalyser(analyzer); analyzer.FFT_SIZE = 1024; analyzer.SMOOTHING = 0.9; var workingArray; s.registerBeforeRender(function () { // Our timer var t = Date.now() * 0.005; // Get the analyzer's FFT workingArray = analyzer.getByteFrequencyData(); for (var i=0; i<analyser_map.length; i++) { // Now we will scale our cubes with the fft data. // Note that we only take the first 64 channels to have a "diagonal" effect on the equalyzer analyser_map[i].scaling.y = 0.1 + workingArray[i%64] / 20; } // Here we are rotating colors var r = 0.5 + 0.5 * Math.cos(t / 12.0); var g = 0.25 + 0.25 * Math.sin(t / 5.0); var b = 0.5 + 0.5 * Math.cos(t / 6.0); // And then affect them to our materials mat.diffuseColor = new BABYLON.Color3(r, g, ; mat.ambientColor = new BABYLON.Color3(r, g, ; mat2.diffuseColor = new BABYLON.Color3(r/2.0, g/2.0, b/2.0); mat2.ambientColor = new BABYLON.Color3(r/2.0, g/2.0, b/2.0); // let's move the camera round our grid cubes camera.alpha = t / 50.0; }); // Return the scene this.scene = s; return this.scene; }, // Render the scene renderScene: function() { this.scene.render(); }}// Now how to call it var analyserScene = analyserEffect.createScene(engine); var music = new BABYLON.Sound("Music", "assets/audio/High_Roller.mp3", analyserScene, function () { music.play(); }, { streaming: true }); engine.runRenderLoop(function () { analyserEffect.renderScene(); });Hope you'll enjoy ! Comments are welcome Stv.
  4. 1 point

    [TUTO] Analyzer

    Thanks ! A great tuto. Yes, Steve loves the post processes effects which are nice but kills the perf on almost all devices David
  5. 1 point

    rotating sprite around circle

    drhayes Thank you for reply and sorry for a late answer. I figured out this problem. I've had a trouble with anchor and I'm continuing develop my first phaser.io game : )
  6. 1 point

    Features demos

    this a feature, so it should be in this topic, I guess : http://www.babylonjs-playground.com/#RBXBG#1 TAGS : Height Map, getHeightAtCoordinates, getNormalAtCoordinates
  7. 1 point

    Anyone got custom libraries to share?

    If you're looking for a template, then I know about two of those: Enclave Phaser Template (my own) which have states, menu with buttons, the whole playing/pause/game over cycle, storing highscore and playing sounds. Phaser Menu System from Matt McFarland with credits, menu, options, game over, and is followed by the detailed tutorial. If you need the transition only, then there are plugins for that - I know about cristianbote/phaser-state-transition and aaccurso/phaser-state-transition-plugin, but I haven't tried them myself.
  8. 1 point
    @drhayes, ty for sharing sources of your game. It's great! I've got some fresh ideas And i have another question - is it often a situation when your property coincide with the inherited class'es properties or methods? Started reading Interpase#1 and all unclear moments was solved in my head
  9. 1 point
    Hi han7a I donĀ“t know much about HTML5 but an suggestion would be use a mix of <picture> label and Babylon, because <picture> allow to set diferent images and let the navigator choose what image is closer to the size of the screen. It seems easy to use: http://www.hongkiat.com/blog/html5-picture/ In this example you can shrink the navigator window to see diferent positions (images) of a kitty: http://googlechrome.github.io/samples/picture-element/ crazy idea but I think its possible.
  10. 1 point
    I have found this post relative your issue here http://www.html5gamedevs.com/topic/13812-keep-the-game-running-when-switching-tabs/ please let us know if you fix your problem.
  11. 1 point
    Alrighty, who wants to kill some bats w/ me? I spawned too many! Phaser is just too fun, it's great
  12. 1 point
  13. 1 point
    Bilge Kaan

    [Phaser] Treasure Hunter

    The character looks similar because I've made both of them lol. If you're interested you can buy the graphics here: https://www.scirra.com/store/2d-game-graphics-packs/super-platformer-assets-1059 Mechanics and level design look similar to Panda Love that I've made: https://www.scirra.com/store/games-with-source/panda-love-900 Also there's this game combine both already : http://www.newgrounds.com/portal/view/663458 (by Primajin)
  14. 1 point
    When I change a sprite it's rotation with *.rotation, *.angle or *.pivot, it also changes the position because the center of the sprite will change. I'm making a game with a grid and it makes my sprites fall out of their tiles, how can I prevent this? Also here are some example pictures: Normal http://i.imgur.com/V8FRJ3M.png Anchor 0.5 http://i.imgur.com/xLoEpZi.png Angle 90 http://i.imgur.com/x1YtRnn.png
  15. 1 point

    Sprite rotation also changes it's position

    You can only change the x and y (or Sprite.position), nothing else changes the Sprites coordinates. If you need the sprites to be able to rotate around their centre, then you'll need to use either anchor or pivot (rarely both) and adjust their coordinates, because they'll now be visually offset. Alternatively this is where being a display list comes in handy. Use a parent sprite which can be positioned exactly at your grid coordinates, then have a child which is what gets rendered and rotated. That will always just be offset from its parents coordinates.
  16. 1 point

    New typewriter effect script

    The script now features predictive word wrap, thanks to ztiromoritz
  17. 1 point


    Welcome! There are a few good lists on this forum, here and here are a few lists of beginner resources (I've no idea personally if they are any good but at this stage you just need to read and read and write code and write code). This forum is pretty active and you normally get decent responses, particularly if you use phaser, babylon or pixi (phaser is an entire game framework, babylon is a 3d renderer, pixi a 2d renderer). Stack overflow is a go-to resource for getting answers and they have several mature methods to try and ensure high quality answers, you'll still get the dross through and it can be very confusing for beginners. Paper and ink is still the best way to get started in my opinion, grab yourself a book. Try to make it a popular one that focusses on exactly the type of stuff you want to create. The author will have their own opinions but when you are learning its often best to learn from one opinion, then, when you get better, start researching on forums and blog posts etc etc where you will face multiple different solutions. In the JS world there are usually 4 or 5 different ways to solve a problem, often with very little differences between them, making sense of this mess as an experienced coder is hard at times, as a beginner, its super difficult! Which brings me to my first piece of actual advice: be persistent. As with any learning, there will be peaks and troughs, there will successes and failures and there will be times when you just are not clear how to proceed. So, be persistent, keep going, refuse to give in, accept that coding is hard and that web coding requires knowledge of (at least) JS, HTML and CSS, its tough, its a long road, but keep going, its fun, creating things is fun, you'll get there. Be smart, gain knowledge, write code, write lots and lots of code, write good code, learn from it, write bad code, learn from it, study others peoples code, learn to read it, learn why they made their choices, open github issues, twitter stalk devs you like, ask them questions, the dev community is great, some will respond, write more code, write library code, write application code, ask questions, research answers, be persistent, keep going! And, most importantly, have fun!
  18. 1 point
    100% Kingdom Rush. Huge fan of Gonzalo Sande, the head behind the kingdom rush art. This guy is a GOD. There's so many games that follow his art style.
  19. 1 point
  20. 1 point
    Working on a racing game for mobile. Hope to finish it within two weeks.
  21. 1 point
  22. 1 point
    Solved. I needed the this.game.physics.arcade.collide(this.player, this.layer); in update function .
  23. 1 point
    A native isometric tile support and some native ui tools like menus, combo boxes, (selecatable) lists, check boxes, radios, inputs etc would be complete all my wishes on this beautiful frame work.
  24. 1 point
    You need to use body.blocked.down instead of body.touching.down to detect when something is actually solidly in contact with a surface. You can also use body.onFloor() which does the same check. The body.touching property is meant to be used inside the collision callback to determine which side is colliding.
  25. 1 point

    The Monthly Phaser Examples Contest

    this example shows how i use materials (and collisiongroups) in combination with a tilemap created with tiled with two different layers (it's also a showcase that p2 physics introduces a problem for platformer games - you can easily stick to a wall even if its ice ) http://test.xapient.net/phaser/ALL/sticktowall.html