Color Theme Editor for C2 - release 4 [COMPLETE]

  • This is amazing.

    Cannot wait to try this out.

    Great work

  • I appreciate the effort Unfortunately my screen is 1920x1080 (As I use a TV monitor, which works quite well as a PC monitor.)

    Photo of it here: http://i.imgur.com/FVi5K2i.jpg

    Here's a photo of how much you can see whether or not it's fullscreened: http://i.imgur.com/yL8yIwr.png

    I really don't want you to do any more work than you have to, but just letting you know about these sort of issues; although they may happen to not many

  • TabloidA Probably just your TV doing some weird resolution upscale trick, on normal screens if fits in 1920x1080 and doesn't look this aliased

  • No worries TabloidA,

    I want to figure out a way to make this work for you, if I can.

    So I did some comparisons to your screenshot, and for some reason the whole program is being scaled up by exactly 1.5x. I'm not sure why. Initially I thought it might be a "Device Pixel Ratio" (DPR) related thing, where the hardware scales all web content by a fixed amount. I've never heard of DPR on a TV before though, usually it's a tablet and smartphone thing, as far as I know.

    As I was writing up that above paragraph I realized that you also had a picture of the TV showing the edit-post page from the Scirra website. So I figured, if I can perspective crop that image and scale it up to 1920x1080, then I can compare it to the same edit-post page on my computer, to see if the Scirra website is also getting scaled up. So I did, and it was, by exactly 1.5 again. Since the Scirra website is also getting scaled up by 1.5, whatever is going on doesn't seem to be unique to the theme editor.

    Now the weird thing is that I don't think your TV is doing the scaling, because in your screenshot, the vector fonts all look super sharp, and so your computer is sending a legit 1920x1080 display feed to your TV, and it looks like it's your computer that's doing the 1.5x scaling. The fact that the fonts are scaled up, but still rendered at native screen-pixel resolution, seems to indicate that web content is being told to render larger at a software level, rather than the display feed being scaled up as pixel data.

    Though I'm not sure if your computer is doing the scaling because there's just a system setting forcing it to, or if it's because the TV is telling the computer it should use a 1.5-DPR when rendering web content. And of course C2 programs are all HTML5-based, so they all count as web content as far as devices that use DPR are concerned.

    That said, I'm working on some features in the upcoming version of the theme editor (r3) that may provide a workaround, in case there's no way to change the scaling factor for your setup.

    I should have r3 up later today.

  • Update - Release 3

    New features:

    * Click directly on the live preview area to select an element for editing. (Middle click to toggle selection view now.)

    * Undo-Redo system with 1000 states.

    * Move swatch selection with arrow keys. (So you can keep the mouse over the color picker while changing swatches.)

    * Gradient tool, lets you make a gradient between any two colors for use as a custom color picker.

    * Custom color swatches, for temporarily storing relevant colors separately from the theme swatch list.

    * Fullscreen mode.

    * Buttons and edit box use dark colors to better fit the overall UI scheme, and reduce unnecessary contrast.

    * Other UI details refined: e.g. Each group of buttons now have a unified highlight color.

    * Added faint white grid lines to pickers for visibility in dark regions.

    * Added a console to aid with diagnostics when troubleshooting, and to provide special features accessed via commands.

    * Fix: Preview image no longer saves with gray flecks at the corners.

    Downloads

    (see first post for latest release)

    (update: "C2 themes - Fisholith bundle v1" is now included.)

    (click to enlarge)

    Gradient picker

    Right click on the left or right side of the gradient to set the current color as an edge-color for the gradient.

    Likewise while performing any color picking action you can hold "<" or ">" keys or "A" or "S" keys to set the left and right gradient colors. By any color picking action I mean anything action that sets the color of a swatch, so a left-click in a color picker or a right-click anywhere on the screen will both work. (e.g. If you right click a color in the preview area while holding the "A" key, it will be set as the left edge color for the gradient.)

    Console

    Open the console with the F5 key.

    Enter a command name, followed by a comma and arguments if any.

    Commands are listed below.

    showDisplayStats

    Shows info about the monitor and Device Pixel Ratio (DPR).

    scroll

    Toggles free camera scrolling over the UI for monitor accessibility issues. Use {U,H,J,K} keys to move camera.

    scale , <scaleFactor>

    Scales the entire UI by the given scale factor.

    e.g. "scale , 2" will scale the UI up by 2x.

    unscale , <inverseScaleFactor>

    Scales the entire UI by 1 divided by the given scale factor.

    This is handy if you know your computer is scaling up by a factor, and you want to undo that scaling.

    e.g. "unscale , 2" will scale the UI down by 1/2x or 0.5x.

    e.g. "unscale , 1.5" will scale the UI back to normal if your computer is already scaling it up by 1.5x.

    UI Scaling (edit)

    Hey TabloidA, I added some features specifically to try to solve the screen scaling issue you're having with your monitor.

    Use F5 to open the console, and type "showDisplayStats" (without quotes) and hit enter. (You may need to click back in the text field before hitting enter, it's finicky about focus sometimes.)

    Anyway, you should get a popup showing some display stats. If you can tell me the value given for Device Pixel Ratio, that might help determine if DPR is related somehow.

    After that, you can try the command "unscale , 1.5" (without quotes), to see if that shrinks the program from the mysterious 1.5x overscale back to the correct size.

    If all else fails, for the time being the "scroll" command might help, as it allows you to scroll your view around the interface.

  • Nice work on the element picker, works perfectly =)

  • Awesome, good to hear lemo.

    Sorry for taking a while to reply to your last few posts.

    I actually did end up implementing the click to select feature using the method I described back in my looooong post.

    There is an invisible image (idMap) sitting over the preview with different colors representing different elements. When you click on an element, you're really sampling a color from that idMap, and the color is just a shade of red wherein the value of the red is an ID number. Every element has an associated ID number, and so you just use the ID to look up the corresponding element. This means that I can control exactly which element is selected for any pixel clicked. This is handy because some elements, like boarders, would be really hard to click on, if you had to click exactly on them, as they're 1 pixel wide lines. So I can artificially fatten the clickable ID zones for boarders in the idMap image, to make them easier to click. Likewise for text, I can just use solid bounding boxes for their ID zones, so you don't have to worry about clicking inside an "o" or something.

    Going back to your prior post,

    I hadn't actually considered making the color picker it's own plugin, but that could definitely be handy.

    I did build a color utility plugin though, to simplify a lot of the math and conversions I didn't want to be doing over and over in events. A color utility/math plugin was something that I'd been interested in making for quite a while, and this was as good a time as any to finally start on that. :)

    My most recent game-jam game, Down Ward, has a customizable palette system, and I almost started working on a color math plugin for that, but it was probably for the best that I ended up waiting until I was working on a project that revolved entirely around color, before settling on an approach to designing the plugin. (There should probably be another period in there somewhere, but I'm too tired to figure out where to put it, so I'm just going to leave some extras here ...)

    An infinite scrolling strip probably is the best way to get it small, while preserving the all-hues-pickable characteristic I was interested in. Another possibility might be to show the entire hue strip square when clicking and dragging, but then only show the current band when un-clicked.

    Anyway, thanks as always for the feedback. :)

  • That works wonderfully! Thanks for sticking through with me on this

    Very much appreciated

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Here's ConstructMonokai v1.0:

    First one is non-selected. Second one is selected. Will post an XML file soon.

    http://imgur.com/a/xpnNN

    EDIT: Works/looks best with View Style "Visual Studio 2012 Dark"

  • Hey TabloidA,

    Happy to hear the scaling system seems to be helping out.

    Looks like the preview image saving system may need some additional math, to work correctly with a scaled screen, but I think I can figure that out.

    Oh, did you get a chance to try out the console command "showDisplayStats"? I'd be curious what the editor thinks the DPR and window dimensions are. If there's a DPR of 1.5, that may be the culprit. Though if it's 1.0, then something else is going on.

    Also, very cool looking theme you put together. I look forward to trying it out.

  • Bundle of 25 themes

    I just put together a bundle of all the themes I've created with my theme editor so far.

    There are 25 themes, about 20 unique themes, with a few of them accompanied by additional variations.

    There are previews of all of them below. For each theme preview, there are two images, showing the base colors and the selection colors.

    This bundle includes a few updates and redesigns of some of my previously posted themes.

    So, I recommend that if you have any of my previous themes installed, delete them before installing this bundle.

    All my themes have filenames beginning with "fi_", which should make them easy to find and remove.

    As always, all feedback and suggestions are welcome.

    Download

    (See first post for latest release. Newer bundle now included in download.)

    Where to install them

    On Win7, xml theme files are placed in this path:

    "Program Files\Construct 2\themes"

    You don't have to restart C2 to test new themes, but you do have to close event sheets and reopen them to see the theme change take full effect.

    Theme previews

    Click any image to see a full-sized version.

    fi_AmigaWB

    fi_Autumn

    fi_Clean

    fi_CleanGallium

    fi_Felt

    fi_Flat

    fi_Gallium

    fi_Hydrogen

    fi_Hydrogen_selC2

    fi_Marble

    fi_NeonPhoenix

    fi_NightSky

    fi_RedTail

    fi_RedTail_selPink

    fi_Sandy

    fi_ScirraSite

    fi_ScirraSite_selOrange

    fi_SeaNav

    fi_SedonaCandyShop

    fi_SlateAzure

    fi_SlateIndigo

    fi_SlateNixie

    fi_SlateNixie_OliveAccent

    fi_SlateNixie_VioletAccent

    fi_SpruceWoods

  • NICE!!!!!!!!!!! Thank you

  • Hi ! Thank you for this very nice tool! I think I would never have made a theme without it.

  • Thanks ALLMarkMade! If you make a theme you'd like to share, feel free to post it here, or in the Share your C2 themes thread.

    Hey Bro7hers, glad to hear it.

    I replied to your post in the other thread, and made some preview images of your theme, which looks pretty cool by the way.

  • fisholith Yes I saw that quickly the other day, thank you!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)