Search the Community

Hi, My name is Nikky. I'm a 31 year old 2D graphic designer (vector) with years of experience, available full time for freelance work. I also had experience on making my own games for 2 years. I can do characters, items, animations, backgrounds, re-skinning, UI design, game cover, icons, logos, and any other kind of 2D art assets. My rate at the moment is $14 per hour, I can also work with a fixed price (with an asset list and a request art style). Well, I usually make deal on a fixed price after estimating the cost to the clients. Or maybe if you have some kind of budget for the art work, we can start negotiate from that. You can see some of my 2D art works for all kinds of games in https://imageshack.com/a/NSMz/1 I work fast, understand deadline, work on weekends and holidays, understand time zone deference, I don't sleep to much anyway, prefer Paypal for safe payments, not interested in profit sharing, or free works. I'm full-time freelance so my focus is on this. I can do most Graphic Art style (vector base). I usually do a test run of one or two of the clients request assets (usually clients also has a request type of style) to make sure the style, design, coolness, cuteness, etc fits them, no need to pay if the test run result doesn't fit you. But if it does, then lets do more actions! Feel free for asking me the estimate of the cost, it maybe cheaper then you think it is. You can email me at [email protected] For Cost reference : Character Design : $7 - $28 (depend on details) +add $7 - $14 per animation (4 - 10 frames) (depend on details) Item $5 - $14 (depend on details) Background $14 - $56 (depend on details) Buttons $2 - $7 (depend on details) Etc. For a more accurate cost, give me a list, and I will calculate for a fix cost. If we have a deal, I will make some samples from the list to make sure you like the art style, if you approved then we move forward. etc. You can email me at [email protected] for more details. Here are some of my works :

Hello everyone! I'm JJ from animation studio, TVT and web design company, JIN Design in Singapore. I'm here to share a freebie, 2D game background. Freebie image preview can be viewed in the attachment. Download now in Google Drive

GAMERINA is looking for a talented, creative graphic artist to join our international team. Responsibility: Your main task would be creating artwork (characters, clothes, accessories, hairstyles, animations, backgrounds, basic UI, icons, etc) for our girl games platform. Requirements: • Experience working in Photoshop and/or Illustrator • You need to have the ability to adapt to new drawing styles • We’ll need you to respect deadlines with Swiss-watch precision • You need to be a in touch with the gaming industry and constantly keep track of trends in new casual and girl games • Work closely with a team of experienced game developers Benefits: Fee will be discussed after our initial interview and testing phase • Fee determined by your skill & experience • Flexible hours • International team Company: GAMERINA is a self-funded start-up with young and enthusiastic management, looking to create and promote content for young women around the world. According to this, we designed and developed Prinxy.app, a HTML 5 premium games platform. Visit prinxy.app and explore your creative potential! If you are interested in our offer, please send us your portfolio via [email protected]

I am creating a program which shows a graph and the user have to click on a point on the graph which will create a line from (0,0) to the clicked point, the program is working but is there any way to use game.add.graphics to create dotted lines instead of solid lines?

I tried to make a game tank and added radar to the tank to detect the obstacle. I use geom.intersect to do that. but when I tried to move the tank I got a problem, because there was only a centerOn method for attaching graphics on it

Hi, I am starting my first little game with Phaser and it's not going entirely smooth :D. I need to display a button with a word (dynamic text and size) , center it, and make it draggable. What I liked about Phaser is that there were tons of shortcuts and lab examples to do things quickly. So I tried to keep my code so concise as possible. These three problems took most of my time. Center the text in a button ( which is a graphic ) Putting these in a container and centering the container. Dragging the container. I would love to solve the first two simply by using setOrigin, or Phaser.Display.Align. But that wasn't so simple, it didn't work or I did not understand it enough. So I manually calculated those now. I was hoping someone could explain why the other attempts didn't work. But the remaining problem is now that only the left side of the button is draggable. Is this a phaser bug, or have I implemented this wrong. I made a fiddle with all my attempts. I commented the failed attempts. https://jsfiddle.net/mrklein/5verkbfg/52/ I hope the rest of the game will take less time, hopefully can someone point me what I did wrong so I can learn from this. kind regards.

