Search the Community

Showing results for tags 'ui'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 43 results

  1. Hello, I am new to Phaser. What is the best way to create scene (menu, top, settings, game itself) for puzzle game? Should I create scene manually (code) or should I use some GUI and export results as JSON file which later I can use in Phaser? Thanks in advance and I hope my question was not answered hundreds times
  2. 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 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 Here are some of my works :
  3. I need both World Space Canvas & Screen Space Canvas! What is the best approach for that? I have Confusion Regarding Canvas2D & Babylon GUI. Also, if there is something better available please suggest it! The World Space UI will include Video, Image, Text etc.
  4. 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!
  5. I am trying to implement a zoom/drag functionality with some menus over the map. Think of Age o Empires 3, you basically have a map on which you can do zoom and drag, but you also have som menus that are always over the screen. Check this for clarity. So far. I have implemented the zoom/drag by modyfing the x, y and scale attributes of game.scale. But this work pretty good when the scale is big enough to cover the whole screen. But what I need is some kind of viewport that is smaller than the screen (like in Age of Empires) where all the zoom/drag works. The remaining parts of the screen that are not part of the viewport are filled by the UI menus. So far I have put the menus outside the world like I posted here. I attached an image with what I mean by viewport and menus in case is not clear Thanks :)!
  6. If you've been looking for a UI manager for Phaser before, you'll know there aren't really a whole lot of good ones out there. That's why I started working on a component for building user interfaces in Phaser, called SlickUI. It's still in early development, but already capable of buiding user interfaces with panels, buttons, text and generic display objects (like sprites). On the todo list is adding text fields, checkboxes and radio buttons. Website Github page Would be cool to see your opinions!
  7. Hi all, I'm trying to use Slick UI to dynamically create multiple choice question prompts in a new game (see image). The problem is, there doesn't seem to be a way to remove a panel, or update its child elements once they have been created. I couldn't find a way to do this directly through Phaser either. Any help greatly appreciated. Perhaps there is a Phaser method to destroy all children generated by a particular plugin? Cheers, Paul.
  8. I have started work on Photoshop script that exports layer data to a JSON file that can be imported at runtime by Phaser to recreate the design using images from a sprite sheet. This is still work in progress as I will be cleaning this up and adding more features such as bitmap text support and animated spritesheets. Add separation from the design from the game code. No more manually placing images. Make changes in Photoshop and see them right away in the running game. Does anyone else have a similar tool or process for updating and placing their images in Phaser? I used to use Flash and a FSFL script, but this new setup skips the Flash import process. The pipeline I use is as follows: 1. Photoshop using Generator and PhotoshopPhaserExport.jsx 2. TexturePacker auto creates a spritesheet from the Generator created images using a smart folder (Watch your atlases sizes in real time!) 3. Phaser imports the single spritesheet and the data JSON file for all the states as one file and creates each state when it is loaded 4. I didn't add it to my demo, but I use live.js to auto refresh the game when any changes are made 5. I use VirtualHostX to test locally across multiple devices at once, combined with live.js, they all refresh automatically when the game is updated Photoshop PSD Notes: Use Aa single Photoshop PSD for the whole game with a folder for each state, the name of the folder should match the state name in the code Any images that need to be exported as an image is a smart object with the extension .png , with Generator turned on in Photoshop, all those images will export in real time! Create additional instances of the smart objects can have a unique index as the extension instead of png so they share the same source image, for example blueBox.png, can have more instances named blueBox.1, blueBox.2 ect. The attached zip has a quick demo project, psd, and the Photoshop script that exports the JSON data. This concept is based on some of steps from this post bellow and is still very much work in progress.
  9. Animation Scrubber

    Just wanted to know if it was possible to build an animation scrubber. One that would allow me to create an animation and then use a slider to "scrub" the animation. I have seen this in editors before. Where you can view different frames in the animation using a horizontal slider.
  10. mmm PIE!

    So, I know everyone has been working on their own 2d systems, and this one is not GL accelerated yet but it is extremely versatile and tailor able. I call it PIE, or Pryme Interface Elements. The whole idea is a node and element based system, with multiple layers that are propagated with throttled async calls. Resulting in highly modular and quickly deploy-able elements. The two examples in the video were created in a matter of hours, and any more elements to them can be easily added. You will have to excuse the video lag, my pc hates screen recording, but the new work rig should be here soon so no more worries on that as of later this week I hope. The Idea is you have your Pie, which is a target element or if none is set the body is targeted, the system then creates a stack of canvas, by default 4 but this can by changed in the arguments. The Pie is the container for all Nodes, which contain Elements, which contain hotspots, which contain events, which can also contain responses. The graphic data is reserved in the RAM on runtime and is able to be referenced by all elements in the stack at any point of a response or callback. All Nodes, Elements, and Hotspots have a transform Object that effects their positions including rotation and soon scale. All standard DOM elements are easily deploy-able as new Nodes with a little bit of scripting, and later versions will include methods to create these elements automatically. Events already supported: > Drag-able Elements with Custom Response Output and limits > Spin Elements or Knobs, with Custom Response Output and limits > Mouse Overs and Alt Images > MouseClick/MouseDown/Mouse Up and Custom Responses > Keyboard Input with Custom Responses All events can also have an unlimited number of callbacks attached as well. All graphic types that can be drawn to canvas supported, and procedural graphics as well, that do not calculate unless their data changes. All elements are cloneable. All functions are chainable. Soon to include, Sprite Sheets and Animations. OK here is the demo, I'm not putting this out there yet until it can be mimified and bugged I am confident with a little bit of hard work, I can make standard DOM Obsolete, especially once I kick in the web workers and GL acceleration. The demo first shows and audio track dock, with knobs that have output that can control things (though not shown in this demo) and secondly a real time Browser Synth, that has both mouse and keyboard events, and live sound productions being visualized by BABYLON JS particles. This is super simple examples, the keyboards UI was created in less then a hour, and all the elements were super easy to make! I should post the demo of the synth this video does it no justice, everything is extremely responsive, and you have the ability to hit like every key at once if you wanted... To show how easy it was to make the UI here is a section of the script: ... var bg_grid = this.UI.createPGraphic('BG-Grid', function(el, ctx, canvas){ var ui = this.parent; ctx.fillStyle = this.vars.gridBaseColor; ctx.fillRect(0,0,canvas.width, canvas.height); var x = 0, y = 0, sTick = 0; ctx.strokeStyle = this.vars.gridLineColor; ctx.beginPath(); while(x<canvas.width || y<canvas.height){ if(sTick){ctx.lineWidth = 0.5;sTick++;}else{ctx.lineWidth = 0.2;sTick--;} ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,canvas.height); ctx.moveTo(0,y); ctx.lineTo(canvas.width,y); ctx.stroke(); x+=this.vars.gridSize; y+=this.vars.gridSize; } }, {gridSize:40, gridBaseColor : 'rgb(20,180,120)', gridLineColor : 'rgb(120,60,180)'}, {}); var background_node = this.UI.createNode('Background', {layer:0}); var background_grid = background_node.createElement('Background-Graphic', bg_grid, {}, true); this.UI.update = 1; ... //BUILD UI var base = parent.UI.createGraphic('shsynth_base', './imgs/ui/shsynth_base.png'); var displayBase = parent.UI.createGraphic('displayBase', './imgs/ui/display_base.png'); var lKey = parent.UI.createGraphic('lKeyUp', './imgs/ui/LKeyUp.png'); var lKeyD = parent.UI.createGraphic('lKeyDown', './imgs/ui/LKeyDown.png'); var bKey = parent.UI.createGraphic('bKeyUp', './imgs/ui/blackkeyUp.png'); var bKeyD = parent.UI.createGraphic('bKeyDown', './imgs/ui/blackkeyDown.png'); var tKey = parent.UI.createGraphic('tKeyUp', './imgs/ui/tKeyUp.png'); var tKeyD = parent.UI.createGraphic('tKeyDown', './imgs/ui/tKeyDown.png'); var jKey = parent.UI.createGraphic('jKeyUp', './imgs/ui/JKeyUp.png'); var jKeyD = parent.UI.createGraphic('jKeyDown', './imgs/ui/JKeyDown.png'); var lastKey = parent.UI.createGraphic('lastKey', './imgs/ui/wholeKeyUp.png'); var lastKeyD = parent.UI.createGraphic('lastKeyD', './imgs/ui/wholeKeyDown.png'); var keyOverG = parent.UI.createGraphic('keyOver', './imgs/ui/keyCover.png'); this.UI = parent.UI.createNode('shsynth_base', {transform:{x:((parent.UI.layers[0].width)*0.5)-450,y:(parent.UI.layers[0].height) - 260}, layer:1}); this.UI.createElement('Display_Base', displayBase, {transform:{x:145,y:(parent.UI.layers[0].height) - 1010}, layer:0}, true); base = this.UI.createElement('shsynth_base_image', base, {layer:1}, true); this.UI.createElement('C', lKey, {transform:{x:208,y:60}, layer:2, noteStep:0 }, true); this.UI.createElement('Db', bKey, {transform:{x:234.5,y:60}, layer:1, noteStep:1 }, true); this.UI.createElement('D', tKey, {transform:{x:247.5,y:60}, layer:2, noteStep:2 }, true); parent.UI.clone('Db',{name: "Eb", args:{transform:{x:274, y:60}, layer:1, noteStep:3}}); this.UI.createElement('E', jKey, {transform:{x:286,y:60}, layer:2, noteStep:4 }, true); parent.UI.clone('C',{name: "F", args:{transform:{x:325, y:60}, layer:2, noteStep:5}}); parent.UI.clone('Db',{name: "Gb", args:{transform:{x:352.5, y:60} , layer:1, noteStep:6}}); parent.UI.clone('D',{name: "G", args:{transform:{x:364.5, y:60}, layer:2, noteStep:7}}); parent.UI.clone('Db',{name: "Ab", args:{transform:{x:390.5, y:60} , layer:1, noteStep:8}}); parent.UI.clone('D',{name: "A", args:{transform:{x:403.5, y:60}, layer:2, noteStep:9}}); parent.UI.clone('Db',{name: "Bb", args:{transform:{x:430, y:60} , layer:1, noteStep:10}}); parent.UI.clone('E',{name: "B", args:{transform:{x:442, y:60}, layer:2, noteStep:11}}); parent.UI.clone('C',{name: "C2", args:{transform:{x:481, y:60}, layer:2, noteStep:12}}); parent.UI.clone('Db',{name: "Db2", args:{transform:{x:508, y:60} , layer:1, noteStep:13}}); parent.UI.clone('D',{name: "D2", args:{transform:{x:520, y:60}, layer:2, noteStep:14}}); parent.UI.clone('Db',{name: "Eb2", args:{transform:{x:546, y:60}, layer:1, noteStep:15}}); parent.UI.clone('E',{name: "E2", args:{transform:{x:558.5, y:60}, layer:2, noteStep:16}}); parent.UI.clone('C',{name: "F2", args:{transform:{x:597.5, y:60}, layer:2, noteStep:17}}); parent.UI.clone('Db',{name: "Gb2", args:{transform:{x:624, y:60} , layer:1, noteStep:18}}); parent.UI.clone('D',{name: "G2", args:{transform:{x:637, y:60}, layer:2, noteStep:19}}); parent.UI.clone('Db',{name: "Ab2", args:{transform:{x:663, y:60} , layer:1, noteStep:20}}); parent.UI.clone('D',{name: "A2", args:{transform:{x:675.5, y:60}, layer:2, noteStep:21}}); parent.UI.clone('Db',{name: "Bb2", args:{transform:{x:701.5, y:60} , layer:1, noteStep:22}}); parent.UI.clone('E',{name: "B2", args:{transform:{x:713.5, y:60}, layer:2, noteStep:23}}); this.UI.createElement('C3', lastKey, {transform:{x:752.5,y:60}, layer:2, noteStep:24}, true); this.UI.createElement('keyOver', keyOverG, {transform:{x:205.5,y:35}, layer:2}, true); parent.UI.createHotspot('C_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'C'); parent.UI.createHotspot('Db_Hot', {box:{tl:{x:0, y:30}, br:{x:30, y:80}}}, 'Db'); parent.UI.createHotspot('D_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'D'); parent.UI.createHotspot('Eb_Hot', {box:{tl:{x:0, y:30}, br:{x:30, y:80}}}, 'Eb'); parent.UI.createHotspot('E_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'E'); parent.UI.createHotspot('F_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'F'); parent.UI.createHotspot('Gb_Hot', {box:{tl:{x:0, y:30}, br:{x:30, y:80}}}, 'Gb'); parent.UI.createHotspot('G_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'G'); parent.UI.createHotspot('Ab_Hot', {box:{tl:{x:0, y:30}, br:{x:30, y:80}}}, 'Ab'); parent.UI.createHotspot('A_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'A'); parent.UI.createHotspot('Bb_Hot', {box:{tl:{x:0, y:30}, br:{x:30, y:80}}}, 'Bb'); parent.UI.createHotspot('B_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'B'); parent.UI.createHotspot('C2_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'C2'); parent.UI.createHotspot('Db2_Hot', {box:{tl:{x:0, y:30}, br:{x:30, y:80}}}, 'Db2'); parent.UI.createHotspot('D2_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'D2'); parent.UI.createHotspot('Eb2_Hot', {box:{tl:{x:0, y:30}, br:{x:30, y:80}}}, 'Eb2'); parent.UI.createHotspot('E2_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'E2'); parent.UI.createHotspot('F2_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'F2'); parent.UI.createHotspot('Gb2_Hot', {box:{tl:{x:0, y:30}, br:{x:30, y:80}}}, 'Gb2'); parent.UI.createHotspot('G2_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'G2'); parent.UI.createHotspot('Ab2_Hot', {box:{tl:{x:0, y:30}, br:{x:30, y:80}}}, 'Ab2'); parent.UI.createHotspot('A2_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'A2'); parent.UI.createHotspot('Bb2_Hot', {box:{tl:{x:0, y:30}, br:{x:30, y:80}}}, 'Bb2'); parent.UI.createHotspot('B2_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'B2'); parent.UI.createHotspot('C3_Hot', {box:{tl:{x:1, y:100}, br:{x:35, y:175}}}, 'C3'); var keyDown = parent.UI.createEvent('mousedown', (function(e, p){ ... })); parent.UI.attach('C_Hot', keyDown); parent.UI.attach('Db_Hot', keyDown); parent.UI.attach('D_Hot', keyDown); parent.UI.attach('Eb_Hot', keyDown); parent.UI.attach('E_Hot', keyDown); parent.UI.attach('F_Hot', keyDown); parent.UI.attach('Gb_Hot', keyDown); parent.UI.attach('G_Hot', keyDown); parent.UI.attach('Ab_Hot', keyDown); parent.UI.attach('A_Hot', keyDown); parent.UI.attach('Bb_Hot', keyDown); parent.UI.attach('B_Hot', keyDown); parent.UI.attach('C2_Hot', keyDown); parent.UI.attach('Db2_Hot', keyDown); parent.UI.attach('D2_Hot', keyDown); parent.UI.attach('Eb2_Hot', keyDown); parent.UI.attach('E2_Hot', keyDown); parent.UI.attach('F2_Hot', keyDown); parent.UI.attach('Gb2_Hot', keyDown); parent.UI.attach('G2_Hot', keyDown); parent.UI.attach('Ab2_Hot', keyDown); parent.UI.attach('A2_Hot', keyDown); parent.UI.attach('Bb2_Hot', keyDown); parent.UI.attach('B2_Hot', keyDown); parent.UI.attach('C3_Hot', keyDown); I will be releasing this library soon, along with a Browser tool for Real time Music Production Linked to Custom 3d Visualizations and that are controlled by different nodes and instruments you have set up, with a quick variable linking system so shaders, and all properties of the scene can be effected real time to the music being produced. Mainly targeting DJ's and Live Producers, but also including nodes for Timeline/Automatons for note rolls and other effects... I have been sitting on this for like 2 weeks and have not had a chance to work on it because of my busy schedule and a timeline I need to meet for a client, but I figured it was time to give the world a taste of my PIE... (the mmm... is www turned upside down ^_^) Comments, Concerns, Criticism?
  11. Hello all, I apologize in advance if this question has been asked and answered N times already, but I have searched through the forums, and slogged through the vastness that is Google, and haven't quite come up with an opinionated-enough answer that influences my desires. My (simple) question is this: What is my best option for implementing UI elements in a Babylon.js-based web game? My (more complex) question is: Given that I want to provide (1) performant (2) support for responsiveness (handheld, tablet, computer) in a user interface which (3) allows for things like multiply-layered (e.g. controls over render-texture over background) UI widgets, (4) text rendering similar to DOM capabilities, that (5) integrates well with Babylon.js, and (6) is currently supported/actively developed, what are my actual options? (1) my options are DOM (slow), canvas (better) and WebGL (best) (2) can be influenced by media query-alikes in order to support different devices (3) not sure, this sounds like custom witchcraft (4) why not just use DOM?? (5) bGUI :-) (6) Not bGUI :-( I've built a UI library in the past, so the concepts are not foreign to me. But since I'm in the research phase for my own project, I figured I would reach out to the BJS community, and perhaps spark an A vs. B flame war. (Kidding!) Any thoughts are welcome, so please fire at will
  12. In peoples experience / opinion which is the better approach to building a User Interface for an HTML5 game? I've found mixed opinion and approaches across the web (as with most things HTML5 games related). As far as I can see the advantages in using the DOM are styles can be set by CSS (so no need for sprites and images), and it isn't redrawn by the main game loop on each redraw (as this is then handled by the browser, and presumably is generally accelerated by the GPU). It's also easier to handle user interaction such as click events through the DOM. However I know accessing the DOM can be very slow from javascript, so it's how you mitigate that when you want to update parts of the interface. It's also worth noting that I've encountered performance issues using the DOM for a UI on my mobile phone. Currently the UI is just static and does nothing, but I still get frame drops. I realise it could just be my phone, and I need to check whether not layering the DOM objects over the canvas improves performance - but in my game engine I get a steady 60fps on my phone when the DOM UI is hidden, but this drops massively when it's displayed. This could easily be something I've done though?!
  13. HI, I am beginning with Phaser development and started to read Interphase. Is it possible to re-use UI components in between states? I see that it is possible to pass data to the next state but somehow it is not really working for me. I have this in one state: gengine.IntroScreen = function(game) { this.exit; }; gengine.IntroScreen.prototype = { preload: function () { exit = this.load.image('exit', 'assets/shared/exit_sprite.png'); }, create: function () { this.exit = this.add.sprite(940,20,'exit'); this.exit.inputEnabled = true;, this); }, exitState: function() { // restart the game this.state.start('boot'); }, So the exit sprite is wired to a function that resets the game. Eventually I switch state in my code, trying to pass the exit sprite to the next state: this.state.start('next_state', false, false, this.exit); So then I was testing that in the next state, the sprite image was there since I didn't clearWorld() but it no longer responds to any click events. Is it better to just rebuild the UI every time from scratch? Thanks
  14. UI/UX Feedback

    I am looking for some feedback for my UI (images attached). The game was a text adventure - but has now gone towards the way of point and click. I have it laid out with a full screen background that is contextual to where you are in the game world. Then on the left side is your UI. On the right I have the game text appear in a window that ends just before the UI menu. There are three main portions: Status (middle), Core Actions (top), and Contextual Categories (bottom) Here are in game screen shots for the item UI. It has a popover for item details. Here is the default screen when adventuring: This is the shop screen when in a town: And some other various in game shots: I was wondering if this UI looked good, because there may be another option for me. I was hoping to get some feedback. All images are attached so if you would like to mark them up - that would be great! If you want to try it out for the UX portion of feedback, you can use the test server found at: Thank you!
  15. Hey guys, I'm new to the forums and my purpose here is to find some mobile HTML5 games to buy specifically for "Android" devices. I am looking for someone who creates mobile web HTML 5 games; either already created, or can make simple games on the fly. The HTML5 games will need to capture user information (more will be discussed via pm). As well, games will need to have default features (ex: Automatically save the player’s progress, create a users profile, leaderboards, etc...). My project will also require a portal/hub, have a frontend and backend design (UI / UX). This is another project in itself but if you have experience with this that would be an asset (or if you can help with suggestions). I've scrolled through a few threads already and I see a lot of games for "license". I'm not interested in this and am not interested in "plugins" or "free games" as they are branded and have ads in them. So hopefully there's a few of you guys that can help me out. Please send me pm's only with all your information such as portfolio and email addresses. If you have any questions I'll be happy to discuss! Thanks for your time :). ~ WorldPeace
  16. Do you guys have any tool that you use to design animated UI ? or do you just animate them manually through code ?
  17. I am working on a 2d top down car based shooter for mobile devices and looking for a talented artist to handle all visual assets of the project including: 1) App icon 2) Cover art/Loading screen 3) Complete UI (markets, leaderboards, customizing upgrades, and many more) 4) Props and icons 5) Top down background maps/roads (Jungle, desert, ice, mountain top, highway, lava,etc) 6) Rendering up to 80 vehicle blueprints 7) sketching armors and weapons My target audience are male gamers between the ages of 15-25. I am looking for a render style that would satisfy both extremes of the age group. For those interested please send me your portfolios on and we can discuss all the details there.
  18. Hi anyone! I want to create panel of ui and I need to stretch a background of panel like Scale9Image in Starling. Can i do it? Thanks so much!
  19. How to create UI like this(attached photo)? EZGUI does not seems to have this feature.. I know EZGUI has stack of buttons but not UI that has button inside of it. Any suggestions?
  20. Hello all, I just released my PhaseSlider UI component, which is a (duh!) Slider with many options and functionalities, take a look at the github repo: or the examples here for advanced: or here for basic example:
  21. HTML5 Developer Needed New York City

    Looking for an experienced HTML5 phaser game developer in the New York city for a full time gig. Let me know if anyone is interested.
  22. Positioning user interface

    How do you position the user interface graphics / sprites to stay on the screen?
  23. Hello, My name is Vladislav. I am looking for paid freelance work. My main portfolio My pixel art Thanks!
  24. Hi there guys, usually I make my games using Phaser and on top of that I have an html layer with a form to save the leaderboards. That´s pretty easy to use and as I use always the same, super fast Anyway, now that I´m targeting mobile games, I´m using and everything is fine when I don´t need too much CPU power, then I have to use cocoon´s Canvas+ and then I´m not allowed to use my loved html form, so my question is this one, how do you handle input text in a canvas? I would like to do it properly to be able to use Canvas+ in some cases but I tried a couple of things and I´m not really happy with them... do you guys have some experience/tip/advice about this? Thanks.
  25. Nine Patch Plugin for Phaser

    So a few months ago I have to deal with the kind of nine patch image. I see that many game engines and app frameworks support this kind of image, but Phaser doesn't. I did google around and found this gist on the thread ninepatch-images-possible-with-phaser. However, the code has some very serious problems: The class consider the image should be divided in to equals part horizontally and vertically, and we all know that most time, that is not the case; It creates new texture every time you create new instance of the same nine patch image, that is a big waste of memory and performance; The code is outdated since there have been so many changes in Phaser in the last few versions, would definitely crash on 2.4; The nine patch image must be standalone, you cannot load it from a spritesheet or a texture atlas.I created my own solution, and it works very well in my works. So today I polish the code to share to all of you This is the Nine Patch Plugin for Phaser. You can try out the demo on this codepen. For usage, read the readme on the github repository. For more technical details check out this post. The source is available for download from latest release or the github repository or via bower:bower install --save nine-patch-phaser-pluginBtw, since Phaser.NinePatchImage actually extends Phaser.Image, so you can do anything that you can do on a Phaser.Image instance with a Phaser.NinePatchImage instance. However, in some cases, like with anchor, you have to run the method UpdateImageSizes afterward for the NinePatchImage to be displayed correctly. Cheers!