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 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

Found 53 results

  1. Since Phaser is a web framework, we the developers, have a choice between drawing GUI (Menus, inventory screens, buttons etc) on the canvas or use built in browser elements with all the functionality and response and just connecting it to the game engine. What would you recommend? Drawing and handling clicks on canvas is a little harder, but if there are any sound benefits to that I would love to know. Thanks
  2. The edge of the button will blur, just like adding a blur filter.
  3. Hey all! I'm trying to make UI elements that are essentially sprites that act like progress bars in that they fill up or empty out as different things happen. I would like the empty and fill to be smooth and have a bit of animation to it and tweens would be perfect, but the shapes are varied instead of just a rectangle that I can change the height of. Something like the attached image is what I'm talking about but that isn't the sprite that I'm using: I did find this solution here using bitmapdata but it only seems to look right when you're increasing or decreasing it by 1 and any other increments make it jump around. It's also not tweenable so I have concerns about making the animation look smooth and nice. While it doesn't seem to be the right solution in this case, the images in that first post in the link are pretty close to what I'm going for, I think I may just have different requirements I've also looked into stacking two of the same sprite on top of each other and cropping one down to give the illusion of an actual health bar-type thing, but I couldn't get it to work as I'm imagining it. There's every chance that that is the right solution and I just don't know how to write it though. The final game will have several of these in a row to make a visual status bar type thing, so being able to control how full each one is individually is important, which hopefully doesn't make things even more complicated. Thanks for any help at all!
  4. hi every one. i wanna make Tool to control scenes with html5 i wanna make like under images's red box. can you recommand library to make that? thx
  5. Hey everyone, I see various games using the DOM for certain elements, I was wondering about peoples experience on this, I have a pretty complex HUD designed and feel it would be much easier to maintain and manage in the DOM and use events from the game to update the HUD. Would you suggest using the DOM or MelonJS? Advantages/downsides would be appreciated.
  6. 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: my portfolio with more works:
  7. Drawing the UI with the DOM

    So in leaning towards drawing the UI using the DOM, CSS and a JS framework of choice, but am a little unsure what's the best tool for the job here. Seems counter intuitive to create a user interface in phaser when this is the web's strongpoint. I wrote a proof of concept with React-Redux but having to dispatch an action for every event is a little bloated; I want my UI to display live unit stats (as well as buffs, effects, queued actions etc), but even though the redux reducer contains objcect references to the game actors, the html components never update (obviously, as this isn't how react works as such) Anyone got any better frameworks in mind, better suited to live, per-frame updates? Angular 1 I've used a lot, but it's got poor performance IMO for fast updates against groups of complx objects - never used angular 2 so unsure if this is a better option and they made things faster. Ditto vueJS; seems to have growing popularity but not sure if it's geared towards fast, live updates or more static, 'react' esque. Thoughts?
  8. Phaser Combobox

    Hi all: I'm trying to integrate a register form into my phaser game. I have no problem with text input, radio or checkbox, but i have no idea of how implementing a combobox. Someone has implemented this succesfully? I need to show a country combobox. Thanks all!
  9. Scrollbar for stage

    I need to make whole stage scrollable with scrollbar. Can I just make a huge renderer on page (bigger than browser window) and scroll using browser scrollbar? Or this is a bad idea and I need to make my own scrollbar inside renderer using pixi.js? In both cases I would make offscreen sprites not renderable for optimisation.
  10. interface html

    Hello, i'm trying to create a configurator for furniture based on this model : but i didn't find how to create the ui on the right. Can we interacte whis the scene with html ? if its possible how do i do ?
  11. Phaser Web Components UI Plugin

    tl;dr: An HTML based UI component system for phaser. MIT License, and links to pretty pictures and videos at the bottom. So I have spent the last week or so working on a new way to handle ui components with Phaser. Most of the UI plugins out there are created with Phaser which means Phaser not only has to handle the game but the UI as well. Meaning that Canvas/WebGL has to handle both the game and ui. With other games platforms versus web games this is not an issue because performance is expected so the systems typically are beefier. With web games the games can be played on anything from an older tablet to an Lenovo Thinkpad to a raspberry pi. So the systems that these games can be played on can be lacking in power. As a developer you want your game to utilize as much of the accelerated GPU as possible. Chrome and other web browsers tend to offload Canvas and WebGL rendering to the GPU. While some aspect of html nodes, most of which are minimally impactful as opposed to the Phaser created ui components. This is where this plugin comes into play. Introducing Phaser Web Components. A growing library of HTML based elements to handle all of your UI needs. You can use your standard HTML elements to create your UI as well as use the custom components that are packaged as well. One of the great features is that you can attach these components to Phaser game objects and they will move with the objects on screen and the disappear when the object no longer is on screen. Already there is a lot of power with this library and it is barely a week old. First off, its free. Not just free to use but you can customize the library how you see fit with the MIT license. You can create your own custom components and if you wish to give back you may even create a pull request and share your work with everyone else. Also, each component has minimal dependencies and some only depend on the base web component which means you can build the library for your game and cut out any fat with ease. Documentation is a thing that it is currently lacking. However, with each control I release I update the wiki page for that control with the base code to get that component up and running. At the moment it is light but expect the documentation to grow over time. I am also at the constant keeping things up to date with the release chart so that way people can see what to expect with things coming down the pipeline. Also if you wish to see work done on a component that doesnt have a release date yet, to see if it can be focused on, or if you have a new idea for a component then you can request that through the issues tab in github. With all that, if you wish to see it in action, below are some links to screen captures of **some** of the components that are already working. GitHub link Damage Indicator Name Plate and Stat Bars Marker Window Volume bar Video Player Avatar Icon Screen Splatter Component improperly loaded
  12. 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.
  13. 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
  14. 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!
  15. 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 :)!
  16. 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.
  17. 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.
  18. 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.
  19. 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?
  20. 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
  21. 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!
  22. 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
  23. 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!
  24. Do you guys have any tool that you use to design animated UI ? or do you just animate them manually through code ?
  25. 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