Hello, Just a quick question. I'm trying to apply blend mode to some graphics in WebGL with no or unwanted results. Here is the setup: const graphics = new PIXI.Graphics(); graphics.beginFill(0x000000, 1); graphics.drawRoundedRect(150, 260, 300, 100, 15); graphics.endFill(); graphics.blendMode = PIXI.BLEND_MODES.SCREEN; // add graphic app.stage.addChild(graphics); Using either SCREEN or ADD, the graphic disappears and using MULTIPLY looks just like normal. I assume that this has to do with how graphics works, but I'd like to know if there is a way around this. Best, Rodrigo. EDIT: Sorry I forgot to add the live sample link: https://codepen.io/rhernando/pen/bb9b55d5e813a9199f0e0e942cbc410c?editors=0010

I'm trying to create a pie chart with Phaser, using `graphics` to draw each slice of the pie (`graphics.arc(...)`). The problem is that when it renders I get (what I think) an unexpected result. I basically want to draw 3 slices the same size, the code I use looks something like this: function degToRad(degrees) { return (degrees * Math.PI)/180; } var total = 3; var width = 300; for (var i = 0; i < total; i++) { var radius = Math.floor(width / 2); var deg = 360 / total; var start = degToRad(i * deg); var end = degToRad((i + 1) * deg); graphics = game.add.graphics() graphics.beginFill(0xFF0000) graphics.lineStyle(2, 0x000000) graphics.moveTo(0, 0); graphics.arc(0, 0, radius, start, end, false); graphics.endFill() } I've created 3 fiddles to show the difference between a canvas, pixi and phaser based examples, each of them using the same process to draw the slices: canvas: https://jsfiddle.net/oL414v9t/1/ pixi: http://jsfiddle.net/ngma7snq/59/ phaser: https://jsfiddle.net/1ck39fos/1/ Does anyone know why this happens and how can I achieve what I want?

