jpdev

Members
  • Content Count

    362
  • Joined

  • Last visited

  • Days Won

    12

Everything posted by jpdev

  1. Earlier this year, I gave out pieces of paper to friends and children of friends with a jagged outline on them with the instruction to color it in and send it back to me. I received 7 colored shapes. Little did they know, that they were actually coloring Easter eggs for a little game I was making. Now, just in time for Easter it's finished and I thought I would also share it with you guys. Play it here if you like: http://jppresents.net/static/egghunt (see below for instructions) It's written in js using only babylon.js as a library. I did the modelling and levels in blender. I hope you enjoy it, I had fun making it! Thanks to everyone making, maintaining and improving babylon.js Here are the instructions and tips for playing the game: In the main menu start by clicking on a level button. You can only go to levels that you have reached. Start with level one. As long as you hover over a level button, you can see the best time and most eggs collected for the level (only shows your scores & times). (Warning: You can only get a better time if you collect the same amount of eggs or more) cursor left = bunny hops left cursor right = bunny hops right space or cursor up = bunny jumps (press longer to go higher) cursor down = crouch and wiggle your tail tips & tricks: Jumping while crouching results in a high back flip. Jumping three times while maintaining speed results in a high forward flip. Pushing into the direction of a box while falling makes you slide along the box, you can now wall jump.
  2. I tried to integrate it, here is a link to the pr: https://github.com/BabylonJS/Babylon.js/pull/3816
  3. @brianzinn You are correct, using your URL it works. An explanation why I tried to use the wrong URL: I was following this page: https://github.com/BabylonJS/Babylon.js/tree/master/Tools/Gulp and it says: But has no actual URLs - so I just tried /Playground and the playground did come up. (Just not the local one.) I still consider this kind of weird behavior, and I will make a pull request for the readme.md file to link to the other file with the actual entry points. Edit: While creating the pull request I noticed, that there are acutally URLs in the readme.md, but they are in quotes - and that causes them to not be displayed on github. - So my pullrequest just fixes that. Link to PR: https://github.com/BabylonJS/Babylon.js/pull/3817
  4. Hi babylonjs team, I am looking into contributing to babylonjs. So far, I have cloned the github repo and installed node & npm. I edited the ts files in question, and I can get them to compile, for example with "gulp typescript-all". But I ran into a problem trying to test my changes using "gulp run". This starts a webserver as expected: "Webserver started at http://localhost:1338", but this webserver serves a playground (http://localhost:1338/Playground) that does not use the local babylonjs: <!-- Babylon.js --> <script src="https://preview.babylonjs.com/cannon.js"></script> <script src="https://preview.babylonjs.com/draco_decoder.js" type="text/x-draco-decoder"></script> <script src="https://preview.babylonjs.com/Oimo.js"></script> <script src="https://preview.babylonjs.com/babylon.js"></script> So I can't test my changes in this playground, because they don't exist in the online files. (I got the "gulp run" command from here: https://github.com/BabylonJS/Babylon.js/tree/master/Tools/Gulp ) Please let me know if I got something wrong. JP
  5. Hi @Deltakosh & @Wingnut thanks for the replys. I found this definition that matches what I experience with buttons across all software (web & desktop): (from https://developer.mozilla.org/en-US/docs/Web/Events/click) My code from the first posting (checking the enterCount) does achieve that. If you agree that the event should fire when "Up" is fired and the cursor is still over the button, and that the enterCount check is the way to go, I'll try and create a pull request on github.
  6. The current solution for marking a thread answered is to edit the first post and add an solved tag or edit the title to "[solved] How many vertices can be imported with Babylon.js?"
  7. Hi, I am using the great babylon gui for my latest project - just some simple buttons for level select so far. I noticed that there is no event that functions exactly as a button "click" event should behave. There are up and down events, but they don't quite hit the mark for the event that should trigger when you "click" a button. Most GUI trigger a button on the "up" event, but only if the cursor is still over the element. (Try it with any button element for example in the post editor of this forum, or any windows button - if you press the mouse button down but only release after moving the mouse outside of the element, it won't trigger) So my fix so far is (pure js): button.onPointerUpObservable.add( function() { if (this.btn._enterCount === 0) { return; } //Do "click" stuff }.bind({btn: button}) ); But this accesses a private variable (_enterCount). So I think there should either be a getter function to access _enterCount or there should be a onPointerClickObservable. Any thoughts?
  8. jpdev

    Stop animation

    https://photonstorm.github.io/phaser-ce/Phaser.AnimationManager.html The next parameter after framerate is a boolean for loop. So it's this.player.animations.add('atk', [529, 532, 535, 538, 541], 10, false); to not have it loop.
  9. Zampano, all the tips from rich and nesh108 only cover multiplayer games where there is server that manages everything. What this means is that the Javascript Part (the Phaser Game) that is running in the browser has to connect to a program running on a server and act only as the client. (Such a connection could be made via websocket or continues http request etc.) The server controls the game and only tells the clients what to display and the clients tell the server what the player wants to do. This is much more work than a normal web single player game. There is no way to stop players in single player client side javascript games from cheating.
  10. Hi, I think the problem was that you redefine the animations every frame and phaser doesn't like this. Here is your example working: http://jppresents.net/static/examples/walk/ Here is the slightly changed code: http://jppresents.net/static/examples/walk/walk.js I move the animation creation to playerInit (and added a single frame stand animation). Ignore the changes in preloadImageAssets, that was to fit my image files. Edit1: There is another small problem with your code, If you walk in two direction (up & right) at the same time, your code switches the animation from up to right every frame - this way the animation never advances to the next frame. You should restructure getPlayerInput() in a way that manages to only call one player.animations.play() at the end. You could create a variable in which you set the animation name during the key checks and then at the end call play with that value. Edit2: I changed the animation settting like I suggested in Edit1.
  11. +1 Added incentive for Rich to fix it: I will get one when they don't overlap long sentences anymore
  12. The problem now is, that while the world bounds are ok, the tilemap layer (context.floorLayer) only has a width of (in my debugging sesssion) 1280 pixels, while the game (on my browser) has a width of 1920.# That's the reason it cuts of to the right. For testing after creating it I set the width to 1920 (via breakpoint + console) and everything looks fine for that session. I am not sure, why the layer is created with the wrong width - please try to add: context.floorLayer.width = game.width; after creating it, and see if this fixes anything for you.
  13. The first parameter for addTileSetImage must match the name of the tileset in the map file. Here is your example working: http://jppresents.net/static/examples/tilemap/ http://jppresents.net/static/examples/tilemap/main.js (I also edited the level file to not only contain green tiles - I also changed path in the main.js because my server layout isn't the same.)
  14. Hi, layerwidth/layerheight is only the visible (rendered) part of the tilemap - so that's not the way to go to size the word. Layer.resizeWorld() resizes the world to exactly the tilemap size. To make it bigger try this: var layerWidth = context.floorLayer.layer.widthInPixels; var layerHeight = context.floorLayer.layer.heightInPixels; game.world.setBounds(-layerWidth, -layerHeight, layerWidth * 2, layerHeight * 2);
  15. Hi PRSolucoes, Easy fix - this line sets the size of your world: layer.resizeWorld(); But it resizes it to the tilemap layer, this is way the camera is "trapped" within the tilemap. Instead of using the layer to resize your world do it yourself: this.game.world.setBounds(-1000, -1000, 2000, 2000); The map will still start at 0,0 but the camera will be able to show the space to the left and to the top of the map. Adjust the world size as needed.
  16. I am having good success with these settings so far: this.game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE; this.game.scale.setUserScale(3, 3); this.game.renderer.renderSession.roundPixels = true; Phaser.Canvas.setImageRenderingCrisp(this.game.canvas); This scales the game by 3 and so far everything is scaled pixel perfect and moves one pixel at a time.
  17. The easiest solution would be to edit the sprite sheet in paint.net (or any other program that allows to save as .png with a transparent color) and remove the black.
  18. Add those two lines below the line that creates the "spider": spider.animations.add("ani1", [1, 2, 3, 4], 10, true); spider.animations.play("ani1"); When running the exmaple, the gameboys will now switch color Edit of the linked example: http://codepen.io/anon/pen/OmojRb?editors=0010 Now switch the different color pictures of the gameboys with spider animation frames. Done Here is the example you can look at: http://phaser.io/examples/v2/animation/sprite-sheet Notice that the example doesn't specify frames, but the spider code above does. You need to specify frames if you have more than one animation in the sprite sheet.
  19. Screenshot looked interesting, but This site can’t be reached vps128058.vps.ovh.ca refused to connect.
  20. Got the shirt Thanks again to everyone and especially RaananW.
  21. Hi guys, First of all, thanks to everyone who played my game! Congrats to pepa, BlueManCZ and Athelios! Why congrats? Well they killed the Megaslime together! This is so very cool! I love that you guys organized to play all three classes together, level up and then coodinated to kill the boss. They did that on March 7th and I didn't even notice until now. I am very happy about this - I was really hoping some group of players would do exactly that. Some stats: There were 75 characters created, 7 reached the maximum level of 5. 50 of the characters stayed at level 1, so they just had a quick look at the game/class. Thanks to @RaananW for coming up with the challenge and managing it. Thanks to @Nockawa for implementing Canvas2d. Thanks to all contributers to babylonJS. And a very special thank you to @Deltakosh for creating and maintaining babylonJS!
  22. Since the challenge has officially started, here is the link to the game: http://rpg.jppresents.net Some information before you start: This is a rpg game where you control a character of one of the three classes: Fighter - meele fighters can take a punch and also deliver one Healer - pure magic healers that can't fight themselfs but are valueable in keeping everyone alive Caster - ranged magic damage dealer that control fire You choose a name for your character and the class on login. You can change your class by reloading the game in your browser. You can move by left clicking anywhere on the ground. You can use skills by clicking them in the skillbar or pressing the corresponding number. Target other player or monsters by clicking on them or their nameplate. You can click the text field in the lower left corner or press "Return" to begin typing a message to everybody else, another "Return" sends the message. You can gain up to 5 levels by gathering xp by killing monsters or by healing other players who are killing monsters. Each level gives you more hp, more damage/bigger heals and most levels give you new abilities. And here is the link to the challenge: I hope you have a look and vote for me if you like it. Also please let me know about any bugs or problems you encounter!
  23. If anybody is interested (and hasn't read it yet) here is a thread about the development of my entry: It from nearly day one to last week when I uploaded the current version. It's online (as linked in the first post) here: http://rpg.jppresents.net And here is the game info again: This is a rpg game where you control a character of one of the three classes: Fighter - meele fighters can take a punch and also deliver one Healer - pure magic healers that can't fight themselfs but are valueable in keeping everyone alive Caster - ranged magic damage dealer that control fire You choose a name for your character and the class on login. You can change your class by reloading the game in your browser. You can move by left clicking anywhere on the ground. You can use skills by clicking them in the skillbar or pressing the corresponding number. Target other player or monsters by clicking on them or their nameplate. You can click the text field in the lower left corner or press "Return" to begin typing a message to everybody else, another "Return" sends the message. You can gain up to 5 levels by gathering xp by killing monsters or by healing other players who are killing monsters. Each level gives you more hp, more damage/bigger heals and most levels give you new abilities. If you encounter any bugs or problems or just comments - please let me know in the projects thread (link above)! Thank you for playing
  24. On 28.2. I uploaded my project - I am now just waiting for the challenge to come to it's presentation time. While the game is pretty much in exactly the state I wanted it to be at the end of the challenge, I am still thinking about expanding it and continue playing around with it - simply because it's fun to do, and I think (yes, I am biased) also fun to play with friends. For example I am playing around in blender for more content - but I am not sure about the latest creation: Disclaimer: This will not be part of the challenge version - so don't go looking for him or it or whatever Yes, I noticed the tail looks a bit weird - I found "limited desolve" in blender (great tool) but I think i might have overdone it. @csganja I am not convinced the sources will really be something to learn from - I can only say it again: I was (and still am) just messily experimenting away (not following any best practice or anything, simply because I just went ahead and implemented things how I think they might work ) - still they might be of some value just to see how it can be done (but not how it should be done ).
  25. Hi everyone, So it's down to the last hours of the challenge. Yesterday I implemented something that wasn't planned but that I got as feedback from play testing at lunch at work: The available emotes are: /cheer /dance /wave /bow And today I implemented combat texts: Incoming damage, damage you deal and heals are displayed as floating numbers. There are also options to disable those. It's done with canvas2d and a projects from 3d coordinates to screen coordinates. (I couldn't use track node, as I am doing with the name plates, because the numbers should stay static on screen and now follow you or the enemies around - which track nodes would do.) Here are the three lines that make it possible: let coords = BABYLON.Vector3.Project(this.pos, BABYLON.Matrix.Identity(), scene.getTransformMatrix(), scene.activeCamera.viewport.toGlobal(scene.getEngine().getRenderWidth(), scene.getEngine().getRenderHeight())); this.text.x = coords.x - this.text.width / 2 + xOffset; this.text.y = this.text.parent.height - coords.y; //canvas2D starts y coordinates 0 on the bottom The transform code in the first line is from an older thread on this board - as always a useful resource (only the parameters to toGlobal had changed since the old posting). The second line centers the text by subtracting half the width - easy, I know. And the third line nearly canceled the whole combat text implementation.. I forgot for the longest time, that canvas2D has 0, 0 on the LOWER left corner of the screen. Tracking on the x-axis was perfect.. but everything on the y-axis went crazy as soon as the camera moved as long as I was setting text.y = coords.y. I have also introduces mob levels and different textures for higher level slimes. Not too impressive, but at least you can tell they are different from each other and you maybe want to avoid them until you have the same level or bring friends. I hope I didn't over tune the boss monsters... but we will see if any group of players manages to kill them. Spoiler: Nobody will be able to solo them. (Well, maybe if you find an exploit ) Thanks to another play testing session with my friend Kenny I found a a cookie issue and an aggro issue. All cookies were just set for the current session, so you lost your progress when closing the browser. Now they stay for a while. (10 years should be enough, right?) And the aggro issue had to do with monsters always attacking the closest player - this is fixed now, they now react to the amount of damage & healing that has been done. @Javierl First of all thank you for the praise I am not sure, if I am in a good position to give advice on the client-server communication - but I will try. Only listen if it's just a personal fun project for you, because that is what this is for me. This lets me get away with just experimenting and keeping things that seem to work. I am using these frameworks: BabylonJS & Canvas2D on the client side, and "fs", "ws" and "xml2js" on the server side. This means, that my server client communication is pure websocket (which means people behind stupid or mean proxies/firewalls can't play). Also I didn't do any research on the communication side of things other then checking out simple echo demos for websockets. What I started with and what I would advise you to start with the absolut basics: Look for a simple server side node script that accepts websocket connections. Write a gameloop into that script that calls a functions every x milliseconds. (You can start with a simple setInterval every 20 ms. - note that this doesn't give you constants 20ms steps, so you will want to improve on that later, one solution is posted here: http://www.html5gamedevs.com/profile/22713-raggar/) Then use a simple object that contains an id, a position and create a few of those on the server side. In the gameloop convert the whole array to JSON and send it to all clients. On the clientside take what the server sends you, convert it back to objects and use those to create/update game objects that you can display with babylonJS. Then have the client issue commands for one of the objects (doing nothing on the client side but to tell the server about the command) the server then can move the object accordingly and tell everyone about it. Two more things: I implemented a "changed" flag on my server-objects so only objects that actually changed are send to all clients. And I don't send X,Y changed on my objects to the clients every frame. Instead the clients and the server know the speed and the target for the object (information is only send when the target/speed changes) so objects move on the client and server in parallel without the need for messages every frame. The stuff the server sends to all clients gets more and more.. my message now contains stuff like "effects", "combatInfo", "actions", "emotes", "chat" and more. But only ever what is needed/changed right now. I hope that's enough to get you started