Jump to content

Search the Community

Showing results for tags 'mask'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

  1. I'm working on an application which allows to make image processing, so I used Javascript and PixiJS library to make it possible. I wanted to update cursor image when canvas was hovered first solution I tried to use cursor: url(cursor1.png) 4 12, auto; but I can't resize cursor. The default size is 64px and I can't set another value. second solution I decided to add into DOM <img src=""> and update x,y position using Javascript but I got latency. third solution was to integrate cursor inside my canvas. last solution I tried to split actions into 2 canvas. The first de
  2. Hi, I've created text in PIXI, and have masked it because I want to allow scrolling. I'm using the latest version of pixi (5.3.0). However when the text loads with the mask, it appears differently on different browsers. I've attached an image for reference. I've tested it using Edge, Firefox and Chrome and all 3 show the text masked differently. Please help me understand why this could happen. Also, when I create a graphic for masking the text, the coordinates and size appear very different to how it functions as a mask. In the image below, the white rectangle is
  3. Hi all, I have a backdrop for a little game that I'd like to split into layers (with some particles between) nothing major probably 2-3 layers at max. The game is for mobile and file sizes have got to be as low as possible. The backdrop in question is not something that can be tiled or recreated with an atlas so I'll need to split it into a few largish images. png 32s' tend to be too heavy, 8 bit will probably lose too much colour information. I was wondering about instead using a larger jpg (eg the backdrop is 1920x1080) but maybe extending it to a square 2k, then using that with
  4. Is it possible to use a "stroke" as a mask?
  5. Hi there. First, I'm trying to make an FB Leader board like this image https://prnt.sc/owv7q4. I captured it from Caro - an instant game. And I'm new in Phaser 3. I know how to create circle image by using mask. But my problem is i can't use mask for a child in a container. I spent whole day to search solution on GG Let me tell you how i make Leader board. I use greate UI plugin of Rex, Scroll panel contains a sizer, that sizer contain many containers as row of rank. In container i want to create an circle image and i didn't success with mask Then i changed m
  6. Hey I am trying to build a round minimap. I do not want to duplication rendering of all game objects, so I decided to add a second Camera. My Issue: Is there any way to get the Camera Object in a round shape? The game is an endless generated Map getting chunk data from a nodejs server. So the minimap should stay quite flexible. A camera fits my needs but the shape issue still exists. I would appreciate help a lot
  7. I've found some strange behavior in interactivity events of display object inside a masked container. Not sure if this is a bug or just a questionable decision; anyway, it poses some problems. Generally interactive display objects receives events such as "pointermove" or "pointerupoutside" at any time, whether pointer is over them or not. Same applies to masked display objects, by the way. But if you place an interactive display object inside a masked container, events fire only when pointer is over masked area. All events, including "pointerupoutside", so there's no way to keep track of
  8. I am using PIXIJS Canvas Renderer and trying to apply a graphics polygon as mask in a sprite. When add graphics polygon as sprite.mask, i am getting blank canvas. Am i missing something or its just stupid idea? JSFiddle code: https://jsfiddle.net/Lk2fjmn3/8/
  9. Hello everyone, I have a project with Phaser and I'm stuck. I need your help. I have two layers (images) and I want to erase the first layer with the user's action (I do not want to destroy it). I have tried this with the masks but I do not know how to make the mask dynamically drawn by the player. I do not know if you understand me. I'm not good at English. Any clue how can I do this effect? I included an image.
  10. Hi guys, I'm facing a problem.I have a leaderboard .The profile pic in those should be rounded masked.So I put mask for all profile pics.But when i scroll leaderboard ,masks are not moving with respect to their sprite.Please help guys.Its urgent
  11. Hi all, I need to display a large image and dynamically hide sections of it. I already use masking to specify which parts should be displayed. The code I use to achieve this is in the form: this._topMask = game.add.graphics(0, 0); this._topMask.drawRect(0, 170, game.width, vm.ActiveGameHeight - 320); this.defaultGroup.mask = this._topMask; This is useful in that it gives me a rectangle within which the image renders. Now I need to dynamically block sections of that rectange and create areas that are not rendered. Ideally, I would like to be able to create
  12. I am working on a project where I am trying to create an animation of a watercolor effect to 'paint' in an image. The image is dynamic, so rather than using a simple video, I have created a video to use as an alpha mask to apply to the image via Pixi. The area around the visible image needs to be transparent, so I needed to use an alpha mask rather than just covering the image with white pixels. I have attached a full example file with all of the code that I have set up for this, but here's a quick summary of what I've done: Create a texture from video Create a sprite from i
  13. Good afternoon, I was hoping that the community could look over my code and see if something needs to be adjusted. I recently started learning Javascript and I just started learning Phaser and easystar yesterday so this might all look ridiculous. At the moment all I am trying to accomplish is pathfinding the way it is done in a point and click adventure game such as Monkey Island or Day of the Tentacle from Lucasarts. I am trying to achieve it much how AGS(Adventure Game Studio) allows the user to set it up. Basically, you import a room image and then you draw over the room with a chosen
  14. Question is pretty straightforward, how can I apply multiple masks to one sprite. Let's say I have a sprite and I want it to be displayed only in particular places. In my case I want zombies to be visible only in light, having only flashlight it's pretty easy to implement since there is only one source of light and I can do something like that: this.zombies.setAll('mask', this.flashlightGraphics); But what do I do when I want to apply multiple masks, is there a way to combine graphics objects ? Thanks
  15. mcolman

    Circle mask

    Hi, I want to apply a circle mask to a sprite. What's the most performant way to do so with WebGL? Alpha mask or graphics mask? I recall that graphics circles were once made up of LOTS of lineTo calls so they were never actually perfect circles and performed really bad, not sure if this has been fixed though?? Thanks!
  16. Hi, I'm a relative noob to javascript and Phaser, and I'm having an issue coding my first proper game. I'm using Phaser version 2.6.2 and the latest version of Chrome browser. I'm asking the user a basic maths question, but when I draw the buttons for the user to click they appear but aren't clickable. Here is the console error: And here is the code I believe to be causing the error: game.add.button(50, 250 + i * 75, "buttons", this.checkAnswer).frame = i; And there is also this bit of code to draw the button mask: this.buttonMask = game.add.graphics(5
  17. I'm working on a "fake zoom" function that looks like this: class Zoomer extends Phaser.Group { zoom = (amount = { x: 1.5, y: 1.5 }) => { this.x = -((amount.x * (this.game.width / 2)) - (this.game.width / 2)); this.y = this.game.camera.bounds.y - (amount.x * (this.game.height * 1.15)); this.scale.setTo(amount.x, amount.y); } } The zooming itself works and goes where I want it to but all the masks in the group stay where they are and don't scale at all. This is how I usually create masks on a Phaser.Sprite: createMask() { const graphics = this.game.add.g
  18. hi guys, Why there is no collision mask (like in construct 2d) in phaser.I think that will be a good feature.
  19. Good morning everyone! I've created my mask to let my group "symbols" drawn only if inside the mask. mask = game.add.graphics(0, 0); mask.beginFill(0xffffff); mask.alpha = 0; mask.drawRect(x, y, xx - x, yy - y) mask.endFill(); symbols.mask = mask; The images who can be drawned everywhere are in the "images" group. The images in the behind the mask and the symbols in the mask are correctly rendered. The images that I want OVER the mask are still rendered behind the mask. Any ideas why o
  20. I've been reading a backlog of how to do this all the way back to when the recommendation was to use canvas. What is the new and modern way of accomplishing this? Let's say I have a rectangle that fills my screen and makes the game look like night time.. then I have a torch and I want to cut (or lighten) a circle out of the night rectangle. I've tried drawing a circle using graphics and setting its colors to white, black, and alphas to 1.0 or 0, then adding it as a mask onto the rectangle -- this only seems to perform a regular mask operation (aka draw the night within the circle) but nev
  21. Hi. How to add the mask (graphic) to group?. If the mask is added to the group, it no longer masks the sprite inside.
  22. I have a Phaser game created and I am able to create an updated visibility graphic object while my sprite moves. However, like in this example, and every other I have found online: http://www.emanueleferonato.com/2014/10/21/phaser-tutorial-how-to-create-an-html5-survival-horror-game-in-6-easy-steps/, they are using an image of the thing you want to see as the 'background', and simply .mask against the visibility graphic. In my case, I do not have an image of the map as it is created through a tilemap generator, so my current code basically shows the opposite of what I am looking
  23. What i need I have two sprites with transparent background textures and want to clip one sprite with other, while keeping the color of clipped one. What i tried I tried to use DisplayObject.mask property https://jsfiddle.net/wrfthr8u/5/ var app = new PIXI.Application(600, 480, {backgroundColor : 0x1099bb}); document.body.appendChild(app.view); let squareTexture = PIXI.Texture.fromImage(SQUARE_IMAGE_URL); let circleTexture = PIXI.Texture.fromImage(CIRCLE_IMAGE_URL); let square = new PIXI.Sprite(squareTexture); let circle = new PIXI.Sprite(circleTexture); square.m
  24. I have a layer (displayobject) with multiple sprites inside. I want to add a circular explosion that would remove the parts of the object they overlap. So, after adding the explosion circle the current display object should. Attached is a picture of what I want to achieve. I know that I could use a black & white mask, where everything is white and the explosion is black so it's masked, but this means creating a new bitmap as large as the entire canvas just to draw a tiny cutout and this would have to be done for each explosion. Also, new sprites might be added after the explos
  25. Hey. I am trying to using 2 polygons as mask for a sprite group. It seems to work with drawRect perfectly, when I use more than 1 (as in the example image). But whenever I try to use 2 polygons, it just apply the first one created as mask. One polygon is above the window, one being the window itself. (see the code). I have provided my example code here. poly = new Phaser.Polygon( { x: 0, y: 0 },{ x: 0, y: 255 },{ x: 153, y: 255 },{ x: 154, y: 218 }, { x: 176, y: 213 },{ x: 165, y: 215 },{ x: 165, y: 215 },{ x: 176, y: 213 }, { x: 19
×
×
  • Create New...