Jump to content

Search the Community

Showing results for tags 'canvas2d'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





  1. I keep thinking of new types of objects to add to my little "game", The Green. The latest two are coils that can be stretched and squeezed like springs, and throwable dice. The Green is not meant as the greatest of games. It is more a demonstration of the kinds of 3-dimensional things that can be done in the basic 2D canvas with plain old JavaScript, using no other frameworks or libraries. Do explore it though. It has a wide range of objects that respond in various ways when you interact with them (click or touch). Some even have philosophical implications. My aim is to spark some creativ
  2. I am trying to develop a simple Canvas game, but I'm currently stuck at making the enemies display itself. Heres the code I'm using : <script type="text/javascript"> // SETUP INICIAL var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); var innerWidth = 360, innerHeight = 620; canvas.width = innerWidth; canvas.height = innerHeight; // VARIAVEIS var score = 0, lastTime = 0; // TECLAS DE MOVIMENTAÇÃO window.onkeydown = pressionaTecla; function pressionaTecla(tecla){ if(tecla.keyCode == 38) {
  3. I am trying to attach a click event to every individual circle in a 2d canvas matrix . I use a for-loop for creating the matrix , however i cannot assign click events to every single circle. The circles are acting as led lights and the click event either turns them off or on.If a pattern is generated , the canvas is saved as an image. See the image attached. I could really use some help with this. I can't seem to figure it out.
  4. Hi , question about GC or how i can clean canvas2d object after use method generateCanvasTexture game use PIXI.WebGLRenderer - only PixiJs version 4.8.2 (this my pain, but i can`t up pixijs to v5) on class this.data:PIXI.Graphics this.view:PIXI.Sprite .... on sometimes i need redraw data on view this.texture =this.data.generateCanvasTexture(PIXI.SCALE_MODES.LINEAR,1); this.view.texture = this.texture; on next time try to clean this.texture, remove from PIXI.Texture.removeFromCache this.texture .destroy(true); delete this.texture ; but debug c
  5. Hello, I am struggling with a memory leak which migth be related to Canvas2D fillText function. There is already a bug report available: https://bugs.chromium.org/p/chromium/issues/detail?id=703297 However I wonder if anyone of you also experienced this bug and might have a workaround for this? Thanks in advance. Best, benny!
  6. I can write texts on "billboard style" mashes in any combination of text and background colors. However, I cannot figure out how to do it when wrapping text. For text wrapping I've used a code I've seen on this forum and on Stackoverflow and it works fine. However, it uses direct functions of WebGL and that apparently collides with the usage of BABYLON.JS objects (not surprising as it goes underneath the Babylon layer). So, I can draw text In white, but not in black. I'm sure it can be done, but I'm fighting it the whole morning without succes, Please have a look into this playgroun
  7. Hi guys, I'm trying to make 2D-shapes / 2D-sprites in my Canvas2D (ScreenSpaceCanvas) follow some sprites which are placed in my 3d world. For this, I'm using the BABYLON.Vector3.Project function as followed: However, this is the result: I've checked each of the arguments and they all contain valid values at the time of being called. I've also stumbled across this topic, which uses another 4th argument in the call, but I've had no luck trying it with that one either. Any ideas? Thanks in advance!
  8. Is there any ways to draw outline for them? I know I can have multiple Text2D beneath it and act like "border". I'm just wondering if there's any better way of doing that.
  9. Hello, Trying out Canvas2D, getting: 'BABYLON.Text2D is not a constructor' Using alpha version ('babylon/babylon.3.0.0-alpha.max.js'). Did anything change, or is extension needed? Thanks!
  10. I downloaded the new version from https://www.babylonjs.com/versionbuilder/, and I checked all of the components. However, when I tried to then use the BABYLON.WorldSpaceCanvas2D constructor, I received an error. In fact, the whole Canvas2D system has disappeared. Apparently, the Canvas2D feature was moved to the extensions. Please: 1) Provide a download link for the Canvas2D extension 2) Return the documentation for the extension to the docs. Thank you!
  11. Hi, I have a Text2D in a Rectangle2D, I change the text every 200ms but it does not refresh on the screen. Although when looking at the text property it changes properly. The text refreshes only if I set its levelVisible property on and off at each tic. I do not have this problem in the playground so I am not sure what is going on. state.tic = function () { const text = newText() // this works state.tooltipPause.text.text = text // setting the parent rectangle2d levelVisible // is the only way i have found to refresh the view
  12. Hi guys, I'm creating an UI for my babylon game via the Canvas2D, precisely the ScreenSpaceCanvas2D. Now I want to know if it's possible to update the text dynamically without recreating/overwriting the text2d child every time the score variable (which is used for displaying) is updated. Playground link for simplified case: http://www.babylonjs-playground.com/#2AVSFH#271 Thanks in advance!
  13. I want to draw a texture on the line that user draws on the screen. Like a mouse trail, so I follow this tutorial. . The only thing that doesn't answer me is sending the custom uv to the shaders. I vaguely remember that in C++, I can create struct or something and the shader will know how to handle it. It seems that is not the case here. I can't even figure out how does "index" property in vertex shader gets there. Even so, I can't use the "index" approach as the line won't be full rectangle as in the example. Right now, I copied & pasted the entire lines2d classes and try to customiz
  14. I am struggling with a similar problem like in this thread, but the solution provided here seems not so ideal... I have many modules in my game, and if I use Babylon.js in any of those, I import it using: import Babylon from 'babylonjs' So there isn't any good way to include Canvas2D similarly? I understand it is somehow baked to Babylon.js, but how do I use it? I'm downloading all the dependencies from the npm, including Babylon.js. Then I bundle everything using Webpack. Ideally, I would like to use Canvas2D (for example) like this: import Babylon from 'babylonjs' import
  15. This post might interest @royibernthal @MasterK @TMTH and @adam I think. Most of you have reported issues with using scale/origin and the positioning engine, I've looked to these issues and then to my code and I finally ended up wondering if what I'm currently doing is the right way and also if there's a right way to do things. Ok, let's be a bit clearer, for now, here's how things work: You create a Prim, set its margin, marginAlignment, origin, scale, rotation During the pre rendering phase I compute the position/size of this prim based on the margin and marginAlignment
  16. Simple question: How do I update a primitive property which is part of a canvas2d instance? (Specifically isVisible, haven't checked other properties yet). http://www.babylonjs-playground.com/#YQV9DH#1 Open up console, try setting child.isVisible to false, note it's always true. I dug around in the codebase, but couldn't figure out: 1. if this is a bug 2. if I'm doing something wrong that is causing the property to be frozen (pretty sure not the case anymore since I was able to reproduce what I was seeing in my project in playground above). 3. if there is a w
  17. Hi, So... my problem is a bit specific. I will try to reproduce it in the playgroud but I am not sure I will be able to. So I have a Rectangle2d that holds 4 rectangle2d children, the green background is the parent square and the children square are the 4 grey rectangles. I am using the centering and margin system: I used to dispose of those rectangle children and recreate them at certain points in time, storing the newly created children in the same array replacing the hold ones. The problem is that when I resize the window there is a call to Prim2DBase._
  18. Hi, Just to report that on the example given in the documentation: http://www.babylonjs-playground.com/#OWCCR#8 Increasing the number of primitive slows down the fps, but when reducing that number fps stays low even after dispose(). I don't know it if was reported before, and I did not remember this behavior last time I checked this example... @Nockawa
  19. Then it goes bad. Duplicate labels end up everywhere,Here is an image when I rotate the camera ! var ui = new BABYLON.ScreenSpaceCanvas2D(scene); var radioUi=[] for(var i=0;i<meshes.length;i++){ radioUi[i] = new BABYLON.Group2D({ parent: ui, trackNode: meshes[i], children: [ new BABYLON.Rectangle2D({ id: "mainRect", x: -5, y: -5, width: 10, height: 10,
  20. Hello everyone, I'm trying to get a label system which could work like https://jig.space/view?jig=v4Ga2VKw I'm using the 3ds max exporter to export the meshes and I wanted to use the pivot point as a base to place the label. Maybe there is a better way to do it. When I create my Group2D (containing a line, rectangle and text) and set the trackNode property to use the mesh, I can see that the pivot point is not used. It looks like it might not event been exported (I attached the file) since the pivotMatrix is null. Maybe I'm missing something ? Infos.babylon
  21. I'm trying to understand how to work with group caching. Here is PG http://babylonjs-playground.com/#1VRAA#1 And I can't figure out the following - why setting canvas cachingStrategy to CACHESTRATEGY_ALLGROUPS leads to rendering of its' direct children only? So, every cached group have to be the direct child of canvas, or I'm missing something?
  22. Hello everyone and thank you all for babylonjs according to this console : there is a bug both library are the same version 2.5 Can it explain blank canvas from visual studio? The NuggetManager only provide 2.3... babylonjs but canvas2D at all Kind regards, But I may be wrong of course
  23. Hello every one, I try to reproduce some feature from http://babylonjs-playground.com/#1KYG17#1 and here I am http://babylonjs-playground.com/#1MVIGI#4 I cannot get my canvas2D to have some kind of billboardmode As you can see, I ended copy pasting most of the first playground properties into the second one with no result so far It seems that trackNodeBillboard expect a boolean according to babylonjs github but I may be wrong parenting the canvas2d to sphereM (biggerbox) does not follow the move, I don't know what I'm doing wrong Thanks to all of you
  24. Hello good people of the babylon.js community! Update #14 from January 29th, 2017 Primitive Collision Manager (PCM, @ller request) The PCM is finally done! Well, first release, I've already spotted some not supported cases... Anyway, you can check a PG demonstrating the feature here: http://babylonjs-playground.com/#1PXWLR#2 (I've commented the PG for you to see how it works) Turned out that I didn't do what I wrote in the previous message, I didn't check for OOB and I've implemented a generic triangle set versus triangle set intersection algorithm right away. Basically all
  25. Here is PG. http://babylonjs-playground.com/#QTNKM#1 When using designSize on canvas alignment properties are unusable. There are two different use cases: 1. I manually position primitive on some point. I expect it's position to be uniformly scaled from design size to real rendering size. That one is working. 2. I do not position primitive, but I set primitive alignment. Let it be marginHAlignment = BABYLON.PrimitiveAlignment.AlignRight. In that case I expect this primitive to be stuck on the right side of the rendered canvas. That case is not working. So, building rea
  • Create New...