Jump to content

Search the Community

Showing results for tags 'Graphics'.

  • 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. Hi, I just joined this form and am very new to the webgl development, so my apologies in advance if this is a question that does not really make sense. I am currently trying to use PIXI.js with a third party data visualization library. One of the classes in this third party library provides a way to customize the way it renders graphics. In the sample application, they do this by writing a raw webgl but I would love to do this using PIXI.js if possible. This class passes webgl context (this.context) so we can do something like below. const gl = this.context; // webgl contex
  2. I'm working on a custom data-visualization for large data sets. I originally have been building it with svg, but I'm hitting a peformance bottle-neck quickly with the number of elements I can render and animate. I need to have thousands of elements rendered, animating periodically for key transitions, and support zoom eventually. Only a fraction of the total elements rendered will ever need to animate with dynamic geometry at any given time. Everything else will animate via fadeIn/fadeOut. So for an estimated medium sized data-set case, if I have ~ 1000 data objects, I need to render ~ 3000 ob
  3. I've noticed a small visual bug with the menu I have. When I startup the game for the first time in the browser (in a private window with no cookies), the "label" objects have their fonts properly display but the "button" objects do not. The buttons appear to display the default font instead. However, once I have refreshed the page at least once, all fonts display properly for every subsequent refresh. So this has me thinking that the font is not loading into the button object fast enough before it's drawn the first time and I'm wondering how I can fix that. Here's s
  4. Hello, my name is Alejandro. I'm an indie developer, I work also as freelancer. My portfolio is http://www.noisechip.com/, my rate is 10-15$ hour. Here are some examples of my work: You can also reach me by mail noisechipfreelancer@gmail.com and discord noisechip#8773. Thanks.
  5. Hello ! My objective is to create geometry for meshes. until now I used quad so it wasn't too hard to model. Now I want to model some more complex shapes in 2D, polygons, cones etc. Since I'm familiar with the tools exposed in the PIXI.Graphics object, I thought to myself, "Hey! I'm going to draw a shape, and reuse the geometry contained in the Graphics object." Here is my playground: https://www.pixiplayground.com/#/edit/jGD8JtmKkkbseor6FklBg But after a few tests, it doesn't look so easy. What did I miss? Thanks for your help!
  6. Is there a way to scale a Graphics without getting the linewidth scaled as well? For instance: var stage = new PIXI.Container(); var graphics = new PIXI.Graphics(); // Set a fill and line style. var linewidth = 10; graphics.beginFill(0xFF3300); graphics.lineStyle(linewidth, 0xffd900, 1); // Draw a shape. graphics.moveTo(50, 50); graphics.lineTo(250, 50); graphics.lineTo(100, 100); graphics.endFill(); // Now, scale this Graphics. var scale = 5; graphics.scale.set(scale, scale); // all lines now have width linewidth * scale In the example above, the vector "shape" gets properly
  7. Hello I saw two different methods of generating textures from graphics object in pixi 5 WebGL: graphics.generateCanvasTexture() renderer.generateTexture(graphics) How those methods differ from each others? And which one should I use in which cases? Documentation doesn't explain it exactly. Thank you in advance for help!
  8. Hello! I have a custom font that I create and I want to test it before being downloaded as an archive. At the moment of the test, I do not have a font file to load it using the BitmapText(text, OPTIONS) functionality. I was wondering if I can load it directly from an xml data string or blob or data url. I checked the official documentation (BitmapFont, BitmapFontLoader), but it is unclear to me if that will work. I would greatly appreciate an example, handling custom fonts is scarce on the internet. Thank you!
  9. TR-i


    Since graphic sprites have no anchors, the only way to position a texture used with BeginTextureFill is the defaultAnchor of the texture. However, changing the defaultAnchor seems to have no effect. I've tried every combination of anchoring and positioning and this is the consistent result (below). Both texture and sprite are the same dimensions (400 x 400).
  10. I want to draw a rounded rectangle. I've seen a function to draw this but i'm new in phaser and i have no idea how to use it and in documentation there isn't examples. http://phaser.io/docs/2.3.0/RoundedRectangle.html ┬┐Someone can help with and example? Thanks!
  11. Hi, I created a Graphics object and draw in it behind the coordinates of the mouse. I use moveTo (), lineTo () and strokePath (). I would like to fill the object inside the line and use fillPath (), however the shapes can be drawn with different patches. Are there any ideas how I can fill in shapes drawn from different patches? In the image, an example - line numbers is the order in which they are drawn. Thanks for any ideas!
  12. Hi, this is not really about games, but I think some fans of HTML5 may like that If you do game design, you might actually use that (in some cases). I am developing a professional graphic editor, which will work inside a browser. I defined a challange for myself: it should load and save PSD (PhotoShop Document) format. www.Photopea.comBlog: blog.photopea.comI would like to get some feedback, to get myself motivated and maybe find some bugs. Try to open your PSDs and see them rendered. You can follow my FB or Twitter (see blog) to be aware of future updates. If you have a blog, it would be
  13. Hi all.I am a beginner of pixi.js, and using PIXI.Graphics to create a circular progress bar that will move over time, the effect is like the one below: https://codepen.io/saadeghi/pen/IBhfJ More specifically, the circular progress bar moves over time. So, the graphics is modified constantly, this caused a very serious performance problem and even caused the iOS system to crash. My question is what should I do to implement such a circular progress bar in pixijs? My English is poor, thank you for reading.
  14. I have a image, it should not be displayed on the screen. But I need the color values of certain pixels. Exists in pixi analog getPixel from as3? If pixi doesn't exist a worthy counterpart, then the second question is how to translate a color value from a context.getimageData().data in the format 0x00000000, suitable for graphics.beginFill() ?
  15. Hi! So I want to make a circle with multiple colors. The colors and angles will change dynamically so sprites or images aren't a solution. But when I draw the circle by chaininc 4 calls to Graphics#arc this happens (on Firefox, Chrome and mobile versions) : My code is basically : class extends Graphics { constructor() { // ... this.lineStyle(this.thickness, color1) this.arc(0, 0, this.radius, start1, end1) this.lineStyle(this.thickness, color2) this.arc(0, 0, this.radius, start2, end2) // etc ... } // ... } No other calls to any draw method
  16. Computer graphics, animations, games and interactions are now self-evident. You just have to pick up your smartphone, tablet, desktop computer or what else and you feel intuitively when you have to swipe, click, drag or pinch zoom. You also expect nothing less than nice interfaces with smooth animations. But it wasn't always like this... There were times where there were no editors like Photo and Designer, nor Illustrator, nor Photoshop, and even computers, games and animations of frames didn't exist... I wrote a blog series of six where I like to take you on a journey through time w
  17. Hi, I've encountered a strage problem while building a little, mostly static mobile game using Intels XDK, Cordova and Phaser (2.4.6). It's targeted at Android and uses the Crosswalk web runtime. I basically followed Matt McFarlands menu tutorial, and created States to do stuff like booting up, loading all assets, showing a splash screen, showing a menu, the levels etc. I'm using one Phaser.Graphics object per State to draw on (my game only needs a few geometric items). Additionaly I'm using the SaveCPU plugin to avoid unnecessary render cycles. Unfortunately removing it doesn't seem
  18. 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/
  19. Hey guys! I've got one main question, with a few follow ups.. here goes I was wondering if there was a way draw an image onto the PIXI.Graphics (object thingy)? I'm aware I can add sprites to the stage and other containers. But I'm currently drawing polygons, and images (with a dynamic render order), So this seems like a good way to do that. Is there a way of doing this, similar to the plain/vanilla canvas way: var canvas = Dom.get('canvas');var context = canvas.getContext('2d');context.drawImage(source, x, y, w, h, ...); I've tried: var context = pixiRenderer.context;.. but this only
  20. I am using the "camera.main.shake()" function How to do make sure that certain graphics like the UI ignore the shake? For example if had this box var newGraphic = this.add.graphics({ lineStyle: { width: 2, color: 0x555555 }, fillStyle: { color: 0xeeeeee } }); var rect = new Phaser.Geom.Rectangle(); rect.width = 500; rect.height =500; rect.x = 0; rect.y = 0; newGraphic.strokeRectShape(rect); Thanks
  21. I'm using Phaser2 to make a simple game. When I set the game width and height to these: var Screen_Width = window.innerWidth * window.devicePixelRatio; var Screen_Height = window.innerHeight * window.devicePixelRatio; The game runs really slow on my iPhone. What is the problem?
  22. I'm finding the graphics examples very impressive, but it is the simple things that are tripping me up. I know I must be missing something simple, but is there a simple way to draw a rounded rectangle in Phaser 3?
  23. Hello, I'm Emily and I'm a freelance artist looking for paid projects, small or part-time. I'm currently booked up on revenue share projects, so I'm only available for gigs that pay as I work. I specialize in 2D game graphics, including: - UI - backgrounds - 2D animations - illustrations/concept art I'm also open to doing anything else 2D animated or fully illustrated (cover art, comics...) For samples of my portfolio, please visit: http://emilyso.com/portfolio/game-artgraphics/ http://emilyso.com/portfolio/c
  24. Hello Designers, I am a software developer who is also interested in drawing and graphics design. Thats why I know a good design requires profession. I am looking for a partner to make HTML5 games and earn some money. Attached images are the works I done (Yes I made the graphics) so I am expecting a better designer than me.
  25. Hi everyone, Cube City Wars is 2 players isometric game which I made for twoplayergames with Construct 2. This game is classic 1 vs 1 shooter game which has additional enemies to kill and get extra score. Collect pickups to get powerful weapons such as minigun,laser gun,sniper rifle and more! Play here : http://www.twoplayergames.org/Cube-City-Wars/1312.html
  • Create New...