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. I need some way to make common browser UI(scrollable lists, file picker,popups) with pixijs. My needs: 1. Will need to share data with pixijs( access read file content in Pixi, shared plain JS array objects that act as state for react UI elements and accessible in pixijs). 2. Don't really need further interaction between react and Pixi beyond sharing data. 3. Don't really care for (and would very much prefer not to) using Pixi like react's functional style. Is this possible? If not, can someone recommend a simple js UI library that does the above(file picker, popup, scrollable list). Again, they don't need to have a functional style like react. I'm using pixiv6 with pixi-viewport.

I am coding new game for facebook instant game and need ListView (Scroll view) to make a leaderboard Where can i find that, for Phaser 3, thank so much!

Hey Guys, I'm just getting my feet wet with pixi (and html5 game stuff in general). I was wondering what people generally do for UIs in their games made with pixi? I found a related ui library called PUXI, but it seemed rather limited at a quick glance. Would it make more sense to just put actual html elements over the canvas? Or is that dumb... no idea. Appreciate any advice / points in the right direction. Also, using pixi 6 for my current experimentation. Thanks!

I am making UI Components Framework for Phaser 3, that is driven by JSFL-generated jsons and atlases. It means that you can build your UI in Abode Animate, export it with given script, and forget about manual code positioning and building stuff! Please, try it out. https://xense.github.io/phaser-ui-comps-docs/tutorial-showcase.html Docs, examples, tutorials: https://xense.github.io/phaser-ui-comps-docs There are two basic things in this framework. First is ComponentClip, which is a view instance, it is recursively self-build by provided json and atlases. Second is UIComponentPrototype, which is clip controller. It can be easily extended to create any components, windows or whatever you need. Essential meaninig of it is that it doesn't need a clip to exist always. For example, you can change states of a root clip, and child clip can get new clip instances, ore lose them, and nothing bad happen. Some base components are already included UIButton has 4 states, "up", "over", "down", "disable" UIButtonSelect same as button, but behaves like checkbox, has 8 states, by adding "_select" suffix to UIButton's states when selected. UIButtonRadio Selectable buttons, that can be grouped to select only one of them. UIButtonDraggable same as UIButton, but also emits drag event, drag bounds can be self externally. UIScrollBar vertical or horisontal bar with draggable thumb and prev/next buttons. UIProgressBar Setup only start and end elements positions, scale, rotation or alpha, and this component will interpolate them according to provided progress value. UIScrollPanel Helper for scrolling any element with UIScrollBar. UIContainer Base container component to add other dynamically created components inside. Can be easily extended to create any types of lists, for example. I'm still working on new components and extending existing functionality. Tell me, would you use it, what other components you may need, and whatever you think about it. Any feedback is appreciated! Also I'll be thankful for any collaboration. Available at GitHub and npm

Hey All! I needed to display some dialog boxes in a recent game and the old 9-slice plugin wasn't ported to v3 yet so I wrote one (github repo). I have a live demo here and a gif of it in use follows. Would love to see this get some use outside of my projects so give it a spin. I'm pretty active on the discord and try to check in here weekly so feel free to ping if you have any questions! Happy hacking!