Assum we use physic engine like box2d or p2.js. And both graphic and physic updating are aprox 60 fps. What is better? 1. Update gfx position right after physic body moved? GameObject.prototype.integrate = function() { this.body.integrate(); //body has changed his position according to physic simulation this.gfx.x = this.body.x; this.gfx.y = this.body.y; } 2. or in separeted loop? requestAnimFrame(() => { world.eachObject((obj) => { obj.gfx.x = obj.body.x; obj.gfx.y = obj.body.y; }); });

for (let i = 1; i < xPoints.length-1; i++){ a= i*2 this.game.add.tween(graphicsend.currentPath.shape._points).to({a: (225-newypoint[i]) }, 500, Phaser.Easing.Linear.None, true); } for (let i = 1; i < yPoints.length-1; i++){ b= i*2 +1 this.game.add.tween(graphicsend.currentPath.shape._points).to({b: (315-newxpoint[i]) }, 500, Phaser.Easing.Linear.None, true); } Hi, I am trying to tween the points of a graphic but I am having trouble looping it. The a and b variable I set is useless but if I set it to for (let i = 1; i < xPoints.length-1; i++){ a= i*2 this.game.add.tween(graphicsend.currentPath.shape._points).to({2: (225-newypoint[i]) }, 500, Phaser.Easing.Linear.None, true); } for (let i = 1; i < yPoints.length-1; i++){ b= i*2 +1 this.game.add.tween(graphicsend.currentPath.shape._points).to({3: (315-newxpoint[i]) }, 500, Phaser.Easing.Linear.None, true); } it works. Is there any way to represent the numbers to be tweened?

Hello, It has been a while since our last post here! MyGameBuilder was formed through a creative joining between the first versions of MyGameBuilder and MightyEditor. The main purpose of MyGameBuilder is to teach users game development in a collaborative manner, where more experienced developers can help others. If you are completely new to the game development you can: Play games - we have some nice user made games! Play with the actormap engine, which doesn't require any coding experience to make a game. Fork game and alter it to make it your own. Start taking guided lessons to learn programming basics, and even create a Phaser based game on your own, If you get stuck doing any of these things, there is usually somebody online who will be glad to help. After finishing the basic tutorials, there are some game related challenges to start practicing with. Main parts of MyGameBuilder: Graphic Editor - easily create your own pixel art, or import graphics here Actor and ActorMap - are part of the ActorMap engine, which allows you to build game without coding. It's as simple as assigning graphics to an actor, defining the Actor's behavior, and placing Actors on the ActorMaps to interact. Also, if you have used an earlier version of MyGameBuilder, you can import your game into the new version. The Map Editor allows you to build maps for your games. It uses the TileMap format so you can convert your graphics into tiles, and put them on the map.You can also import TileMap in JSON format or load TileMap directly into a Phaser game. The Sound Editor allows users to quickly create sound effects, like a coin pickup or a melee hit. There is also a music editor, which you can use to create background music for your game. Currently you can generate metal or 8 bit music, or import your own mp3 file. With the Code Editor, there is no limit to what you can create. The Code editor has a beginner-friendly code mentor which will show information about keywords used in the programming. Also it has JSdoc support so users can describe functions with JSdoc comments, the code mentor will pick those up and show as help info. Code Editor supports full ES6 JavaScript syntax and will automatically pick-up imported modules and share their info with the code mentor. The latest addition is our Hour of Code project: this is a gaming tutorial used in a worldwide classroom project that has users of any experience level program a dwarf character to complete game goals with basic JavaScript commands. Check it out here: https://v2.mygamebuilder.com/hour-of-code And all of this is completely free! It would be really nice if you could share your game developing experience when you were a beginner: How did you begin? Where did you get all the necessary information to build a game?

Hi. My name is Michał. I am 2D graphic designer based in Poznań, Poland. I have 5 years experience in making art and animation for games using various techniques and styles. Pixel art is my favorite and works for me like meditation I'm interested in paid jobs. 12$ per hour is good for me. email: [email protected] my portfolio with more works: http://www.stalomir.pl

Just in case someone needs it (cause I did). This configuration change the template to export json file compatible with Phaser game.load.atlas function Download from my repo: https://github.com/netcell/PhaserShoeBoxConfig Just download the .sbx file and double click it.

Sorry guys, I've just start using phaser, i wonder if it is possible for to create a line which is clickable? Here's the code function create(){ graphics = this.add.graphics(); graphics.lineStyle(20, 0x33FF00); graphics.moveTo(100,200); graphics.lineTo(300, 200); graphics.inputEnabled = true; graphics.input.useHandCursor = true; graphics.events.onInputDown.add(function(){ console.log('Clicked'); }); } When i use inputEnabled method, it works on most of other things like sprite or image, but for graphics it wont respond. I've look into the offical example provide by phaser web http://phaser.io/examples/v2/display/graphics-input-events i saw them adding graphics.input.useHandCursor = true; However for some reason it doesn't work like the example? Thank You so much for the time

Hello, Where I can buy some graphics for my games ? I am mainly developer, and design is word which I dont like to much. I need buy some graphics for my topdown 2D game, but I found few stores with few package. (for example this: http://graphicriver.net/category/game-assets?date=&page=2&price_max=&price_min=&rating_min=&referrer=search&sales=&sort=sales&term=top-down&utf8=%E2%9C%93&view=grid) Can anybody tell me where I can find more of these packages ? 2D artist will be also good (for money of course). Thaks for every information.

Hello to all Phaser Lover, Would you mind guiding me the way to fill the red color inside the image shape. Thanks you in advance!

Hello all, I am having trouble with a problem that would seem very simple but I haven't been able to find an answer to in the forums and there is not a close example I've been able to find on the Phaser.io site. Explanation: I have a quiz game that asks questions like multiple choice. At the bottom of the game there is a row of circles with numbers inside to show how many questions. When the user answers a question, the circle changes color (red = incorrect, green = correct). Then the row slides to the left. Problem : I use a click event and in the callback function I change the graphics fillColor property ex : rectangle.graphicsData[0].fillColor = 0xFF0000; I put this in the update state, and every frame, the update state looks into an array objects that track the question, the answer chosen and whether or not it was correct. It looks something like this. var tracker = [{question : 1, // Question numberchosen : 'A', // Choice chosenstatus : 0 // 0 for wrong, 1 for right}]So the idea is, that update looks to the question number the game is currently on, subtracts that value by one (the previous question), looks into the array, finds the question number and uses the status to determine whether the circle with the same number should be red or green. rectangle.graphicsData[0].fillColor = tracker[this.quest].status ? 0x00FF00 : 0xFF0000; I use a console.log to check the fillColor Property and it's changed to the correct color, but on screen, the rectangle never changes color. Bandaid : The only way I can change the color of the circle is by refiring the create state and using the same logic to redraw the circles based on my tracker array. I have put together a little snippet to recreate, basically the same functionality (change color of graphic on a event) ;(function($){ $.fn.graphics = function(){ var self = this; var Graphics = {} var game = new Phaser.Game( $(self).width(), $(self).height(), Phaser.AUTO, $(self).attr('id') ); var Objects = { rec : null, color: 0xFF0000 } var state = function(game){} state.prototype = { init : function(){ game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; }, preload : function(){}, create : function(){ Objects.rec = game.add.graphics(0,0); Objects.rec.beginFill(0xFF0000, 1); Objects.rec.drawRect(50,50,50,50); Objects.rec.endFill(); Objects.rec.inputEnabled = true; Objects.rec.events.onInputUp.add(function(){ console.log('fire'); Objects.color = 0x00FF00; }); }, refresh : function(){ }, update : function(){ Objects.rec.graphicsData[0].fillColor = Objects.color; console.log(Objects.color); }, } game.state.add('state', state); game.state.start('state'); }})(jQuery);Sorry for all the tab spacing, this editor seems to magnify all my tabs. here's a screen of my console log that shows the property changes

I'm drawing a line from one game pointer to another using bitmap data and it works pretty well, however I'm trying to enable a body and have it collide with another object. The bitmap line immediately takes up the entire screen, allowing no space for anything else to move. Using overlap instead of collide doesn't help either. Is there a better way to approach this, where only the drawn pixels are treated as the body? Thanks for any help! draw(){ let gameX = game.globals.SAFE_ZONE_WIDTH * 0.5 let gameY = game.globals.SAFE_ZONE_HEIGHT * 0.5 this.line = game.add.bitmapData(gameX*2 ,gameY*2); this.spriteLine = game.add.sprite(0, 0, this.line); game.physics.enable(this.spriteLine, Phaser.Physics.ARCADE);},drawLine(){ this.line.clear(); this.line.ctx.beginPath(); this.line.ctx.strokeStyle = "white"; this.line.ctx.lineCap = 'round'; this.line.ctx.moveTo(10, 10); this.line.ctx.lineTo(game.input.x , game.input.y); this.line.ctx.lineWidth = 12; this.line.dirty = true; this.line.ctx.stroke(); this.line.ctx.closePath(); this.line.render();},update(){ game.physics.arcade.collide(createBall.ball, createLine.spriteLine, this.gameFail, null, this); if (game.input.pointer1.isDown && game.input.pointer2.isDown) { createLine.drawLine(); } else { createLine.destroyLine(); }}

Can anyone show me the way to draw graphic circle timing? please gimme some code or fiddler for demonstration. Thanks you in advance !

Hi there, I´m an illustrator, animator, character designer... I´m looking for new clients, so if you are looking for a new artist, you can check my portfolio here or here. Contact me if you think my style fits on your project. No freebies, sorry... Some screenshots from a game I ´ve developed myself:

Title sums it up. I tried messing with PIXI blend modes like this: this.blend = PIXI.blendModes.ADDthis.blendMode = PIXI.blendModes.ADD But they didn't seem to do anything, I think I'm doing it wrong, and I couldn't find any Phaser examples. How do I add a glow effect to Phaser Sprites or Graphics?