Search the Community

Showing results for tags 'graphics'.



More search options

  • 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 Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • 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

Found 175 results

  1. 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!
  2. 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.
  3. 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!
  4. 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 great if you write some post about it Let me know, what you think about it and what should happen to make you use it instead of your current image editor
  5. 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.
  6. 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() ?
  7. 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 or anything (math hidden for reading convenience đŸ˜‰). Any ideas what that could be from ? My current fix is to draw all the arcs 0.1rad longer and then redrawing the first arc to overlap the last unnecessary bit but it's `// ewww`...
  8. 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 with our focus on learning about the development before and during the creation of computers, digital graphics, animations, games, graphical interfaces, graphics software, interactivity, 3D, a pinch of the first games, the creation of the internet and a touch of virtual reality. I have made more than 110 illustrations for this series and also provide each part with at least one interactive to bring the events alive as good as possible for you. Part 1 is out there now! Hope you like it and I'm sure you learn something new from it and be surprised by some events! There will be a new part every month from now. Enjoy! English: History Interactive Computer Graphics - Part 1 Dutch: Geschiedenis Interactieve Computergraphics - Deel 1
  9. 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 to remove the flashing problem. The stage.background is set to white, in the HTML part backgroud colors are also set to white. When moving from one State to the next I nevertheless get strange black flashes after entering the new State. Sometimes they cover the whole viewable area, sometimes they seem to be a black rectangle originating at the canvas center and covering only the lower right quadrant. I only get those flashes on mobile devices, they don't happen in a browser on a PC. I also observed that they seem to appear only after I add the Graphics object to a State, States whithout Graphics objects don't flash. Unfortunately I wasn't able to find out when exactly a flash occurs, but it seems to be either in or before/after init(), preload() or create(). The typical structure of my States looks like that: MyState = function () {} MyState.prototype = { init: function () { game.stage.backgroundColor = "#FFFFFF"; this.graphics = game.make.graphics(0, 0); // do some more stuff, initialise variables etc. }, preload: function () { this.graphics.alpha = 0; this.graphics.width = game.global.canvasWidth; this.graphics.height = game.global.canvasHeight; // do some more stuff }, create: function() { // do some more stuff game.add.existing(this.graphics); // do some more stuff, set up input handlers etc. // graphics fade in game.add.tween(this.graphics).to({alpha: 1}, 1000, Phaser.Easing.Quadratic.Out, true); // rendering was set to 60 FPS in the previous state (probably unnecessarily), // as long as there are active tweens forceRender() of the SaveCPU plugin is called in update() game.global.saveCpu.renderOnFPS = 0; }, update: function () { if (game.global.saveCpu.renderOnFPS === 0 && game.tweens.getAll().length > 0) game.global.saveCpu.forceRender(); }, render: function () { this.graphics.clear(); // draw stuff like menu buttons game pices etc using graphics drawing methods }, // [ ... more methods for state specific stuff ... ] moveToNextState: function (stateName) { // fade out the graphics and move on to the next state game.global.saveCpu.renderOnFPS = 60; var theEndTween = game.add.tween(this.graphics).to({alpha: 0}, 1000, Phaser.Easing.Quadratic.Out, true); theEndTween.onComplete.add(function () { game.state.start(stateName, true, false); }, this); } } So I wonder if anybody has an idea about what causes the flashes and how I may avoid them?
  10. 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/
  11. 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 returns the following: CanvasRenderingContext2D {} And now for the follow ups: Is the context (2d), unique to the Canvas? Would drawing imaged to the graphics object limit me to the CanvasRenderer, or could I still use PIXI.autoDetectRenderer and PIXI.WebGLRenderer ? Thanks in advance!
  12. 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
  13. 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?
  14. 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?
  15. 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/concept-art/ http://emilyso.com/portfolio/2d-animations/ If you feel my style of art would be suitable for your project, please contact me at: emilyso321@gmail.com Otherwise, please feel free to check out/play some games I've worked on: http://emilyso.com/games/ Thank you for your time and consideration. I hope you enjoy my work
  16. 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.
  17. 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
  18. I'm at my wit's end. I've tried across several game engines and drawing programs now, tried every little setting and have really read everything there is to read. I just cannot get a sharp appearance on any asset as soon as they are rendered in an HTML Canvas or WebGL. In desktop applications, they look fine. Here, for example, is a good asset - it's sharp and clear and as it as a PNG, it should scale down nicely (I need it about 25% of this size): As soon as I load it as a sprite via Phaser, I get a result like this (don't mind the money-man): It's blurry and it's even worse when scaled down (here scaled to 0.1x, 0.1y): I'm on an iMac, so maybe it has to do with the retina display, but I am getting similar results on lower quality monitors as well. What am I doing wrong? When I load other assets in, such as the ones used in the Phaser 2 tutorial, they look crystal clear. I feel like there's something really simple that I am missing. :-( My old (finished) build was in Unity 2D, and I was having the exact same issue. This is why I swapped to Phaser instead of using the Unity WebGL build. I've tested on both engines, and some assets render perfectly (particularly, pixel art renders perfectly. Other, more vector-like assets render poorly). Really hope there's somebody here who can help. :-( Yolanda
  19. i'm trying to draw pacman shapes, or slices of pie, they are basically the same what i want is something like this: i know it's an example i can copy and paste from the webpage but it only works on phaser 2, i'm using phaser 3 rather than getting a pie shape i get this: as you can see, it fills the arc with a straight line, but what i want is to complete the shape taking the center of the circle into account, here is the code: style = { font: "bold 14px Arial", fill: "#FFF", boundsAlignH: "center", boundsAlignV: "middle", wordWrap: true, wordWrapWidth: 80 }; graphics1 = game.add.graphics(game.width/2, game.height/2); graphics1.beginFill(0x0000FF); graphics1.arc(0, 0, 200, game.math.degToRad(360-90-45/2), game.math.degToRad(360-90+45/2), false); graphics1.endFill(); text1 = game.add.text(game.width/2-40, game.height/4-40, "phaser 2.4 text bounds", style); text1.align = 'center'; //text1.setTextBounds(game.width/3, 0, game.width/3, game.height/2); sprite1 = game.add.sprite(game.width/2,game.height/2); sprite1.addChild(graphics1); sprite1.addChild(text1); sprite1.pivot.x = game.width/2; sprite1.pivot.y = game.height/2; sprite1.angle += 0*45;
  20. 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
  21. Hi friends, I am a new Phaser game developer but I am facing the problems with graphics. Where can i find the graphics of my game or how to do it better. Can I use Inkscape for the graphics. Please help me.
  22. Hi, I am trying to create generate a texture for my graphic so I can use it as a sprite. However I have a problem when using the following code: sprite = game.add.sprite(400, 300, graphics.generateTexture()); as the graphic which I want to create is done by the player, so I have no idea how to set the x axis and y axis so that the generated sprite literally takes over the place of the graphic. Is there a way to add the sprite right above the graphic?
  23. Hi guys, I think I have problem how masking in PIXIjs works. I have this image of black horse And I would like to use masking in order to give it the color. Here is my code so far: const app = new PIXI.Application({backgroundColor: 0xFFFFFF}) document.body.appendChild(app.view) PIXI.loader.add('assets/horse.png').load(() => { const horse_sprite = new PIXI.Sprite(PIXI.loader.resources['assets/horse.png'].texture) const horse_mask = new PIXI.Graphics() horse_square.beginFill(0xFFaaFF) horse_square.drawRect(0, 0, 130, 130) horse_square.endFill() horse_mask.mask = horse // I can see the horse and the square if I comment this out app.stage.addChild(horse_mask) app.stage.addChild(horse_sprite) }) It's not working, I can't see anything, not a horse nor the square. Thanks
  24. I'm building a tile based game, and I'm generating a lot of tiles with drawShape and polygon data and then adding them all to a container. Every tile is generated. Right now if I go larger than about 150 x 150 the app crashes with a webGL failure. Do I need to convert these to sprites or something else? Any suggestions? Also, even though there are many tiles there are a much smaller amount of variations, is there a way to copy and reuse already generated tiles? I might want to change the colour so they can't be of the same instance.
  25. Hello, although I don't have enough spare time to create games at the moment, I'm playing a bit around with code to understand game mechanics. At the moment I'm teaching myself soft body dynamics. I can create an entity consisting just of cordinates (say a sphere) and play around with their shape, wobbling, squishing etc. But I'm at a loss at how to bind a texture to them that actually distorts according to the coord changes; preferrably in a way performant enough to use it in a game, and most preferrably done in Pixijs. Maybe I'll have to cut the texture into a mesh, bind UV coordinates to them and then use something like three.js to render it? I see that e.g. Dragonbone has some way to add meshes to characters - plus it can be used from pixi. Will it distort textures properly when I modify mesh coordinates, or is this information only used when exporting animations? What other approaches can you think of?