Hi, I don't like to bother, but I don't sure what I'm doing and I need some guidance if it's possible... I have two containers, one for map sprites (320x180px) and the other for UI graphics (who it's resized to native resolution, in my case 1920x1080) My intention is to rescale map_sprites_containter and all its sprites to 1920x1080 in the most efficient way, every frame. So I came up with the idea of render a texture of map_sprites_container, convert it to a sprite and scale it. Is this the best way? Some pseudo code: var bitmap = new Bitmap(320, 180); var renderTexture = PIXI.RenderTexture.create(320, 180); renderer.render(map_sprites_containter, renderTexture); var canvas = renderer.extract.canvas(renderTexture); bitmap.context.drawImage(canvas, 0, 0); canvas.width = 0; canvas.height = 0; renderTexture.destroy({ destroyBase: true }); bitmap.baseTexture.update(); var render_map_sprites = new Sprite(); render_map_sprites.bitmap = bitmap; render_map_sprites.scale.x = 6 render_map_sprites.scale.y = 6 map_sprites_containter.addChild(render_map_sprites);

Hi, I'm tinkering with a strategy game concept and I thought I could try web-based technologies for faster prototyping. I'm more of a Java programmer, so I'm learning the ropes, but I think that a web game will be easier to iterate on with over people : no need to install anything, just go to the link! I saw there are multiple frameworks: pixi, phaser, melon, babylon, etc. All of these have some basic support for UI, but it looks to me it still is pretty poor compared to DOM/CSS native features, or you need a greater involvement in graphics wrt code. Following a few tutorials, I could easily use Vue+Bulma to draw a quick UI prototype (see https://guillaume-alvarez.github.io/technologies-app/), only missing the game map (that will need another framework obviously), I think it would have taken me much much longer to do the same thing with Pixi (I tried it a few years back). However I see most game only UI is made in the same framework as the main game view (pixi, phaser, etc.)... So I'm curious... Why is that? Maybe my use case is a bit specific, relying more on UI than on animations? Or I missed some great UI library for these frameworks? Or for mobile screens you need a more integrated UI? What am I missing?

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

Refer to the link below, it looks like that the fatness of the font will be impacted by the width & height of the plain mesh. This is not what I expected. Actually I want the font be rendered normally no matter what the mesh size is. Is there way to fix this issue? How to calculate an appropriate size to make the font look better? https://www.babylonjs-playground.com/#YFRMAK#11 Solution: https://www.babylonjs-playground.com/#YFRMAK#15

Hi devs, This is my first post in this forum, because i am new on HTML5, but have a huge experience on mobile gamedev industry. So i need you advice, is that UI good for Web game? or i need to change something? I will appreciate any advice! Thanks!

Hunt prehistoric creatures with your friends online. Build your own base, craft tools, and weapons to survive in a large-scale true cross-platform open world game. This game is an application of the engine I’ve built, to prove a statement: It is POSSIBLE to build a 3D version of the Internet, where instead of browsing through websites, we could jump from one 3D space to the next. I “invite” everyone to make this happen. I want you guys to build your own 3D spaces implementing your own ideas what the web should look like in the future. We could just link them all together and make this Interconnected Virtual Space happen - yeah, the Metaverse, for the Snow Crash fans out there Tech Details that I hope provokes further questions: Loading Assets on Demand is even more important in the Browser than on PC or Console. Internet speed is only a fraction of the speed of the hard drive. It is essential to only load whats visible if you want to provide an open world environment for users visiting your world the first time. LOD - Level of Details allows Web Browsers to show something immediately for the users just like an ordinary website. It may look poor and users can see the object improving as they are loaded, still, I think its a good trade-off. Users get a good enough view of their environment instantly and can start interacting with it immediately. Terrain and the Grid System I’ve created the terrain in Blender, then I split it up like a chessboard automatically using Javascript. It is easy/cheap to determine that which cell contains the given coordinate and every single cell in the Grid has a reference to its neighbors. This is the basis of server layers of optimization when it comes to rendering, AI, and collision detection, etc. A recursive search is very easy to do, using those links to neighboring cells. Lighting I've implanted basic Directional and Ambient Lighting to support Day & Night Cycles and Point Lighting for individual light sources like a campfire, torch etc. To my surprise, the difficult part was to get good looking flames, thanks to the lack of Alpha Sorting in WebGL, what I had to implement in Javascript instead. Animation I animate my models in Blender, export them to “.dae". The file format comes with a serious limitation, you can’t define multiple animations and it only maintains a list of keyframes as references. So I maintain a JSON file per “.dae” to define multiple animations by having sets of keyframes. E.g.: “{running: [0, 4], jump: [5,7], ..}”. But I kept it simple and didn’t take it to the realm of animations per body part. Physics In short, I was stupid enough to write my own ..on the other hand, I have a fine level of control over how much I allow it to run. Again, on mobile, it is crucial to have that level of control to navigate 200+ creatures in real-time. I have two different type of Collision Detection. Collision with the Terrain and collision with other model surfaces. Terrain collision is very cheap, this allows me to move so many NPC at once. Collision with other models is heavier though, but that allows me to climb random looking rocks. I optimized it enough to make it feasible to run on mobile devices. I use a low poly version of the models to determine the collision and I only run it for the models near the Player, utilizing the Grid System I mentioned above. AI NPCs can navigate a random terrain, avoid obstacles and “see” and “hear” other NPCs if behind them. At the moment, they move rather robotically, but this allows me to calculate, where they can move next without hitting any obstacles and how long it will take to get there. I only run the AI right before they get to the target location. Basically, 200+ NPCs make only 40-100 AI calls per second. ..I certainly have room for improvement here Multithreading in the browser is difficult but necessary to achieve good Frame Rate. Nothing but the rendering should be on the main thread ideally - Good luck to achieve it though I’ve managed to push most of the heavy logic into a speared thread, but AI is still running on the main one. In a thread you have very limited access to important functionalities of the browser, therefore, there is only so much you can do. Also, specific objects can only be passed by reference between threads, everything else has to be serialized on one end and deserialized on the other. You want to be careful how often you do it. Audio I use the Web Audio API that works as expected. On top of that, I implemented Audio Sprites: I compile all related sounds to a single mp3 file and that comes with a JSON object to define where certain audio snippets can be found. It's a fast, accurate and reliable solution unlike using Audio HTML Tag, but that one has its own use cases as well, e.g.: streaming an mp3 file comes for free, like streaming an internet radio station. Multiplayer - I use WebRTC and not WebSockets - I know, I know, hear me out. The idea was that COOP is a very likely scenario and players may only prefer the company of their friends. I that case, they don’t have to purchase access to a private server, as long as they are happy to let their world go dormant between gaming sessions. Plus, all the logic is implemented for single player mode on the client-side, which logic has to be duplicated on the servers, if I went down the WebSockets rout - just think about where the AI logic should be, server- or client side. I expect this one to be a controversial decision, ..sometimes even I'm not sure whether this was the “right" decision There is a whole lot more to this though. Resources could be distributed between players when it comes to AI to ease the load on the Host - I know it is a potential security issue, but there is a use case for it, like AI for distant NPCs in COOP as long as you have no hacker friends ..this could be crucial on mobile devices. Controller Support The Gamepad API provides you with raw access to every button and joystick. You certainly have to implement your own layer on top of that. Events for pressing/holding down buttons don't come out of the box. Implementation of the dead zone of joysticks is missing and it is inconsistent how you can access different types of controllers through the API, even the same controller but on different devices. In the end, you will have to provide a controller mapping implementation as well in your settings. But its totally doable and works like a charm. Touchscreen Support It's a tricky one. As I mentioned above, on iPhones its completely useless till Apple decides to comply with Web Standards. Even on Android, it is a bit tricky: For the UI you probably want to use HTML. It makes sense because it comes with all the neat features that make our lives easier until you realize that you can’t switch between weapons while running - wait, what? You see, while you are holding down the left side of the screen to maintain speed and try to click on a button, or any HTML element to switch weapons, the click event won’t fire. No click event will be fired while doing multi-touching. As a result, HTML and any fancy framework for that matter are no longer good enough solution own their own. UI When it comes to games we expect a whole lot more from the UI than on a website. Multi-touch support - as discussed above and even controller support is not as straightforward as you might think. You have raw access to the controller, so when a button is selected and the user pushes the joystick diagonally upward, you have no idea what is in that direction, therefore what should be selected next. You have to implement the navigation of your UI with a controller for yourself. And you need controller support because that's the only way to move around in VR and on consoles. Speaking of VR, you want to render your UI twice in VR - once for the right eye and once for the left eye - and only once when not in VR, just something to keep in mind Also, rendering the UI could be heavy. This might be a surprise but if you think about it, on a website you don’t do anything but the UI, so you have a lot mere leeway to work with, whereas in a game you don’t want the UI to impact the Frame Rate, so it has to be very lightweight and probably you want Scheduling to have a final say on what gets refreshed. Taking all this into account, I really don’t see how any framework could be a good option - they were simply designed with different requirements in mind and there is more downside to using any of them than upside. Precomputed Scene Occlusion Culling using a Grid System Most of the optimization is happening real-time or triggered on a regular basis while running the game with one exception: I render every cell in the Grid System from the point of view of every single other Cell. E.g.: Cell A can see cell B and C but not D. I literally diff two images with javascript to determine whether the given cube can be seen or not. Then I record the results in a JSON file, which is used for rendering. This reduces the number of cubes to be rendered significantly, but it takes about 40 hours to run this optimization for the whole terrain. Running the game on Mobile Devices iPhone runs WebGL significantly better than top-end Android devices but practically useless because Apple ignores important web standards. E.g.: Pinch zoom can’t be blocked, therefore when you use your left thumb to move around and right thumb to look around, instead of doing so you end up zooming back and forth the screen. It also doesn't support fullscreen mode - video does, but not the canvas element. Another interesting limitation on iPhone is that you can only have 25 elements in an array in GLSL, which translates to having only 25 bones in an animated model. This doesn't make animation impossible, but you can’t use most animated models that you buy in the stores, you have to do it again with only 25 bones. Profiling “What gets measured, gets managed”. The built-in profiler in Chrome certainly has its use-case, but not good enough for what we want, so probably you will have to build your own at some point with specific features. You want to know how long a certain section of your game runs per frame, e.g.: Rendering, AI, Physics, etc. and probably these sections won’t run sequentially, but they are interrupted by other processes that you don’t want to include into the specific measurement. One thing is for sure, you cant do optimization without identifying the source of the lags. - I've certainly wasted enough time trying Scheduling As long as you are pushing the limits of the devices it is always a battle for a smooth frame rate. Therefore, you have to implement a scheduling system to manage what is allowed to run and for how long. E.g.: whatever is loaded and processed in the background will have an effect on the frame rate even if it is running on a different thread, you want to throttle that. You don’t want to set variables through WebGL API unnecessarily. AI always varies how much calculations it has to do depending on the number of unique encounters of 200+ NPCs in a random environment. Basically, you will have to limit what runs and how long, manage what is a nice to have calculation and a game-breaking one and try to make it seamless for the user. Probably every single topic above deserves a dedicated post, so please feel free to ask anything - there is no stupid question - then I would like to use those questions to write an in-depth post on every single topic that helps fellow devs to overcome similar obstacles - no doubt I will learn a thing or two in the process Live Tech Demo is available on https://plainsofvr.com

So I'm having a bit of a rough time doing something that seems kinda basic. I've tried doing a lot of research, but I'm really kinda stuck on the higherarchy pixi uses to create vector images. I'm creating vector based UI for my game, and to do this, I need to make a square frame (like a picture frame with the center open); and then rotate said square 90 degrees so it's standing on one of its points like a diamond. Basically, my UI is going to be composed of a bunch of these square diamond icons. Thanks

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

https://www.babylonjs-playground.com/#2ARI2W The edge of the button will blur, just like adding a blur filter.

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!

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

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.

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

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?

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!

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.

Hello, i'm trying to create a configurator for furniture based on this model : https://xboxdesignlab.xbox.com/fr-fr/customize?productid=900WZDF9XJVG 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 ?

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

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