Nodragem

Members
  • Content Count

    164
  • Joined

  • Last visited


Reputation Activity

  1. Like
    Nodragem got a reaction from plicatibu in Can we make multiplayer games for FB Instant Games?   
    I started to go through the official "getting started" tutorial where you're going to push a tic-tac-toe game including multiplayer and messenger bot on the Instant Game servers.
    Here the page: https://developers.facebook.com/docs/games/instant-games/getting-started/game-setup
    Here the tic-tac-toe project: https://origincache.facebook.com/developers/resources/?id=tic-tac-toe.zip
    Following the tuto and README.md, I created the App Page, put the server-side (i.e. the bot) on Heroku, tested it with cURL and attached the Bot to the App Page, as it can be seen in the attached screenshot.
    Now the server-side README.md tells me to run the following command in the server project:
    node index  This runs the bot on a local server, so I am not sure why I needed to do the above steps that set up my bot online... But anyway, now, when I run the client project with:
    yarn test I get an error:
    Error loading from backend invalid signature  
    I am not sure what is going wrong here ... but it seems to come from the line `this.displayError(error);` in the file `game.js`. Here an extract, if that can help:
    function gameplayScene(FBInstant, backendClient, html2canvas) { this._cells = [[],[],[]]; this._matchData = {}; this.SPRITES = ['love', 'like']; this.start = function() { this.makeGrid(); var contextId = FBInstant.context.getID(); FBInstant.player.getSignedPlayerInfoAsync(contextId) .then(function(signedPlayerInfo){ console.log(signedPlayerInfo.getSignature()); return backendClient.load(signedPlayerInfo.getSignature()); }) .then(function(result){ console.log(result); if (result.empty) { return this.createNewGameAsync(); } else { return Promise.resolve(result.data); } }.bind(this)) .then(function(backendData){ this.populateFromBackend(backendData); }.bind(this)) .catch(function(error){ this.displayError(error); }.bind(this)); }; ... I have few ideas / paths of investigations:
    1) when I invite a friend for a tic-tac-toe game, maybe this friend needs to be registered as a tester for my app, meaning they have to accept the invitation as a tester (which they didn't yet) 2) the bot seems to need the pages_messaging permission to work properly, which I don't have (need to write a Privacy Policy etc..., that is  a bit involved for completing a getting started tuto )  3) one thing that puzzles me is how the client knows whether to use the local bot on localhost:5000 or the online bot linked to the App Page... EDIT: 4) Postgresql is not well configured Any suggestion is welcome  !
    EDIT:
    concerning 1) I registered my girlfriend, and yes indeed, you need your tester to accept the invite for the game to start in their messenger. However again, I've got a Invalid Signature error.
    concerning 3), this is controlled by the line `const BACKEND_URL = 'http://localhost:5000';` in `index.html`.
    concerning 4), now that I am connecting to my game server on localhost:5000, I don't have the invalid signature issue any more. However, from then, the problem was that my game server would not connect correctly to the Postgresql server and the table 'matches' requested by the game server did not exist in the Postgresql database anyway.
    Hence I found out how to connect to the Postgresql server. In the file .env, set the DATABASE_URL like so, replacing  'username', 'password' and 'database_name' with the relevant information:
    DATABASE_URL=postgres://username:password@localhost:5432/database_name Note 1: your username is probably postgres, and if you follow the below instructions, the database_name will also be postgres. The password is the one you were asked when installing postgresql.
    Note 2: localhost:5432 is the default local server, use a service such as heroku (https://www.heroku.com/postgres) to set up an online server, the DATABASE_URL will be available in the setting page of the postgres server.
    Then open 'pgAdmin4', unfold the graph tree until you see "Tables", right-click on it, Create>Table..., name it 'matches', then unfold the tree to see 'Columns', right-click on it and Create>Column, name it "context", select type "text". Now create a column "data" the same way.
     

     
  2. Like
    Nodragem reacted to Nockawa in Big brother is back: Observable everywhere!   
    Hello everybody,
    I just wanted to let you know that coming with the 2.4 we have a new Observable Pattern. @Deltakosh is already using them almost everywhere he can for you to observe a particular event.
    So how does it works
    There're two parts: the Observable and the Observer. The Observable is a property of an object which represent a given event (like BeforeRender for instance). Users that want to have their own piece of code running in response of such event will register an Observer to the adequate Observable. Then it's the duty of the Observable to execute the Observers, when appropriate.
    We have two classes
    Obsersable<T>the implementer uses it to create a property which will trigger all the registered observers.The Generic type T is used to communicate a given data type from the Observable to the Observer.
    You have the following method/properties:
    add(): to add an Observer remove(): to remove a previously registered Observer removeCallback(): same as above but giving the callback instead of the Observer instance notifyObservers(): used to notify all the registered Observers (with a little special feature I'll detail at the end of this post) hasObserver: a property that returns true if at least one Observer is registered clear() to remove all Observers clone() to simply clone the object but not the registered Observers. Observer<T> an instance of this class is created when you call the Observable.add() method to create a new Observer. When you no longer want to be notified, you call Observable.remove() giving the same object and you're done!
    The Special Feature
    Ok, this one is not the easiest thing to catch, but with an example I'm sure everybody will get through it. Let me first explain the intent behind this feature:
    Sometime you have many different events that are still part of a "group", then you're faced with the choice of:
    Create one Observable per event: it's fine grained/efficient, has good performances, but you have to repeat x time the same implementation in your code with few changes. Perfect example: MouseButtonDown/Up/Click/DoubleClick/Move/Enter/Leave: 7 Observables! Create one Observable that will aggregate all these events: then in the T data, you specify which "sub-event" it's about (e.g.either MouseButtonDown or MouseButtonUp, etc.) thanks to an enumeration alike data. The implementation is easier because you only have one Observable to code, but the drawback is that people that only care about MouseButtonClick will still be notified for the 6 others sub events! Which is not the best thing performance wise. The solution: the event mask
    When you register an Observer, depending on the implementation of its corresponding Observable, you have the possibility to state which "sub events" you can to be notified about (e.g. MouseButtonClick | MouseMove).
    On the Observable side, when the notifyObservers method is called a given mask value will be specifed to state which subevent it's about (e.g. MouseMove), then only the registered Observers with this mask will be notified!
    You have the best of both worlds! By default the mask value is always -1, meaning all the bits are set, then all subevent are concerned (which is equivalent to only 1, because there's no distinction).
    Give me an example!
    var button2Rect = BABYLON.Rectangle2D.Create(canvas, "button2", 200, 500, 100, 40, BABYLON.Canvas2D.GetSolidColorBrushFromHex("#4040C0FF")); button2Rect.roundRadius = 10; button2Rect.origin = new Vector2(0.17, 0.33); button2Rect.levelVisible = false; text = BABYLON.Text2D.Create(button2Rect, "button2Text", 0, 0, "12pt Arial", "Awesome!", new Color4(1, 1, 1, 1)); // Create an Observer on the pointerEventObservable buttonRect.pointerEventObservable.add((d, s) => { console.log("UP"); }, PrimitivePointerInfo.PointerUp); The Canvas2D defines for Primitives a "pointerEventObservable" property defined as : Observable<PrimitivePointerInfo>.
    The class PrimitivePointerInfo contains all the data sent by the Observable for each Observer callback to know what happened.
    But it also defines the different available sub-events:
    export class PrimitivePointerInfo { private static _pointerOver = 0x0001; private static _pointerEnter = 0x0002; private static _pointerDown = 0x0004; private static _pointerMouseWheel = 0x0008; private static _pointerMove = 0x0010; private static _pointerUp = 0x0020; private static _pointerOut = 0x0040; private static _pointerLeave = 0x0080; private static _pointerGotCapture = 0x0100; private static _pointerLostCapture = 0x0200; public static get PointerOver(): number { return PrimitivePointerInfo._pointerOver; } public static get PointerEnter(): number { return PrimitivePointerInfo._pointerEnter; } public static get PointerDown(): number { return PrimitivePointerInfo._pointerDown; } public static get PointerMouseWheel(): number { return PrimitivePointerInfo._pointerMouseWheel; } public static get PointerMove(): number { return PrimitivePointerInfo._pointerMove; } public static get PointerUp(): number { return PrimitivePointerInfo._pointerUp; } public static get PointerOut(): number { return PrimitivePointerInfo._pointerOut; } public static get PointerLeave(): number { return PrimitivePointerInfo._pointerLeave; } public static get PointerGotCapture(): number { return PrimitivePointerInfo._pointerGotCapture; } public static get PointerLostCapture(): number { return PrimitivePointerInfo._pointerLostCapture; } } When we register the Observer, here's what we did:
    buttonRect.pointerEventObservable.add((d, s) => { console.log("UP"); }, PrimitivePointerInfo.PointerUp); The first argument is the callback (d, s) are two parameters, d is of type T (then it's PrimitivePointerInfo in our case) and contains the data setup by the Observable, s is of type EventState. EventState is a little class with two properties: skipNextObservers, if you set to true then the subsequent Observers won't be called; mask, which is the mask the Observable used to call the Observers.
    Then you have the body of your callback (here defined as a lambda, which only does a console.log)
    The last argument is the mask you want. If you don't specify it, you will be notified of everything, in this case we specify PrimitivePointerInfo.PointerUp to only get notified when the Pointer is Up and nothing else.
    In the 3D Engine, many handlers were replaced by Observable, there's still a backward compatibility but now, through the Observable, more than one Observer can be notified of a given event.
    If you have question, don't hesitate, shoot!
    You can take a look at this file for the complete version of the example above.
  3. Like
    Nodragem got a reaction from chuen1118 in Can we customize the look of BabylonJS.GUI?   
    I made a progress bar using two rectangles, a container and a text block, here  I thought I would share because I am very proud of myself  !

     
    You can find the code to run it just here: https://playground.babylonjs.com/ts.html#P3XLK9
  4. Like
    Nodragem got a reaction from Spankied in Can we customize the look of BabylonJS.GUI?   
    I made a progress bar using two rectangles, a container and a text block, here  I thought I would share because I am very proud of myself  !

     
    You can find the code to run it just here: https://playground.babylonjs.com/ts.html#P3XLK9
  5. Like
    Nodragem reacted to jsfehler in Phaser UI Tools, various tools to make building a UI easier   
    https://github.com/jsfehler/phaser-ui-tools
    This is something I worked on a few months ago to refine my javascript knowledge and eventually my ES6 knowledge. It came about after I realized I kept needing some of the same things in my Phaser projects. It contains the following classes to make building a UI in Phaser easier:
    - TextSprite
    - TextButton
    - Column
    - Row
    - Viewport
    - Scrollbar
    - Valuebar
    - Quantitybar
    - Wheel3D
    For many projects, it may make more sense to build the UI in HTML and overlay it. I'm not making an argument for that one way or another. These classes satisfied my use cases, and I hope someone else finds them useful.
    Phaser UI Tools is available under the MIT license, so feel free to use any parts of the code in your own projects in whatever way you'd like. However, if you do anything that improves or adds to what's here, I'd always appreciate a Pull Request. I consider this project relatively complete, so I won't be building any completely new features in the future, but I'll answer any questions and try fo fix any bugs that are reported.
     
  6. Like
    Nodragem got a reaction from bghgary in Gif Creation   
    @Dad72 I think that your English is fine, and don' t forget that your PR will be reviewed by someone else, so your English will be corrected if needed then.
    There are many people who aren' t native English speakers (including me), and still our documenting effort is worth more than no documentation   !
  7. Like
    Nodragem got a reaction from Wingnut in Having position/rotation issue with MergeMesh()   
    Yeah!!
    I was so sure there was some function like that and I was playing around without success with the auto-completion yesterday writing things like "unique", "makeUnique".
    I am happy to know that I was not crazy after all, gonna have another try today and let you know if it worked.
    NOTE for others: It looks like that the issue I have with merging clones of clones happens also when making instances of clones. 
  8. Like
    Nodragem reacted to PatrickRyan in Transparencies question   
    Remember that setting the transparencyMode in your javascript code will always work for your scene but is a local fix, but if you send that glTF to another project, view it in a glTF viewer, or share it in a 3D model repository the glTF itself will render incorrectly. If you don't have the time to go through and convert your materials and textures to PBR, you can simply edit the glTF to set the blending mode manually.
    If you exported a glb, and are on windows, you can download this tool from github which is a shell extension written by one of our team's engineers that will add an option to the right-click context menu to convert between glTF and glb. Once you have a glTF file (the json file) available open it in VSCode or similar editor and search for "alphaMode" and your three options are OPAQUE, BLEND, and MASK. If you change the material that your trees use to "alphaMode": MASK and save the file, your glTF will render correctly in any glTF viewer. Since glTF is a transmission format and tooled to render the same no matter what renderer displays it, I always err on the side of generating a valid and complete glTF without the need for local fixes as I never know when I will need to use that file again elsewhere.
    Now you have plenty of approaches and I hope this all helps you in planning out your pipeline and getting the most out of the power of glTF and Babylon! Let us know if you have more questions.
  9. Like
    Nodragem got a reaction from servusdei in [Feature Request] Feedback on the new Inspector   
    Hello here, I just tested the new inspector on the BabylonJS Viewer while testing a scene that my colleague sent over; amazing work! It is very enjoyable to use!
     
    Here is my feedback after few minutes of use:
    1) I was quite limited in testing the performance of the scene because there seems to be no way to display a curve of the different variables against time, and/or record them into a CSV file for later analysis. Is this in the roadmap ? would be the cherry on the cake!
    2) there seems to be no way to see what observers we added to Scene Observables. If we could, it would then be useful to be able to delete / disable them one by one to see their impact on performance. Perhaps even better would be to get their statistics in term of their duration within a frame. Ideally the observers would be grouped by the class/type of objects that hold them. For instance, I have 1000 cubes rotating in my scene, and I would rather get the duration that operation takes for the whole group rather than for every single cube one by one.
    3)That could also be done for callbacks we added to functions such as registerBeforeRender(); 
    4) maybe we need a memory profiler; the browser profiler is nice, but maybe we can get more tailored information from babylonjs itself on what memory we are using, what is cached, etc...
    5) we may need a gizmo for the lights. I understand that "mathematically" a directional light has no position, but still, it would be nice to see the light on the screen, and be able to rotate it on the screen.
    6) could be nice to we able to change the value of text box (such as Camera.Speed) by dragging the mouse.
  10. Like
    Nodragem got a reaction from PatrickRyan in [Feature Request] Feedback on the new Inspector   
    Hello here, I just tested the new inspector on the BabylonJS Viewer while testing a scene that my colleague sent over; amazing work! It is very enjoyable to use!
     
    Here is my feedback after few minutes of use:
    1) I was quite limited in testing the performance of the scene because there seems to be no way to display a curve of the different variables against time, and/or record them into a CSV file for later analysis. Is this in the roadmap ? would be the cherry on the cake!
    2) there seems to be no way to see what observers we added to Scene Observables. If we could, it would then be useful to be able to delete / disable them one by one to see their impact on performance. Perhaps even better would be to get their statistics in term of their duration within a frame. Ideally the observers would be grouped by the class/type of objects that hold them. For instance, I have 1000 cubes rotating in my scene, and I would rather get the duration that operation takes for the whole group rather than for every single cube one by one.
    3)That could also be done for callbacks we added to functions such as registerBeforeRender(); 
    4) maybe we need a memory profiler; the browser profiler is nice, but maybe we can get more tailored information from babylonjs itself on what memory we are using, what is cached, etc...
    5) we may need a gizmo for the lights. I understand that "mathematically" a directional light has no position, but still, it would be nice to see the light on the screen, and be able to rotate it on the screen.
    6) could be nice to we able to change the value of text box (such as Camera.Speed) by dragging the mouse.
  11. Like
    Nodragem got a reaction from Sebavan in Can we customize the look of BabylonJS.GUI?   
    I made a progress bar using two rectangles, a container and a text block, here  I thought I would share because I am very proud of myself  !

     
    You can find the code to run it just here: https://playground.babylonjs.com/ts.html#P3XLK9
  12. Like
    Nodragem reacted to Dad72 in How to restart a level (dispose of previous one) without memory leak?   
    I am not very familiar with profilers. It's something I'm going to have to learn to use a day.
    Me when I have a scene, I also reset the variables, especially arrays, and I put the scene variable to null too.
    But maybe there is something not clean with scene.dispose (). Deltakosh will be able to check it, but there he is on vacation for 15 days.
    Sorry for not being able to help anymore. I hope someone can better understand your problem than me.
  13. Like
    Nodragem got a reaction from jerome in Can we customize the look of BabylonJS.GUI?   
    I made a progress bar using two rectangles, a container and a text block, here  I thought I would share because I am very proud of myself  !

     
    You can find the code to run it just here: https://playground.babylonjs.com/ts.html#P3XLK9
  14. Like
    Nodragem got a reaction from ssaket in Can we customize the look of BabylonJS.GUI?   
    I made a progress bar using two rectangles, a container and a text block, here  I thought I would share because I am very proud of myself  !

     
    You can find the code to run it just here: https://playground.babylonjs.com/ts.html#P3XLK9
  15. Like
    Nodragem got a reaction from Dad72 in Can we customize the look of BabylonJS.GUI?   
    I made a progress bar using two rectangles, a container and a text block, here  I thought I would share because I am very proud of myself  !

     
    You can find the code to run it just here: https://playground.babylonjs.com/ts.html#P3XLK9
  16. Like
    Nodragem got a reaction from JohnK in Can we customize the look of BabylonJS.GUI?   
    I made a progress bar using two rectangles, a container and a text block, here  I thought I would share because I am very proud of myself  !

     
    You can find the code to run it just here: https://playground.babylonjs.com/ts.html#P3XLK9
  17. Thanks
    Nodragem reacted to Deltakosh in How to Load Synchronously a Text/CSV/JSON file?   
    Well yeah  this is a bit better still than pure pyramidal callbacks but if you do not need to support old browsers then async/await is magic
  18. Like
    Nodragem got a reaction from Deltakosh in Displaying 3d objects in a 2D grid?   
    ha ok  I thought it was implemented only in the preview version for some reason.
    So I guess I have no reason to use 3d planes anymore!
  19. Like
    Nodragem got a reaction from brianzinn in Displaying 3d objects in a 2D grid?   
    I meant a plane, as in a flat surface made of 4 vertices. I used the term 3d plane as opposed to the 2d GUI.
    So basically, I made an orthographic camera this way:
    this.camera.orthoTop = 1080/2; this.camera.orthoBottom = -1080/2 this.camera.orthoLeft = -1920/2 this.camera.orthoRight = 1920/2;  
    This set up simulates a 1080 x 1920 resolution, that's a "virtual" resolution, because it is independent from the actual resolution of the device screen. That resolution is in world coordinate and reads in fact as 1080 meters x 1920 meters rather than 1080 pixels x1920 pixels.
    Then I make my 3d objects (planes, cubes, characters) so that their largest side measure 1m. 
    Hence if I apply mymesh.scaling = 120, the largest side would measure 120m, which will correspond to 120 virtual pixels.
    Virtual resolution is a common method to make GUI independent of screen resolution. Using this method the size of the objects/menu will resize automatically for any screen resolution as their position/scale are in world coordinate (meters).
     
    The main problem as for now is that BABYLON.GUI does not use a virtual resolution. Hence the only way to match the 2D GUI with the 3D objects rendered with the ortographic camera is by using percentage of the screen space. However, as far as I know, BABYLON.GUI does not support percentage for position (left, top). Hence at the end of the day, I made all my GUI (buttons, textBlock, etc...) with 3d planes, so that the GUI scale automatically and in accordance with the other 3D objects.
    @Deltakosh An obvious feature request would be to implement virtual resolution in BABYLON.GUI. It is quite common in game engines I think and would help mixing 3d objects and 2d GUI.
     
    EDIT: if you wanted to have a perspective camera to render the 3d objects on top of the GUI, the process would be a bit more complicated. You would compute the distance at which your camera is covering 1080 meters x 1920 meters and place/organise your objects on that plane. However your 3d objects will suffer from perspective distortion when they are near the border of the screen. If that bother you, you would need to consider having one perspective camera per 3d objects, so that all the 3d objects are rendered in the center of their camera.
  20. Like
    Nodragem reacted to Deltakosh in Can we customize the look of BabylonJS.GUI?   
    @JohnK is currently working on it (https://github.com/BabylonJS/Babylon.js/issues/5458)
  21. Like
    Nodragem got a reaction from Deltakosh in Displaying 3d objects in a 2D grid?   
    Yep, the idea was to mix 3d and 2d objects because, for instance, I wanted to put a 3d object in a 2d GUI container.
    I finally used 3d planes with an orthographic camera.
    I found a way to match the size a my main 3d plane with a 2d GUI rectangle. Hence I thought I could use 2d GUI buttons and grids, but no: you can't position them using percentage, hence their position is dependent on the screen resolution... While 3d objects are not. 
  22. Like
    Nodragem got a reaction from eps in Can we customize the look of BabylonJS.GUI?   
    Hello,
    I was just suggesting that to be able to use our own textures would be useful; but unfortunately, I don't have much time to implement this functionality 😕 
    I am currently focusing on remaking my menu in BabylonJS. Here my progress:

    Basically I created a Rectangle, in which I've inserted a horizontal StackPanel of height=0.7 and width=1, in which I've inserted two grids of height=1 and width=0.5.
     
    However, I get some weird behaviour of StackPanel.
    Let's say that grid1 is the white grid (2 rows x 1 col) on the left and grid2 is the brown grid (10 rows x 2 cols) on the right.
    When I try to change the width of my horizontal StackPanel to 0.9 (instead of 1), I get this weird behaviour:

    I expected grid1 and grid2 to adjust to make 50% of the width of StackPanel. I did not expect to have a gap between the two grids... or to get grid2 truncated on the right.
  23. Like
    Nodragem got a reaction from Tomm Huth in Is Babylon.js for me ?   
    Yeah! Let's break everything  
    @Deltakosh Concerning the compatibility issues with the PGs, you could add a droplist where the devs/users could select if their PG is to be run with BabylonJS 3.x or with BabylonJS 4.x.
    For instance, as Python 2 and Python 3 are both used in data science, jupyter-notebooks would let you start a notebook with whichever version.
    You can have a look here, Go in File/New Notebook or in Kernel/Switch Kernel: https://hub.mybinder.org/user/ipython-ipython-in-depth-ry7uv1oa/notebooks/binder/Index.ipynb
    The online jupyter-notebooks only have Python 3 installed, but I can swear that if you have both versions, you can switch.
    @GrosSacASacs I started to use BabylonJS recently, and my feeling is that it has a lot of potential, but it might miss few things to be easily scalable for a Big Big game. But at the same time, the community is great and the devs are nice, so the ideas you have to make the engine better and scalable will probably be heard, discussed and implemented. Some times they just get implemented straight away. This opportunity to be at the heart of the development loop is something you won't find in Unity or Unreal (too many people). 
    Also, maybe more than the engine, it is also the game developer who needs to write scalable code  ! I let you know how it goes for me (fingers crossed!).
    I was actually wondering how I was going to do that  Just discovered we could have several scenes! this PG rocks: https://www.babylonjs-playground.com/#MXCRPS#1
  24. Sad
    Nodragem reacted to Deltakosh in Is Babylon.js for me ?   
    We will remove SOME of them for 4.0 but not all depending on how many people still use them.
     
    But this will be really a few as we do not want to break changes because then playgrounds will have to be fixed, etc... as I mentioned in the other topic
  25. Like
    Nodragem reacted to Tomm Huth in Is Babylon.js for me ?   
    Is this the reason why there seems to be (more than a little) stuff that is marked as deprecated, but is not removed? It strikes me as less optimal to leave deprecated stuff in, even when releasing new major versions (which explicitly indicates possible breaking changes)? Isn't that going to bloat the framework and make the API more confusing, especially with changes that aren't too difficult to migrate? If people aren't willing to do the work needed to upgrade, they can easily just stick with the version they have until they can.