Popular Content

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

  1. 2 points
    @wingnut with the push of 360 rigs/cameras you probley aren't wrong...here-ies could be a thing
  2. 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.
  3. 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!
  4. 1 point

    Tilemap collision area best practises

    Hello, Beginner user here learning the basics. My guestion is about what is good way to use tilemaps for collision areas. Image from my training project: I've created this level with Tiled using one layer, and then defining it like this in game.js: this.map.setCollision([0, 0, 0, 0,.. 1]) // removed lot's of data to save spaceWell, that works, but somehow i feel there has to be better way? I also saw somebody doing it very wisely with p2 physics, and drawing collision areas with one tile and then in the code using tile's id to set collision areas. I liked this approach, but i never got it working, and i'm using arcade physics for now. Like i mentioned this is just practice, but i like to know some best pratices before i start doing my first game
  5. 1 point
    The setCollision method of the Tilemap take an array of tile indexes and so you only need to have the zero once. The index refers to the index of the tile in the tileset, not the index of the tile in the Tilemap data. So I see that you have 2 types of tiles, so you only need an array with theses two indexes this.map.setCollision([0,1]);Also, separating your collision layers from other layers is a good idea, so you are off to a good start. =) For other best practices, check out the official Tilemap examples, they may not be all that fancy but they cover a lot of the basics that should be great for a beginner. =)
  6. 1 point
    I think the OPs concern is that it appears to be an attempt to use the templates as an "asset flip" (is that the point?) It doesn't bode well that the preview video for the game is just the OP's preview video for the kit... this might suggest that the potential Steam flippers haven't bothered to do anything with the kit yet and their use of the OPs video is to deceive the Steam community... one wonders... have they even purchased the kit yet? (maybe they haven't risked buying it so they can flip something else if it doesn't get through Greenlight)
  7. 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
  8. 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.
  9. 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 : )
  10. 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
  11. 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.
  12. 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
  13. 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.
  14. 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.
  15. 1 point
    Alrighty, who wants to kill some bats w/ me? I spawned too many! Phaser is just too fun, it's great
  16. 1 point
  17. 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)
  18. 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
  19. 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.
  20. 1 point

    New typewriter effect script

    The script now features predictive word wrap, thanks to ztiromoritz
  21. 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!
  22. 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.
  23. 1 point
  24. 1 point
    Working on a racing game for mobile. Hope to finish it within two weeks.
  25. 1 point
  26. 1 point
    Solved. I needed the this.game.physics.arcade.collide(this.player, this.layer); in update function .
  27. 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.
  28. 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.
  29. 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