Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

UI - Builder | core ui elements Unity 5 UI

Discussion in 'Assets and Asset Store' started by beffio, Feb 20, 2015.

  1. beffio

    beffio

    Joined:
    Aug 9, 2014
    Posts:
    143

    Hi everyone !

    Do you need core UI Elements to start building your first Game or App?
    Are you a professional and want to speed up your workflow? No matter your experience, we have EXACTLY what you need!

    200+ Sliced Elements | 130+ Pixel Perfect Icons | 1 Font with 10 Styles | 70+ drag’n’drop components | 30+ Classic App Examples | 23+ Fundamental Game Examples | 3 iWatch Examples | 20+ Color Schemes | 9 HD Photography Images

    UI Builder is a revolutionary, customizable UI-kit that contains ready-made elements to mix, match & build your own User Interface for an App or a Game. It is also a great tool for quick & easy creating and slicing high quality GUI skins & sprites for new Unity GUI.

    Video :

    Creating your own awesome-looking custom interface has never been so easy before!

    UI Builder is the most beautiful UI bundle on the Asset Store. It has been created with developers and designers in mind, using our in-depth knowledge about fundamentals of the design process. We have created this asset using perfectly matched color schemes, well balanced composition and hand-crafted, easy-on-the-eye proportions of each element.

    Features :

    • Quickly create good looking UI elements
    • Constant updates and new features
    • Active development & support
    • Clean modern styles
    • Easy to use for beginners and professionals

    Our other Assets :


    About beffio company

    Are you looking for something custom-made? Maybe you need some specic Icons or App Design ? Contact us - we are at your service!
    Presentation :



     
    Last edited: Feb 20, 2015
    Demigiant likes this.
  2. Ziboo

    Ziboo

    Joined:
    Aug 30, 2011
    Posts:
    356
    Very clever and profesionnal asset ! Well done
     
  3. beffio

    beffio

    Joined:
    Aug 9, 2014
    Posts:
    143
    Thank you !
     
  4. cg_destro

    cg_destro

    Joined:
    Aug 13, 2013
    Posts:
    142
    Looks like very good asset, well worth the money :) good job! :)
     
  5. mimminito

    mimminito

    Joined:
    Feb 10, 2010
    Posts:
    780
    Wow, looks superb! Definitely keeping this in the wish list! Are there any planned updates (I know you have just released it, just curious :))?
     
  6. beffio

    beffio

    Joined:
    Aug 9, 2014
    Posts:
    143
    Thanks !

    @mimminito What would you like to see in next releases :) ? Ofc We are going to make more updates with new content based on customers ideas :).
     
  7. mimminito

    mimminito

    Joined:
    Feb 10, 2010
    Posts:
    780
    I suppose more icons would be great. There always comes the case where there isn't one icon you need haha :)
     
  8. beffio

    beffio

    Joined:
    Aug 9, 2014
    Posts:
    143
    We'd really like to work with you guys ! So @mimminito : If you'd like to see some specific icon, please tell us and we'll included in the next update.

    Cheers,
    Tom :)
     
  9. mimminito

    mimminito

    Joined:
    Feb 10, 2010
    Posts:
    780
    Thats great to know the level of support you provide, thats such a good selling point for assets these days. As I said this is top of my list for my next project, UI is not my strong point :)
     
  10. Demigiant

    Demigiant

    Joined:
    Jan 27, 2011
    Posts:
    3,239
    Woah! I'm all about doing UI by myself so I will not be a client, but I still wanted to say that this asset looks fantastic in all its parts. Great job :)
     
  11. beffio

    beffio

    Joined:
    Aug 9, 2014
    Posts:
    143
    Check the video that shows all features of UI - Builder.

     
  12. Shecky2000

    Shecky2000

    Joined:
    Mar 2, 2015
    Posts:
    4
    Got this and now I have a beginner's question for you. I'm seemingly unable to get the camera size, world units, panel sizes, and the Beffio elements to all sync to the same size. For example, I start a fresh project with the UI builder imported, drag it on to a scene, and the camera can't seem to find it. Or, the element is much bigger than the camera view. I know this seems rudimentary, but it'd really help if you had an example of just using one of your elements from soup to nuts. Like a video or a project that uses one element (so we can see how it all fits together). The scene with everything all at once (UI - Builder Scene) is just too much at once.
     
  13. thempus

    thempus

    Joined:
    Jul 3, 2010
    Posts:
    61
    Hey guys, great asset, I've been using it and it's pretty good. I have some requests for future updates, I may not be using it the correct way so let me know if these are valid:
    • What is the default size for Canvas with screen overlay? Maybe if you guys can include some instructions to let us know what are the default sizes for the elements. For example I'm developing for iPad, I'm using 1024 x 768 as my default screen size and some elements seems too big for 1x and too small for 2x on the prefabs, this made me resize a lot of the elements manually.
    • Some sprites are not easily divisible by 2
    • Some sprites with small corner radios have borders that are too big
    • Inconsistencies with corner radius on different outline sizes
    • Maybe include some different transitions styles so we can copy the component values and apply to the UI.
     
  14. beffio

    beffio

    Joined:
    Aug 9, 2014
    Posts:
    143
    Hi there,

    @Shecky2000
    If you want to have some specific app just some app or a game change the transofrm position to 0,0,0. Select in a canvas render mode to screenspace overlay (note that you have to change resolution in game view to be the same as the size of an app for iPhone 640x1136 iPad 2048x1536). Second way is a to change canvas render mode to world space. Set in game view resoultion and then change the camera position to 0,0,0 also remeber to check clipping planes for camera in space. I will make a small video how to make that and also Im going to make an updaded in few days I will add sample scene with example of an app.


    Hi thanks that you like it!
    1. There is no default size for a canvas with screen overlay. It depends on resolution that is set on the game view but as I said before for an iPhone 640x1136 iPad 2048x1536. New UI tools give you possibility to fix scale just in few seconds for an ipad in canvas scaler change scale factor to 0.5 and it will automatically goes to 1024x768 (this is a recommended technique by Unity Tech Guys they said that sprites will still look really crispy if you will choose pixel perfect). I will also make some small tuts how to make this.
    2. If you want to change size of sprites change their scale to 0.5 it's the best way don't try to change their proportions. In new Unity tools there is no need for specific sprite to be in a resolution that can be divided by 2 because finally in the background they will all be packed into one atlas. This atlas will be created on the fly(so it will be make automatically) and the the final texture will be the power of 2 size.
    3. Ok thanks for info. I will fix that in next update!
    4. That was the idea. We choose only the most common sizes. If you would like to see more radiuses and outlines just write here and I will try to add them in next updates
    5. What do you mean by transitions? Are you talking about animations of UI ?
    Thanks! We really happy to help you and We really appreciate that you like our asset!

    Cheers,
    Tom Lassota
     
  15. thempus

    thempus

    Joined:
    Jul 3, 2010
    Posts:
    61
    I think I found what was the problem, some elements on the prefabs have been scaled down, maybe to fit on the prefab that contains all elements. The input samples have scale 0.6, if I change to 1.0 they looks compatible with the size of the other elements. Also I think I understand now that I shouldn't base my layout on 1024x768 to scale by 2 and should base it on 2048x1536 and then put scale 0.5 on the canvas, I was doing the other way around :/.

    Basically your 1x sprites are for retina already, I got the wrong impression because on iOS 1x is non retina resolution IIRC.

    I was asking about this one because I was basing my layout on 1024x768 to scale by 2 later. I'm still getting a ugly look on the sprites that are not divisible by 2 when I play on the editor, I still have to check if it happens on the final build.

    I like the sizes, the problem is that for example CornerPanelRadius_1px_Stroke_20px doesn't have a corner radius of 1px anymore, because the stroke is centered to the source vector line I guess. To me it seems the wrong approach to have varying corner radius for the same 1px corner radius category. If this was intended then I will just create more variations for what I'm doing.

    Transitions like when the button is highlighted or disabled, it has color tint, sprite swap and animation options for transitions, my suggestion was to have some transition examples with different styles included on the asset :).
     
  16. fkhalifeh

    fkhalifeh

    Joined:
    Jul 6, 2014
    Posts:
    2
    Its a great UI package, you have taken unity to next level with your package !
    I have a question, do you believe that you are able to develop business app in unity engine with the help of your UI builder ?
    talking about Data CRUD operation, listing hug amount of data, sorting, pagination, etc...
     
  17. bjornrun

    bjornrun

    Joined:
    Oct 29, 2013
    Posts:
    88
    Unity 5 compatible?
     
  18. Studio_Akiba

    Studio_Akiba

    Joined:
    Mar 3, 2014
    Posts:
    1,421
    @beffio
    @1.29 on the video, you have spelt Standard wrong, it says "Standart", The pack looks awesome, a little expensive, but from the potential I can see, well worth it if your project is UI heavy.
    Very nice work.
     
  19. beffio

    beffio

    Joined:
    Aug 9, 2014
    Posts:
    143
    Yes always start with retina and then scale it to 1024. Because sprites will always look better when downsizing as compared to upsizing.

    Yes 1x is retina ready. I think you gave me a nice suggestion. I will look into it in the next updates.

    Regarding to your question about sprites quality. Try check the quality settings. Change all of them to maximum and antialiasing to 2-8x. If you want to have pixel perfect results, your window cannot be scaled because your Unity windows don't have space to maximize.

    Yes, that was intended - we are using the same method as in Adobe Illustrator to create strokes with corner radiuses.

    Transitions are included in our roadmap for future features. I think we are going to add them next month.

    Thanks!

    With UI - Builder we provide all fundamental UI elements that are a complete tool kit that allows you to build your own UI or use ready-made templates. If you would like to integrate something that works dynamically, I think you will have to code it all yourself. It's very easy to use each element of our UI system, but if you'd like to work with our asset all procedurally or dynamically, basically you have to customize it and integrate to your system yourself.

    Yes it's compatible with Unity 5.

    Thanks for the info. Problem is that on youtube you cannot re-upload same video again.
     
    thempus likes this.
  20. jasonFHH

    jasonFHH

    Joined:
    Jul 17, 2012
    Posts:
    21
    I know you said you are addressing this, but I just wanted to add in that one of the most needed things right now is addressing configuring a new project. Currently, just following the Documentation PDF and opening the "all templates" scene is not enough to successfully get things working. I had to fiddle around with Camera size and other parameters just to get the UI to render on screen.

    Also, can you please clarify how the onClick / event system works? I was assuming that in the Canvas you would just specify which Camera object was responsible for receiving events, and then you can do pre-defined triggers for an object onClick (e.g. toggle the active state of a GameObject), but this doesn't seem to work.

    So to re-iterate, we need more details:

    • New project configuration
    • Click event handling

    Thanks
     
  21. beffio

    beffio

    Joined:
    Aug 9, 2014
    Posts:
    143
    Yes I understand that not all of you're familiar with new uGUI settings. I will implement as soon as I said new scenes and some info in Documentation about startup settings. (At the moment check video below)

    Regarding to OnClick() event. The button has a single event called On Click that responds when the user completes a click. Typical use cases include:
    • Confirming a decision (eg, starting gameplay or saving a game)
    • Moving to a sub-menu in a GUI
    • Cancelling an action in progress (eg, downloading a new scene)
    It's handle by UnityEvents - Documentation is Here.

    But If you have problems for any Event. I have made a small video (there is no any audio just step by step process how to set your camera and events) how to create a scene with Camera Settings. How to set your scene with any UI template.

     
    Last edited: Mar 19, 2015
    jasonFHH likes this.
  22. denlee0710

    denlee0710

    Joined:
    Mar 9, 2015
    Posts:
    36
    Hi Beffio,

    First thank you for the great addon!

    I have a question/concern about package size. I noticed that all of the assets have a predefined packing tag so they are packed into one atlas by Unity. Is there an advantage for doing so? If I only use a few icons from the icon folder for example, won't Unity still pack the whole thing into my build? Being a mobile developer, package size is a concern to me.

    Apologize in advance if I misunderstood sprite packing mechanic.

    Thanks,
    Dennis
     
  23. TechnicalArtist

    TechnicalArtist

    Joined:
    Jul 9, 2012
    Posts:
    736
    well worth the money:) good job! :)
     
  24. beffio

    beffio

    Joined:
    Aug 9, 2014
    Posts:
    143
    Hi there,

    There is no any information about what happens after building. I thought that it will take only sprites that are on scene.

    But if you would like to be confident on 100% to use only few sprites change in texture component settings " packing tag" name to some different for all sprites that you are using.

    Here is what Unity Documentation tell us about sprite settings:
    Sprite settings for the Texture Importer
    • Sprite mode| Selects how the the sprite graphic will be extracted from the image.
    • Single The sprite image will be used in isolation.
    • Multiple Multiple related sprites (eg, animation frames or separate sprite elements that belong to a single game character) will be kept together in the same image.
    • Packing Tag The name of an optional sprite atlas into which this texture should be packed.
    • Pixels To Units The number of pixels of width/height in the sprite image that will correspond to one distance unit in world space.
    • Pivot The point in the image where the sprite’s local coordinate system originates (center, top-left, etc).|
    • Filter Mode| Selects how the Texture is filtered when it gets stretched by transformations:
      • Point The Texture becomes blocky up close
      • Bilinear The Texture becomes blurry up close
      • Trilinear Like Bilinear, but the Texture also blurs between the different mip levels
    Thanks !
     
  25. ciporal

    ciporal

    Joined:
    Nov 27, 2014
    Posts:
    3
    Hello beffio, a question

    Can you include in the next ui builder relase the sprites (panels, app, ... all png files) into sprite sheet?
    with the sprite sheet the memory mobile device (for example, windows phone > 150 mb using only cornerpanelradius images) is lower.

    Windows Phone memory analysis - Original without sprite sheet:
    wp_memory_test_original(without_sprite_sheet).jpg

    Windows Phone memory analysis - Modified with sprite sheet:
    wp_memory_test_with_sprite_sheet.jpg

    Can you do it?

    Thank you very much.
     
    Last edited: Mar 20, 2015
  26. _Radagan

    _Radagan

    Joined:
    May 16, 2014
    Posts:
    38
    Hello Beffio. Thank you for some fine assets, but I'm confused in a similar way to Thempus above and I can't seem to get the scaling correct. I'm using a Canvas set to Screen Space - Camera because I have some transition animations.

    The output target is Web Player at 1024x768, but I want to support retina macs as well.

    Do I set my Canvas Scalar at 2048x1536 and use your 1x assets scaled at 0.5? I have the build setting for Web Player then set to 1024x768.

    At least this is what I've got at the moment and it isn't quite working... I just want to confirm that I understand your advice above.
     
  27. mimminito

    mimminito

    Joined:
    Feb 10, 2010
    Posts:
    780
    Hi,

    If you have @1x and @2x assets, then for an iPad you would do the following:
    - @1x Canvas Scaler = 1024x768, Reference Pixels Per Unit = 100
    - @2x Canvas Scaler = 1024x768, Reference Pixels Per Unit = 50

    This is in general for the new uGUI system, if you was designing for iPad.

    Adam
     
  28. beffio

    beffio

    Joined:
    Aug 9, 2014
    Posts:
    143
    @ciporal
    Try to use different sprite tags for sprite sheets(I wrote post before how to manage that). But I will try to make better management on sprite sheets in next update. No problem :).

    Try to use settings like on screenshot below. I highlighted most important things with red stroke. If you will set UI scale mode to "Scale with Screen Size" and you will set reference resolution same as your template - it should works fine. After that your final size will make automatically on the fly.

     
  29. kenshin

    kenshin

    Joined:
    Apr 21, 2010
    Posts:
    940
    Hi,

    your work is really cool!

    Just a question: is there any roadmap about future features/updates?
     
  30. mittense

    mittense

    Joined:
    Jul 25, 2013
    Posts:
    168
    These are excellent.
     
  31. mimminito

    mimminito

    Joined:
    Feb 10, 2010
    Posts:
    780
    All I would say about using retina ipad assets is that on lower end devices they will struggle. I would advise to use standard assets and set your canvas scaler to 1024x768 or have a switching solution to go between the @1x and @2x resolutions.
     
  32. denlee0710

    denlee0710

    Joined:
    Mar 9, 2015
    Posts:
    36
    Hi Beffio,

    I did a quick test:

    1) I build my game without any UI Builder assets -> 25515kb
    2) I build my game adding one 1x icon, MediaIcon_1 -> 25658kb
    3) I remove the packing tag on the import setting of MediaIcon_1 -> 25517kb

    It does look like if you have a packing tag attached, the builder will pack the entire sheet with all the sprites in it.
     
  33. _Radagan

    _Radagan

    Joined:
    May 16, 2014
    Posts:
    38
    Hi Beffio,

    Thank you for your advice. I made the adjustments as you suggested, and everything looks good with one big exception. When I set the scale of input field prefabs from your asset to 1.0, they appear the correct size, but the input carrot and font is about half what it should be and positioned incorrectly. I'm using input field_11.

    Any ideas?
     
  34. beffio

    beffio

    Joined:
    Aug 9, 2014
    Posts:
    143
    Hi there,

    Yes you're right. Remove tags and rebuild your atlas it should work correctly.

    Yes there is some bug with Input Carrot. Check video below to with tutorial how to fix it. I will try to fix that in next release.

    Input Carrot Tutorial

    Regarding to roadmap I will try to share with you some roadmap soon.

    Cheers,
    Tom Lassota
     
  35. ciporal

    ciporal

    Joined:
    Nov 27, 2014
    Posts:
    3
    Hi @beffio,

    I would ask for your new asset "One minute gui", is it only supported by tablets? how much will it cost?

    And about UI Builder, what improvements and innovations will bring the next version? and its release date?

    Thanks, great work!!
     
  36. beffio

    beffio

    Joined:
    Aug 9, 2014
    Posts:
    143
    New asset will be supported for all platforms. It will cost 19.99$.

    Regarding to your question about UI - Builder Imporvments.

    - New Example Scene with Separated app & game examples. You will be able to easy learn how to to set your final build from that scenes.
    - Added hover and pressed Animations & Transitions
    - Fixed issue with too big sliced borders
    - Added new Screen Sizes for PC
    - Optimized all sprites and fonts for better memory management
    - Updated Documentation
    - Fixed Input Carots wrong positions
     
    ciporal likes this.
  37. ciporal

    ciporal

    Joined:
    Nov 27, 2014
    Posts:
    3
    Hi Tom,

    This is great news. The memory management is critical in mobile applications and now it is difficult to work with UI Builder without these improvements because of that I would like to know when the update is ready to be released in asset store?


    Thanks for your reply.
     
  38. EmeralLotus

    EmeralLotus

    Joined:
    Aug 10, 2012
    Posts:
    1,459
    Great looking project. The video is very slick.
    Do you have an example of some of the games and more complicated gui components running in a webplayer. This way I can test it out.

    Cheers.
     
  39. beffio

    beffio

    Joined:
    Aug 9, 2014
    Posts:
    143
    Hi there,

    Update 1.2 is Live!
    • Unity5 Ready
    • New Example Scene with Separated Apps & Game Examples. You will be able to easy learn how to to set your nal build from that scenes.
    • Added 10+ Animations (Hover&Pressed, Bubbles, Dynamic Info Animations)
    • Fixed too big sliced borders » Fixed Input Carots wrong positions
    • Added App & Games Examples for Desktop (Full HD Resolution)
    • New Solution for all sprites and fonts for better memory & draw call management
    • Updated Documentation with tips how to manage your memory and sprites qualtiy.



    Enjoy!
     
    arumiat and denlee0710 like this.
  40. TokyoDan

    TokyoDan

    Joined:
    Jun 16, 2012
    Posts:
    1,080
    Hello. I recently bought One Minute GUI and struggled through your PDF tutorial which is full of mistakes and omissions. Anyway How can I pull out and use just one of the virtual joystick control.
     
  41. beffio

    beffio

    Joined:
    Aug 9, 2014
    Posts:
    143
    Hi there,

    I answered for all your problems thought mail. Check your inbox. I'm glad yo help but but in future please explain more detailed what you like and what don't. Then I will be able to fix all things that you think could be improved.

    PS: This is not One Minute GUI thread

    Thanks.
    Tom
     
  42. TokyoDan

    TokyoDan

    Joined:
    Jun 16, 2012
    Posts:
    1,080
    For one thing the highlighted areas in the PDF are often highlighting the wrong settings. Please go back and check it step by step by yourself. And I searched in this forum for a One Minute GUI thread and this thread is the only one that came up. And I see in your email that you answered my question and that you will not be able to fix my problem as the basic functionality of the joystick is not even there.
     
  43. kenshin

    kenshin

    Joined:
    Apr 21, 2010
    Posts:
    940
    @beffio I sent you a PM with a request.
    Please check it :)
     
  44. Knertified

    Knertified

    Joined:
    Jul 3, 2012
    Posts:
    31
    Why on the Unity Asset Store it says I must upgrade to Unity 5 to download this asset when the thread topic says Unity 4.6? Also, can you explain the difference between this product and your "One Minute GUI" product? Thanks
     
  45. beffio

    beffio

    Joined:
    Aug 9, 2014
    Posts:
    143
    Fixed. Actually if you need version for 4.6 contact be using form beffio.com/contact I will provide you with such version (it could not have all feature from last one but it will have most important features).

    Tom
     
  46. VISIONSBOX

    VISIONSBOX

    Joined:
    Nov 7, 2014
    Posts:
    14
    It would be great to have a pdf or image, to quickly identify the prefab name of a specific type of example button. During prototyping this would make it a lot easier finding the right prefab without loading the demo scene…
     
  47. aer0ace

    aer0ace

    Joined:
    May 11, 2012
    Posts:
    1,513
    As this asset is on sale right now, I was considering purchasing it. I am an NGUI user. Is there a documented process to how this asset works with NGUI? Or is it possible to begin with?
     
  48. zhuchun

    zhuchun

    Joined:
    Aug 11, 2012
    Posts:
    433
    Hi, before purchase I'd like to know how is its quality? I bought lots of assets before and they're blurry when you scale them. Another question is how often will you update more elements? Thanks
     
  49. blockimperium

    blockimperium

    Joined:
    Jan 21, 2008
    Posts:
    452
    Been tracking this UI Kit for a while and I think I may be able to fit it into the budget. But I'm curious about how well it scales across multiple resolutions (i.e. 4k/1080p/mobile crazy rez's).
     
  50. beffio

    beffio

    Joined:
    Aug 9, 2014
    Posts:
    143
    I will try to add this in next release.

    We're porting right now this asset into nGUI. We will sell it separately. It will take a lot of time to port it, because nGUI has totally different work-flow.


    We've provided 3 sizes (@1x @2x & @3x) for each sprite, icons, panels and all other stuff. First size is for devices with something around 1024x768~ resolution. Second size is for retina sizes 2048x1532~ & latest one for 4k devices. So if you need to have good crispy image you can easily change each element.

    Also all that images that you can use for creating panels, windows, bubble etc are sliced. This mean that they will never loose quality.

    Every image in this project was carefully crafted to be pixel perfect but of course there could be some problems on devices that got strange resolution. It has to be tested.

    As we wrote in previous comment. We provided all elements in 3 different resolution. Thats why it took so much time to create it. There is something around 1k+ sliced sprites, icons etc in three sizes. Also We have added source images in vectors created in Illustrator & Photoshop - so if you will need something really specific you can easily export that elements from that program.