• Content Count

  • Joined

  • Last visited

About vsh91

  • Rank
  • Birthday 05/30/1991

Profile Information

  • Gender
  • Location
    Los Angeles, CA
  • Interests
    WebGL, Full-Stack Web Dev, Blockchain, Machine Learning, Game Development and Computers in General

Recent Profile Visitors

1585 profile views
  1. Ok I see what you're doing, sweet, thank you!
  2. Is there a way to create text in text2d which has an outline, something like the image below? I'm going to go ahead and assume the answer to this is no, in which case, could this possibly be added in the future? It's nothing really all that important but it fits with the style of what I'm trying to make. The css solution to this is to use shadows. text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; Whatever the answer may be, thanks for taking the time!
  3. This is just a guess, but perhaps the bounding box on the third sphere or plane is off/oversized. Maybe print out the dimensions to possibly rule that out. Update** It seems like that's not the issue. I enabled showBoundingBox on all the objects. http://www.babylonjs-playground.com/#QGKMK#5
  4. Ok, Thank You! It's really cools you guys are directly answering these questions. I and I'm sure many other people really appreciate all this. It makes me confident in my transition from threejs.
  5. No, there is no question about how amazing the documentation is. I have gotten much farther than I was yesterday thanks to it. I tend to skip over aspects to get to a solution as quickly as possible and it has cost me in the past. I want to say all over the screen. I am trying to create something like Final Fantasy Tactics/Tactics Ogre. The UI is going to be a big part of this. I currently have multiple canvas2d objects, one for character stats such as health/movement... and another for the user to select what to do such as move/wait/defend...
  6. Well, my objective is to have a have a user interface that is resizable based on the screen resolution for easy porting to multiple devices using Apache Cordova. Resizing is not the issue, but automated porting is. Being a newb to babylonjs, I figured that I have to resize the screen space canvas... I know this is wrong now, I misunderstood the structure of canvas2d, screen space canvas being a child of canvas2d right? I'm definitely not using a different caching strategy other than the default. I don't know, maybe I'm thinking about this all wrong? I thought bGUI would be a solution to this problem but from the limited amount of time I tried to get that working, it seemed to have some inconsistencies? I also posted a question about it and somebody redirected me to canvas2d. Though the demo represents much of what I want, http://temechon.github.io/bGUI/
  7. Hmm I think we might be talking about different things. canvas2d https://doc.babylonjs.com/tutorials/Using_the_Canvas2D This is the first tutorial presented by canvas2D http://babylonjs-playground.com/#2AVSFH#35. Notice that this is also not resizing and more complicated examples follow the same behavior
  8. I'm not sure if this is what you're looking for but I'll throw in my 2 cents after 10 minutes of research. I think what you're looking for is bezier curves, https://doc.babylonjs.com/tutorials/How_to_use_Curve3 //Quadratic Bezier curve, source: https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Quadratic_curves Examples Included; http://web.iitd.ac.in/~hegde/cad/lecture/L13_Beziercurve.pdf I don't know if there is a function that allows you to animate the camera but you can program this in yourself. I would imagine using a var animateCamera = true/false variable that controls the if(animateCamera){ //2D example Bx(t) = x; By(t) = y lookAt = Bx(t+1)-Bx(t), By(t+1)-By(t) if(camera.position = (x,y,z){ animateCamera = false; } } You can string the curves together to get a continues motion from one quadratic to the next. Anyways, I hope this helps!
  9. Hello again, back with another issue I can't find a solution to. Does anybody know how to resize/scale canvas2d? More specifically a (new BABYLON.ScreenSpaceCanvas2D). I've looked through the documentation but can't find any functions that would do this. On window resize I'm simply calling engine.resize(). As an alternative, I tried manually changing the size by calling... canvasGUI.size = new BABYLON.Size(innerWidth/6.04, innerHeight/10.08); canvasGUI.children[0].fontName = 10 + "pt Arial"; But it seems to cut canvas2d instead of re-scaling it. Any simple solutions to this problem? Thank you! **Update, I've managed to find a solution that works. I'm still working out a proper solution for the math, but so far this works in creating a window of width,height 300,100 and a font of 22 for a 1920x1080 +- a few decimal points on the divisions of width and height. window.addEventListener('resize', function(){ engine.resize(); canvasGUI.dispose(); canvasGUI = createGUI(scene, window.innerWidth, window.innerHeight); //1920/6.04 = 300 //1080/10.08 = 100 }); var createGUI = function (scene, width, height, uWidth, uHeight, fontSize, message) { var fontScale = 3000/fontSize; var wn = 1920/uWidth; var hn = 1080/uHeight; var setFontSize = (width/fontScale + height/fontScale); var canvas = new BABYLON.ScreenSpaceCanvas2D(scene, { id: "ScreenCanvas", size: new BABYLON.Size(width/wn, height/hn), backgroundFill: "#404040FF", backgroundRoundRadius: 5, children: [ new BABYLON.Text2D(message, { id: "text", marginAlignment: "h:center, v:center", fontName: setFontSize + "pt Garamond", }) ] }); return canvas; };
  10. Oh wow, ok. Thanks for the heads up, I was spinning sideways trying to figure out how bgui works. Canvas2D looks amazing.
  11. Hello, I'm not sure what I'm doing wrong but I can't get bgui to show up in my scene. I'm creating it within the createScene() function. I've tried different variations of the code below, carefully following examples and documentation to no avail. I know my texture is loading in fine, I tested it on a plane. I noticed that bgui is creating a separate camera to display objects, maybe that's off? Any direction is much appreciated. gui = new bGUI.GUISystem(scene, window.innerWidth, window.innerHeight); gui.updateCamera(); gui.enableClick(); var head = new bGUI.GUIPanel("head", face, null, gui); head.position(new BABYLON.Vector3(5,5,0)); head.setVisible(true);
  12. Hey, I tested this on a gtx 960m and it seems to be running at 60fps as well. I don't know if you have a dedicated graphics card or not, but if you are running this on a laptop with a dedicated graphics card make sure to set the browser to work with the dedicated card. Also check your power options and manually set it up to be on max performance. I don't know if you're running mac, windows, or linux, but I'm sure a quick google search will yield results. In terms of direction for a game, this is what I break it down into. {graphics && animation, game logic/design, art, music}. It seems like you're trying to create a game like Final Fantasy Tactics or Tactics Ogre. If you haven't already, I recommend you play these games and observe how they work. These games can be easily emulated using ppsspp or psx emulator. I use emuparadise for roms.
  13. Hey thank you for replying. I think the best example of what I am trying to do is from a previous project I was working on with three.js. http://people.ucsc.edu/~vshahbaz/boardGame/strat_game.html Notice that resizing with window in either the width or height will not cut out any of the graphics, but instead resize everything within the scene. Now in comparison, this is how my resize function currently works in Babylon, http://www.babylonjs-playground.com/#1GM4YQ Resizing the width of the window will not re-scale the objects within it but instead keep them center. The code I'm running is posted below and seems pretty standard for all graphical applications. window.addEventListener('resize', function(){ engine.resize(); }); Do you think the solution I posted in the picture can be converted from THREE to BABYLON? Considering that the engine.resize() code is abstracted so much, I'm having a lot of difficulty finding the variables or functions I can use to manually change scaling of the scene. Another question I have is if I should even care about horizontal scaling, considering that this form of resizing seems pretty standard. I hope this clarifies what I'm trying to achieve, I'm still pretty new to all this and my terminology might be off. And thank you to anyone that's taking the time to read through this. Any form of potentially time saving knowledge is much appreciated.
  14. Hello everyone, this is my first time posting here and I am incredibly new to babylon .I've scoured the net looking for a solution to this problem with none yet. I'm using engine.resize() on window resize listener and this seems to work when I resize the window vertically. However, there seems to be no horizontal scaling available and when resizing the window horizontally, the image gets cut off instead of shrinking. Anybody have a solution?