• Content count

  • Joined

  • Last visited

  • Days Won


jpdev last won the day on January 21

jpdev had the most liked content!

About jpdev

  • Rank
    Advanced Member
  • Birthday 02/01/1982

Profile Information

  • Gender
  • Location

Recent Profile Visitors

641 profile views
  1. Time for the weekly update I have been working further towards the goal of having different skills in the game. So now there is casting complete with a cast time, cast bar and an effect on the target of the cast: You can also cancel your casts by moving or pressing esc. Pressing the button again won't cancel it to allow for "button mashing" to recast as fast as possible. When creating the cast bar I noticed that parts of my ui were not behaving correctly when the browser window is resized. Upon investigation and debugging I found the reason: When using canvas2D and placing something on a fullscreen canvas with marginAlignment, never set x or y on that object, as this will disable correct realignment on window size change. For anyone curious here is a playground for the heal effect on the target: All that's needed to get the final effect is setting a circle texture on the planes. Yesterday I was in the mood to try a bit of modelling in blender, here is the new enemy I have created: It's some kind of scopiony monster that will roam the world and sting anyone who comes too close. I decided to name them "Scry".
  2. Hi @Nabroski Using the same event from the pg you linked, "updateSamplingMode" is still not working for a simple texture loaded from a file. Example playground, click anywhere to trigger "updateSamplingMode" call: As you click you can see, the only texture affected by setting the samplingmode is the one, that was loaded with a different sampling mode. The default texture does not change sampling mode. Just to make sure it's not a bug in setting up the textures, here is the pg with only the samplingmode parameter switched between the two texture loads: Now updateSamplingMode only affects the other texture.
  3. I wanted to help by providing a function for changing all textures in the scene, but it seems that texture.updateSamplingMode is not working. If I set the sampling mode when creating the texture it works, but if updateSamplingMode is used, there is no effect. (Playground explanation: left plane is pixalated, here the samplingmode is set on texture loading, right plane is not pixalated here the sampling mode is set after the texture creation.) This makes it impossible to just iterate all textures and change the samplingmode after a scene is already loaded. (Which is what I had in mind.)
  4. Hi, Thank you for your interest. That actually was not a latency problem. It was caused by me not realizing the real time that passed between calculation ticks on the server. (I thought that setInterval would trigger the function in exactly the given amount of milliseconds but in fact that's not true - so my fix was to keep track of the time difference between server ticks and setting the distance traveled according to that.) For the actual latency, the server is actually ahead of the clients in my game: When you click to move in the client A, the client just sends this command to the server (without starting to move the character). Upon receiving the move command, the server sends a message to all clients, that the player object of clientA now moves. (The server begins to move it, all clients begin to move it when receiving the message). When the object reaches it's destination (or is block or anything like that) the server sends another message to everyone. The messages contain all info about the object, so clients that got out of sync for any reason can fix that. To not have stuff "jump" around on fixing the positions, the client calculates how much he is off and fixes smoothed out over a few frames. (So the object more or less slides into the corrected position instead of warping there.) I don't have any fancy latency detection and calculations. I think it's still fine, because while the game is realtime it is not relying on totally exact positions on every client.
  5. Hi BabylonJS community, here is another update for my challange project: Let's start with a bit of deployment - the game can't be run locally forever, or no one will ever see it: So I want my game to run on a vserver using apache & node. NodeJS will only handle the websocket request. All pages, scripts and resources will be served by the apache. Just as a challange (and maybe to allow it to work with some firewalls) websockets and websever should both run on port 80. I finally found the magic apache 2.4 configuration: RewriteEngine On RewriteCond %{HTTP:Upgrade} =websocket [NC] RewriteRule /(.*) ws://localhost:3001/$1 [P,L] This allows the apache to server pages normally on port 80 but if an Upgrade to websocket-mode is received everything gets routed internally to port 3001. So my gameserver in node is running internally on port 3001. To work this requires apache 2.4 and mod_proxy and mod_proxy_wstunnel. (For debian users this means you need "jessie", wheezy's apache is not up to date enough.) In the last update I had a hand coded 20 x 10 array holding indexes for map data - this works, but I want to be able to edit the map in a nice way. So now the map can be edited in free map editor "tiled". Natively tiled stores the created maps in ".tmx" files. The content is actually a pretty nice xml, so you I can access it this way in my nodeJS server: Step 1: Get the correct module to read xml files: import xml2js = require('xml2js'); Step 2: Use the module to read the tiled map and get to the map info & map data: let parser = new xml2js.Parser(); fs.readFile(__dirname + '/data/world.tmx', function(err, data) { parser.parseString((<any>data), function (err, result) { let width =$.width; let height =$.height; let data[0].data[0]._; … } That was painless (worst part finding the typescript definitions for the xml2js. I can’t seem to find anything on the DefinitelyTyped github repo, I blame github user interface...). The data is a csv representation of the map tiles. You can choose csv in tiled when creating the new map, parsing this into an number array in JS was no problem. As a bonus I now use tiled not only to define the map but also place enemies and the player spawn point. I do this using an object layer in the tiled map and when loading the map the name of the object defines what's happening, the coordinates of the object define where. For example the big "slime" boxes mean, that in the center of the box a slime is spawned and the box area is the area the slime it roams. Here is what this looks like in tiled: The upper left part of this map as it looks in game: I also tested if the game runs in all browsers that are currently installed on my system, so I had a big in game meeting with myself: The result is amazing, the performance seems to differ a bit, but it runs in all four! - big thanks to the babylonJS team And the latest addition to the game is finally the skill bar, you can already see it in the browser screenshots above. It's implemented using canvas2D, the icons are 50x50 pixels and drawn in inkscape - I was surprised how hard it is to come up with icons, let alone make them not ugly. The skills are clickable and you can also use them by pressing the corresponding button, clicking and keypresses highlight the used skill. All done with canvas2D. The features are: The buttons are clickable by mouse and also by keybind. The keybind is indicated on the button. Cooldowns are visualized by graying out part of the button. Activating a button highlights it as feedback to the user. The skills can have a cooldowns, but they don’t have to. Which skills are available and which cooldown they have (if any) is all decided by the server. In this gif you see the test-skill "wave" with a cooldown, and then the attack ability without a cooldown: Okay, that is it for this update. I am still having fun with the project and at this point I am sure that by the end of the challenge there will be a playable result for everyone to try out. How "deep" the game play will be is a question of available time and motivation until the end of February. Also: any feedback is very welcome!
  6. I think you need a dynamicTexture: var texture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true); var textureContext = texture.getContext(); Now paint/blit your image onto the canvas of this texture.
  7. I am happy to say I am still on it, and here is my latest update:
  8. A new (small) update, as I sadly haven't gotten a lot done the past few days. I managed to at least get some environment into the game: Yes, that is the smallest "map" ever.. because right now it's an array written into the server-code by hand - the plan is to be able to create the map using tiled. The resulting .tmx file should be loaded when the server starts. At least collision with the obstacles is working on client and server side. Just for fun I made a quick time lapse of how the tree got into the game: I also managed to build a small login screen where you can choose your name & class when logging into the game: This one (like the chat box) is html over the babylon canvas. As for the skills I wanted to add to the game, I only managed to get a skillbar working with canvas 2d, but no skills yet. I hope the skill bar and working skills will be part of the next update. One last thing I learned was the difference between instancing and cloning meshes (or at least, that there are differences): Both share geometry, but instancing shares more (materials can not change etc.) - and if you try to merge geometry on instanced meshes chrome crashes with “out of memory” so it seems to be able to merge you have to clone the meshes. So the goals haven't changed much since the last update: - improve "map" support by loading a tiled map on the server side - get skills into the game
  9. Thanks, that's exactly what I was missing, so issue solved. @Nockawa Just as an idea, maybe (since that's where I was looking for such a flag) you could add "hasAlpha" as an option to the Sprite2D?
  10. Edit: The solution to get Sprite2D with transparent areas working is to set "hasAlpha" on the Texture to "true". --- Hi, I want to use sprites2d (in canvas2d) made from png files that have transparent areas. expected behavior: Transparent areas are rendered transparent actual behavior: transparent areas are rendered not transparent It gets super weird, if I set opacity on the sprite to 0.999 everything works fine. Working, with opacity 0.999 no longer working with opacity 1.0 (or opacity removed): I will use the 0.99 opacity workaround for now., but this seems buggy - I would like my sprite to be rendered according to the alpha channel, and it's weird that this only seems to happen if I set opacity to 0.99. Maybe I missed another property?
  11. You can register a function for collisions this way: (From
  12. The exported file is missing this line: <script src=""></script> Add it after the script line for babylon-js itself (line 12). Then the exported html file works fine. I think this is a playground-exporter bug. When creating a project locally, if you want canvas2d functions, download the canvas2d.js from the babylon repository (in the dist directory on github). Canvas2d is in it's own file, because not every project needs it, to keep the main babylon file size small.
  13. That makes sense, when you look up what setAbsolutePosition actually does, if the object has a parent this happens: var invertParentWorldMatrix = this.parent.getWorldMatrix().clone(); invertParentWorldMatrix.invert(); var worldPosition = new Vector3(absolutePositionX, absolutePositionY, absolutePositionZ); this.position = Vector3.TransformCoordinates(worldPosition, invertParentWorldMatrix); It sets the position taking into account the invertedWorldMatrix of the parent, meaning there is no property _absolutePosition on a mesh.
  14. Here my first update on the progress: Let's start with a gameplay gif that shows what is new and followed by some explanations and things I learned. Explanation/description: The green bar is the beginning of a UI, it's the player healthbar. It's rendered with canvas2D, see below for a playground. The red bar is also part of the ui, it's the target healthbar & name. Also canvas2D and it's only rendered when a target is selected. Target selection: The current targert can be selected by left or right clicking on it, rightclick also initiates combat (for now). The target is marked with a "targetMarker". (A plane with a circle on it, scaled to the targets size and placed slightly above its origin) Lower left corner: The chatbox, so communitcation is possible. It's a div for the text and a html-textinput. You can set the focus to the textbox by pressing "return" while playing. Sending your message with "return" also returns the focus to the game. The "action" you see: jp & someone engage the three slimes in hand to hand combat. (Nothing is in any way tuned for gameplay, I am just creating & testing the mechanics. Monsters can now die and respawn (and so can players). A few things that are implemented but not really visible: The enemies collide with each other. This was important because 2 or more enemies following a player around tended to end up in the exact same position overlapping each other completly. That didn't look and feel god. For the players I decided against collision with other players or enemies for now, just because it feels bad to get stuck. So you can run through enemies but of course they will attack you while you do that. Some technical and information on things I learned: I played around creating the healthbar in a playground, if you want to have a look at how it's done (spoiler: pretty simple): I had a "bad" experience with blender - I lost an animation/action, because I forgot to "sticky" it by pressing the "F" (force?) button after creating it. So a tip for everyone doing multiple animations (actions) not just one timeline in blender: Always remember to press the "F" right after creating the animation. (I think the problem is, if you switch to another animation on your model and then save and reload the "unbound" animation is removed because blender deems it no longer in use.) I also ran into a synchronization problem. My server and client both move objects around, for example: The player wants to move to a new position. The server moves the player and the client does too. The server then tells the client perdiodically where the player "really" is and the client adjust (the sever is always right). But the problem was client calculated speed was at least 33% higher than the server speed. Despite client and server calculating the speed taking into account the time between calculations (60 times a second on the client side, every 20ms on the server side). I added a debug-sphere to indicate the player position every time a paket from the server arived, this clearly showed the problem, the player on the client was outrunning the server by alot: It took me a while to understand why, in the end it was easy: While the frame rate on the client is perfect 60 frames per second (unless the perfomance drops) on the server side things are different. On the server I use "setInterval(callback, 20) and then caculated everything thinking that 20ms will pass between the calls. Turns out it's about 29 to 32 ms between calls to the function. (And the functions takes less than one ms to run, so it's not because of too much todo on the server side.) The fix was then easy: Just messure the time between calls and adjust all calculations according to the time that has actually passed. I guess I will have to do this on the client side too, to support clients with less than perfect framerate, for now I just use the constant 1/60 (and if the framerate drops the position is adjusted by what the server says.) Outlook/things planned for this week/weekend: On the open meadow it's not possible to design an encounter other than single enemies or groups of them, so I want to look into world layout/objects with collision, to be able to implement a dungoen with different rooms so there is something to progress through. And then just auto-attacking things is boring, so the plan is to implement skills with certain cooldowns or cast times. The plan for now is to add a skill bar that shows the skills and their cooldown. As a startingpoint I plan to add a instant single target damage attack and a area of effect damage attack.
  15. The 9patch format (which I think was developed for android, but is used by other libs like libgdx too) would be a great addition to canvas2d. BitOfGold already somewhat explained it. The basic Idea is, you have a picture of a button, and around it is a 1px border that defines which parts of the button will be streched and which parts won't. To actually render the button the outer 1px border has to be analyzed, then the button has to be split up into the four corners (those are rendered not stretched at all) and a center piece (stretched in all directions) and 4 sides (stretched in one direction). You can make really nice scaling buttons with this.