Search the Community
Showing results for tags 'Path'.
-
Hi, I'm trying to develop a game in Phaser 3 where player is able to select a stage (basically a scene) of their choice. I want this selection menu to be like a map. This is how SVG file looks like. <svg> <g> <path id="land" class="land" d="M138.114,402.543l0.683,1.604l-1.204.(truncated)"> <path id="ice" class="ice" d="M238.114,402.543l0.683,1.604l-1.204..........."> <path id="water" class="water" d="M538.114,402.543l0.683,1.604l-1.204........"> </g> </svg> How do I add event to each of these path ? They all are inside one svg file. Normally, in vanilla JS we could select an element by id or class. If I load entire image at once using load.svg() adding event affects entire svg image. I can't tell which path was clicked. After more digging, I thought of drawing the map using Phasers graphics.fillPoints(). That way I could have reference to each area I draw. But again fillpoints expects arguments to be an array of Geom.Point and SVG's path attribute has different format (d="M238.114,402.543l). So, I can't do this either. I appreciate any help or suggestions for achieving what I am trying to do.
-
Is it possible to use a "stroke" as a mask?
-
Hi) I use this example https://www.babylonjs-playground.com/#72C7CT#3. But in this example we have all trajectory in first step. I tried to change this example for my question: https://www.babylonjs-playground.com/#X0MDYG. In this example I see animation of the last segment of my all path. How can I change this situation and see animation from my first point to the last. This situation occurs when we initially do not know the entire trajectory. We only know the current and previous trajectory node. Could anybody help me?
-
I am attempting to 'animate' the throwing of a tetromino sprite. The animation is simply the tetromino following a Curve while rotating. Once the 'animation' is done (after the tetromino reaches the end of the Curve) I would like to destroy the tetromino. However, looking at the API documentation for PathFollower, it is not clear to me how to detect when the sprite reaches the end of the Curve. I see a lot of event-related methods, but those seem to be for defining your own custom events rather than detecting set events like doneFollowing or something. For the rotation, I would like to set a callback to rotate the sprite at every point along the curve, but that doesn't seem possible either. Am I missing something in the API doc, or is a Curve/PathFollower approach not ideal for this scenario to begin with? Here is my code so far: const points = [ START_X, START_Y, variableX, variableY, END_X, END_Y ]; export default function ThrowAnimator(args) { let {gameObjectFactory, duration} = args; let curve = new Phaser.Curves.Spline(points); this.animateThrow = function(tetrominoShape) { points; let follower = gameObjectFactory.follower(curve, START_X, START_Y, tetrominoShape + 'Whole'); follower.setRotateToPath(true, 90); follower.startFollow({ duration: duration, yoyo: false, ease: 'Sine.easeInOut', repeat: 0 }); } }; -
Hi How can I use path follower plugin? Is there any example of this? https://github.com/photonstorm/phaser/blob/v2.6.2/src/plugins/path/PathFollower.js
-
Hello, I have several meshes on paths, and need to begin particle animations at specific locations on the paths. However, when I use the position of an object or child on the path to start the particle animation, the condition is never met. I assume that the transforms are not updated on path animations. If I start the particle animation, it starts. But if I place it in a condition, in the same location in my script, the particle animation will not start. I'm using it on the same path which @JohnK helped me with last night:: if (mesh.position.y > 0) { smokeSystem.start(); } and mesh is on the path passing above 0.0 - which I've tried every axis and the particle system will not start. If I use collisions by placing a cube on the path which my object must pass through such as: let abc = BABYLON.MeshBuilder.CreateBox(`abc`, { size: 5 }, scene); abc.position = new BABYLON.Vector3(-50, 10, 100); if (vehicle.intersectsMesh(abc, true)) { smokeSystem.start(); } The particles will not start. But if I say smokeSystem.start(); in the exact same location, the particles start. I've spent hours on this, and tried everything I know. If anyone can help, please let me know as I have to finish this tomorrow. Thanks much, DB
-
Hello, I'm animating vehicles on paths, and have no flipping until I get to a heart shape. The curve is less than others, yet I'm getting tons of flipping (gimble lock.) I've tried converting the animation to use quaternions, but no such luck. Here's the code I'm using for the animation: If anyone can offer a solution to stop the constant flipping, I would be grateful. Every method I know doesn't want to work on this path. Thanks, DB
-
Hi, I'm testing code at: https://www.babylonjs-playground.com/?shadows and want to try my own image for the ground. On line 35 I put “http://www.rhgrafix.com/images/ground.jpg” instead of "textures/ground.jpg", I control+click on it and sure enough my image comes up in browser, but when I hit Run I just get the default checkered image. Why is this happening? Thanks, R.L. Hamm
-
Howdy, I'm struggling to conceptualize how I would tackle solving the following task. Imagine you have a scene as displayed in the attachment. I would like to bind scroll to moving the camera along a predefined path. Breaking it down into components...how do I: Attach a Camera to a predefined path? Allow a user to move the camera along that path? Any suggestions that might point me in the right direction? @Deltakosh Thanks, JPS
-
Hello, Does anyone know how to create a path or lines, in a closed loop, in the shape of an Infinity Symbol? I am pretty sure I saw one in the playground, but cannot find it now. For example: Gerono OR Bernoulli: https://gamedev.stackexchange.com/questions/43691/how-can-i-move-an-object-in-an-infinity-or-figure-8-trajectory The Parameterization is said to be with the following equation: x = cos(t); y = sin(2*t) / 2; I ran into a few errors trying to populate it on the first quick attempt.... Any advice on how to populate Gerono parameterization into the following track (editPoints)? var track = BABYLON.MeshBuilder.CreateLines('track', {points: editPoints}, scene);
-
Hello, I'm trying to draw a bunch of Graphics object from a custom font (.ttf) letters. With the help of fontface.js I now have a set of paths, like these: { "A": { "o": "m 763 0 l 660 0 l 594 361 l 247 361 l 51 0 l -49 0 l 507 1024 l 567 1024 l 763 0 m 579 449 l 508 860 l 294 449 l 579 449 " }, "B": { "o": "m 693 794 q 678 701 693 744 q 635 624 663 658 q 573 565 608 590 q 497 525 538 539 q 568 499 535 517 q 626 455 601 482 q 666 392 651 428 q 681 310 681 356 q 651 183 681 240 q 572 85 622 125 q 452 22 521 44 q 304 0 383 0 l 13 0 l 192 1014 l 428 1014 q 546 997 496 1014 q 628 951 596 981 q 677 882 661 922 q 693 794 693 842 m 594 778 q 547 889 594 850 q 403 928 500 928 l 271 928 l 206 560 l 339 560 q 447 577 399 560 q 527 625 494 594 q 577 694 560 656 q 594 778 594 733 m 582 304 q 522 429 582 385 q 358 474 461 474 l 190 474 l 124 86 l 314 86 q 422 101 372 86 q 506 143 471 115 q 562 211 542 171 q 582 304 582 251 " }, "C": { "o": "m 969 868 l 889 810 q 779 905 844 869 q 614 940 714 940 q 431 896 515 940 q 285 779 346 851 q 189 616 224 707 q 154 432 154 525 q 177 288 154 354 q 244 174 200 222 q 351 100 288 126 q 494 74 414 74 q 656 108 582 74 q 804 213 729 142 l 864 151 q 695 32 793 81 q 475 -17 597 -17 q 306 15 383 -17 q 173 104 229 47 q 85 241 117 161 q 54 417 54 321 q 103 658 54 546 q 232 853 151 769 q 417 983 313 936 q 636 1031 522 1031 q 840 984 758 1031 q 969 868 921 938 " }, ... } which is the best way to draw my letters with the Pixi Graphics API? Lately I'll need to animate those Graphics. Thanks for helping me.
-
Hi, I have two questions. 1. Is there any function as of now which can allow to place a mesh on path at equal distance. 2. Is it possible to break the datedLine to mesh objects. https://playground.babylonjs.com/#ASN71I
-
Hello. I am very new to PIXI, so please bare with me. I have been in search of good API for my game. The game uses a map which contains tiled images as well as a bunch of path on the screen. Think Google Map, except a lot simpler. I was able to use PIXI to implement the map background where it scrolls and loads tiled map images as needed. I was also able to draw paths onto the map. Now the problem is that I cannot figure out how to interact with those paths. I used PIXI.Graphics to create and draw a path. I applied mouse events to it. But no event is fired. I was able to get the even to fire if I made the graphic into closed path will fill. But unfortunately that will not work for my purpose. Is there any way to accomplish this? Any way to interact with just a path (could be complex paths with multiple segments and/or curves) rather than enclosing shape? Thanks in advance!
-
Theory I recently wanted to try and use/adapt the official Blender exporter addon for Babylon to allow for parsing a directory of source models (FBX) and have Blender batch export them to the Babylon Json format. I know that there is a C++ CLI tool to do exactly this but (correct me if I'm wrong) it seems like it will only run on Windows (no OSX or Linux). So I wanted to be add this functionality via Python scripting in Blender to be able to do this no matter the platform. Disclaimer, Python is not my native language. I taken some inspiration from a few existing scripts and adapted a simple one that : Looks for files ending with FBX in the input path. Imports them (one by one) via the Blender FBX operator : bpy.ops.import_scene.fbx(filepath=file) Exports them (one by one) via the BabylonJS operator : bpy.ops.bjs.main(filepath=file) Problem Sadly here I am getting an error. Perhaps I'm being naive here by thinking that I can access a non-standard issue addon via scripting ? That is what the error seems to indicate at least : Traceback (most recent call last): File "/BatchConvert.py", line 54, in <module> File "/BatchConvert.py", line 44, in convert_recursive File "/Users/ozeki/Library/Application Support/Steam/steamapps/common/Blender/blender.app/Contents/MacOS/../Resources/2.78/scripts/modules/bpy/ops.py", line 189, in __call__ ret = op_call(self.idname_py(), None, kw) AttributeError: Calling operator "bpy.ops.bjs.main" error, could not be found location: <unknown location>:-1 Solution ? Is this doable with the way the Babylon Blender addon is setup and if so what am I doing wrong? I have attached my current code to this post. I've also added a list of references for the scripts that I have looked at or adapted from originally. References https://github.com/BabylonJS/Babylon.js/blob/master/Exporters/Blender/io_export_babylon.py#L202 https://github.com/BabylonJS/Babylon.js/blob/master/Exporters/Blender/src/babylon-js/__init__.py#L66 http://blender.stackexchange.com/a/47000 http://blender.stackexchange.com/a/34539 https://github.com/pjezek/blender/blob/master/unity_tools/__init__.py https://github.com/RH2/TD_B3D-UDK/blob/master/main.py#L152 BatchConvert.py -
Hello! I tried setting a sprite to pivot around another sprite, only to realize that it's rotating and one side always faces the other sprite. Is there a way to make a sprite circle a point, while staying static (without rotating)? I haven't found anything useful online. Thank you.
-
Hi guys! I have a tube mesh, created with an array of Vector3 points. I update this tube mesh adding new points to the path, but for some reason it's giving me errors like Uncaught TypeError: Cannot set property '0' of null Uncaught TypeError: Cannot set property 'x' of undefined http://babylonjs-playground.com/#85J9N#10 What am I doing wrong?
-
Hallo, I need to move and rotate a player by a predefined path. Like: [stepForward, turnLeft, stepForward, turnLeft, stepForward, stepForward, stepForward, ...] The problem is, the path is dynamic and depends on user input. I tried to put the coordinates and agles in arrays and do something like tween.to({x:[...], y:[...], angle:[...], 5000, Phaser.Easing.Linear.None, true); But in this case I got problems with rotation. I don't know how to chain dynamicly or use several .to call. Any ideas?
-
I am currently building the AI for some baddies in a simple video game I'm making. The levels are mostly horizontal with some floating platforms here and there. Using `enemy.state` as an attribute to keep track of what the enemy is doing and by tracking the x and y distances between the player and the baddies, I am able to create a semi-working AI system. But there are still glitches. For example: if the baddie is on a hovering platform and the player is directly below that platform, the baddies doesn't know to walk off the platform to get to the player. Are there ways to create "rays", like with Unity? Essentially, a "ray" is an orb that surrounds the object and detects its relation to other things around it. This way the object can navigate levels in a human-like way. Anything along those lines, or any AI tips and techniques/tutorials would be greatly appreciated!
-
So I have this demo below before I explain what I am trying to do http://jsfiddle.net/Batzi/abs191e5/19/ So I am using the function 'moveToXY()' to move my character. Every 5 seconds it's moving towards a different direction. I am using SetTimeout() as you can see in the code. All animations are applied so everything is working as intended. In the update(), I am specifying when the character should stop (ex: if it reaches a specific x & y). However, I want to declare a predefined path such as this one var path = [[1700, 800], [1600, 800], [2300, 800]];and have my character roam around but I don't want to duplicate the setTimeout. How would you approach this problem? PS: Ignore the coordinates in path. They're out of proportions.
-
Hi guys! I'm trying to develop a road with Phaser (My idea is that a car moves for him). How can I do that when the car is outside is slow? My first test: http://codepen.io/jdnichollsc/pen/YPEeYe Any help is greatly appreciated! Regards, Nicholls
-
Hi friends, quick question: What is the path to my function? I'm not sure what to put in this field (image below). My directory looks like this: MyGame.zip >index.html >html5contents (folder) >aqh_yepApi.js In aqh_yepiApi.js I have the functions yepiRestart(), yepiSound(), and yepiPause(). Those are the functions I'm trying to reach, but I'm not sure what to put in the field. I know what I have in the image is wrong. I use GameMaker Studio to make my games if that's relevant at all. Thanks!
-
Hey all, I am trying to make a very basic prototype of a Paint-like applications. Is it possible to bind a mousemove event to the Stage that I create? If I bind an event like this: el = this.renderer.view;el.addEventListener('mousemove', function(e){ console.log('move); });I don't get a log event, so I assume that Pixi is catching and squashing the event. What's the Pixi way of binding mousedown, mousemove, and mouseup events to a Stage instance? Do I need to create an interactive, but transparent Graphics instance to cover the entire thing and have it handle the events? Thanks!
-
Hello everyone, I'm actually working on a Phaser Game. I'm already done a pathfinding for getting the path my soldier should take. Now I would like to make tweens for it and create a chained tween with each tile of the path. Every infos I found don't speak about creating a tween object. Like it we could add new steps to it and after assign it to a sprite for example and play it. Sorry for my english... (FrenchStyle ^^) github : GreG28
-
Dear All, I'm Stefano Tamascelli XTeam Software ( Italy ), we are developing the HTML5 version of our game "Retaliation Path of War" ( currently available for Windows, iOs, Android, Flash ) Retaliation: Path of War is a new and original hex-and-counter turn based wargame. It has been designed and developed with the main purpose of offering a fun and easy to learn wargame, without the complexity and hyper realism of traditional simulation wargames while at the same time keeping all the interesting and challenging elements of tactical reasoning. Have you enjoyed playing many matches of Risk™ with your friends but often felt limited by its simplicity and yearned for something more? Have you been engaged in realistic battle simulations lasting several hours (or days!) and wished you could just get to the point and vanquish your enemies? Then you've come to the right place: whether you are a seasoned strategist or a casual gamer, you will love crushing tanks and conquering bases in Retaliation! Retaliation: Path of War draws inspiration from a great variety of games (Risk™, Chess, Go, RolePlayingGames, Axis&Allies™, Memoir'44™ just to name a few) to deliver a fun, immediate and addictive challenge. It is simple to learn and fast to play but it offers an infinite variety of tactical situations. http://www.retaliationgame.com/ Flash version www.xteamsoftware.com/game/retaliation_pow/
-
Hey guys, my name is Rick and I have been playing around with Phaser for the past few days. I am looking to build a lotto scratcher type game. I need to be able to draw directly to the mask layer. I have found a few different things on the forums that should be able to help me. Alpha Mask - Makes sense.BitmapData - Not sure how to add to this based on user input. To my knowledge, this IS my mask. Right..?globalCompositeOperation - No idea what this even is.I dont want to it be blocky like this.... http://examples.phaser.io/_site/view_full.html?d=display&f=bitmapdata+draw.js&t=bitmapdata%20draw I don't want to add circles, I want to add a stroke.I want to be able to take the path the finger, give it a width (like how you could control the brush thickness in Photoshop), and then add it directly to the mask. How would I go upon doing this, have people done this before?
