Color Theme Editor for C2 - release 4 [COMPLETE]

Show us your works in progress and request feedback

Post » Wed Apr 20, 2016 11:51 am

Update - Release 4
New features:
* Preview selection colors now finally include the Condition and Action selection borders.
* New scrollable embedded help with information on controls, interface, workflow, examples, and more. (M-Click to toggle XML view)
* Color hue name display, shows name of nearest Primary, Secondary, Tertiary, or Quaternary color, for a total of 24 names evenly spaced around the color wheel.
* Color Hue preview bar has a variety of display styles. (hover and Mouse Wheel to change style.)
* Color Hue preview bar styles with variant hues or hue gradients can be right clicked to adjust the current Hue. This is handy for uniformly rotating the hue of several elements in quick succession.
* Added optional toggleable Hue Zone modifiers. Press "W" to display the hue strips as separated bars. Press "Q" for partial desaturation.
* 15 new themes come with the download, combined with the prior 25, for a total of 40 themes in all, including some variations.
* Various bug fixes, and optimizations.
* Happy Valentines Day, all. :
)

Download
ThemeEditor_r4_(win64).zip
ThemeEditor_r4_(win32).zip

Themes Bundle - Fisholith Themes v2.zip
(This is the Themes bundle, by itself. Note, the Editor downloads include this bundle.)

Theme Editor r4
Image


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.


Image

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.




Update - Release 2
New features:
* C2 Theme Editor can now open xml theme files directly.
* You can now easily save preview images in both normal-color and selection-color modes.
* There's a preview mode switch button right beside the "Save Preview" button on the top bar.
* All buttons now give tool tips when you hover your mouse over them.
* Hex color code text box now applies it's color the instant it's changed to any valid hex code.
* Interface has been rearranged to group some features for clarity.
* Each group has an icon, Palette, XML, Preview, Reset.
* Icon for taskbar and window title added.
* Bunch of small bugs fixed in color updating, and preview display.



Hi all, :)
I built a program to make it easier to quickly create and preview color themes for Construct 2.

C2's themes folder (Win7): "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.

In addition to importing and exporting xml theme files, the theme editor can import and export palette images.
These palette images are regular png files. You can open a palette image and the program will load the theme colors directly out of it just like an xml theme file. One of the benefits of the palette images is that you can edit the colors of a palette image in any paint program, and then re-open it in the editor and export a new XML theme.
... and you can copy and paste hex codes. I like hex codes. :]

Feel free to post any themes you make in this thread.
Or if you think others might be interested in your theme, there's a dedicated Share your C2 themes thread.


Screenshots
Showing the default C2 theme
Image

Showing a custom dark theme
Image

Clicking on the preview toggles normal vs selection colors
Image Image

Clicking on the preview toggles normal vs selection colors on the dark theme
Image Image

Hovering over "Hide" darkens the UI so you can double check the preview colors without the bright color zones flanking it.
Image

Right click the color pick zones to toggle grids.
Middle click them to toggle pips.
On the hue picker the pips indicate primary, secondary, tertiary, and ... "quaternary" colors. :)
Image

Palette images for Default-C2 and Dark themes. (As mentioned above, these are the palette images that the program opens)
Image Image

Color list and preview for the Autumn color theme I made as a test.
Image Image

Also, thanks to @R0J0hound for suggesting looking into the Snapshot Canvas code, when I was trying to get the screenshot functionality of my custom color plugin working. I got it working, and my theme editor makes use of it to support the "pick color from anywhere" feature.



Example Theme files
All themes shown below are included in the main download above, but you can also download them as a separate bundle from the following link.
C2 themes - Fisholith bundle v2.zip

Click any image to see a full-sized version.

fi_AmigaWB
ImageImage

fi_Autumn
ImageImage

fi_Clean
ImageImage

fi_CleanGallium
ImageImage

fi_Felt
ImageImage

fi_Flat
ImageImage

fi_Gallium
ImageImage

fi_Hydrogen
ImageImage

fi_Hydrogen_selC2
ImageImage

fi_Marble
ImageImage

fi_NeonPhoenix
ImageImage

fi_NightSky
ImageImage

fi_RedTail
ImageImage

fi_RedTail_selPink
ImageImage

fi_Sandy
ImageImage

fi_ScirraSite
ImageImage

fi_ScirraSite_selOrange
ImageImage

fi_SeaNav
ImageImage

fi_SedonaCandyShop
ImageImage

fi_SlateAzure
ImageImage

fi_SlateIndigo
ImageImage

fi_SlateNixie
ImageImage

fi_SlateNixie_OliveAccent
ImageImage

fi_SlateNixie_VioletAccent
ImageImage

fi_SpruceWoods
ImageImage



All feedback is welcome. :)
Last edited by fisholith on Sat Jul 01, 2017 8:22 am, edited 28 times in total.
B
26
S
17
G
8
Posts: 323
Reputation: 6,021

Post » Wed Apr 20, 2016 2:11 pm

Thanks. Very usefull tool.
B
34
S
18
G
14
Posts: 17
Reputation: 9,046

Post » Thu Apr 21, 2016 1:29 am

Thanks @Eren, :)
Feel free to post anything you make with it in this thread if you like.
I also added a link to the dedicated Share your C2 themes thread, in the main post.
B
26
S
17
G
8
Posts: 323
Reputation: 6,021

Post » Wed Apr 27, 2016 2:22 pm

Update - Release 2
New features:
* C2 Theme Editor can now open xml theme files directly.
* You can now easily save preview images in both normal-color and selection-color modes.
* There's a preview mode switch button right beside the "Save Preview" button on the top bar.
* All buttons now give tool tips when you hover your mouse over them.
* Hex color code text box now applies it's color the instant it's changed to any valid hex code.
* Interface has been rearranged to group some features for clarity.
* Each group has an icon, Palette, XML, Preview, Reset.
* Icon for taskbar and window title added.
* Bunch of small bugs fixed in color updating, and preview display.

All screenshots and downloads in the first post have been updated.




Downloads
(see first post for latest release)



Updated interface
Across the top you can see the Palette, XML,Preview, and Reset sections.
For more screenshots of the updated UI, see the updated first post.
Image



Themes
Here are some of the themes I've created with it so far.

fi_Gallium.xml
Image
When selected:
Image



fi_Hydrogen.xml
fi_Hydrogen_selC2.xml (same, but uses C2 orange color for selection.)
Image
When selected:
Image
When selected: (fi_Hydrogen_selC2.xml version)
Image



fi_SedonaCandyShop.xml
A weird ice cream looking theme, because why not.
Image
When selected:
Image



fi_AmigaWB.xml
Just for fun I tried making a theme based on the classic Amiga Workbench OS colors.
Google images - Amiga Workbench

The original OS used just 4 colors for the UI, Black, White, Orange, and Blue.
The cursor could use 4 of it's own colors as well, usually Black, Red, Tan, and transparent.
I used the cursor Red color as the insert marker. :)

The version below uses the 4 colors as a base, but has a few shades for differentiation. I tried making the entire theme using only the exact 4 colors, and it's possible, but it's a bit harsh.
(That said, even with the more lax approach to color authenticity taken below, the result isn't exactly a UI design masterpiece.) :)

Image
When selected:
Image
Last edited by fisholith on Thu Feb 16, 2017 10:52 am, edited 1 time in total.
B
26
S
17
G
8
Posts: 323
Reputation: 6,021

Post » Wed Apr 27, 2016 3:43 pm

Looks really good, I like how you went into the detail with the slight background textures and animations
I didn't have any plan to make a theme, but maybe I'll spend some time on one later
How did you make this neat color picker btw?

For suggestions, maybe you could optimize the preview event sheet to show even more types of elements
Or you could either make the window bigger or just have a scroll bar to show more events
Would be perfect if you could click anywhere on the preview and be directed to the matching color option

PS: Maybe you should move this to the Tools/Resources forum
B
21
S
6
G
8
Posts: 328
Reputation: 6,611

Post » Wed Apr 27, 2016 5:15 pm

Looks really good Best one I like is Amiga
B
245
S
39
G
15
Posts: 1,946
Reputation: 40,276

Post » Thu Apr 28, 2016 2:57 pm

I honestly adore this program. And I think the fact that it's built in C2 doubles it's charm! :)
I like giving game advice more than I actually like making games ;)

Image
B
40
S
15
G
3
Posts: 129
Reputation: 4,651

Post » Sun May 01, 2016 1:56 pm

Thanks for the replies and feedback @lemo, @Lordshiva1948 , and @TabloidA , :)

Sorry it took a while to respond, but I wanted to wait until I had time to give more than a superficial reply. I really do appreciate it when anyone takes time to give me any kind of comments or feedback, so thanks again. :)



Lordshiva1948
Lordshiva1948 wrote: Looks really good Best one I like is Amiga

Thanks Lordshiva1948. The Amiga series of computers were pretty awesome, it's amazing how far some of it's influences have spread. Digital music composition is certainly one such area, but interestingly, Construct 2 itself actually has some distant tangential connection to the Amiga as well.

There was an Amiga programming system called AMOS, that had a focus on making multimedia programming (like 2D games) much easier than in traditional languages. The creator of AMOS went on to make a spiritual successor of sorts on the early PC in the mid 90s, and some of the design decisions made in that program laid the foundation for an event-based visual programming concept that was refined through several generations of successor software, but which was ultimately best realized (in my opinion at least) by Scirra, in Construct Classic, and later Construct 2.

Very interesting bio by the way. Happy to have you in the C2 community. :)



TabloidA
TabloidA wrote:I honestly adore this program. And I think the fact that it's built in C2 doubles it's charm! :)

Awe, thanks TabloidA. :3
If you get a chance to make a theme, or have a suggestion for a type of theme, like an idea or a link to an image or something, feel free to post it here.
Actually I hadn't thought about it until now, but it might be kind of fun to try building a theme based on a suggestion.
Anyway, thanks again. Hope to see you around. :)



lemo
lemo wrote:Looks really good, I like how you went into the detail with the slight background textures and animations
I didn't have any plan to make a theme, but maybe I'll spend some time on one later

Hey lemo, thanks for the comments and suggestions. :)
I know my reply is slightly out of chronological order, but if you scroll down I think you'll see why. :)

Feel free to post anything you make here, even if it's just a test theme. I'd love to see anything you come up with.

For suggestions, maybe you could optimize the preview event sheet to show even more types of elements
Or you could either make the window bigger or just have a scroll bar to show more events

All good suggestions. There are certainly some kinds of color contrast problems that are easier to spot in an actual event sheet than in the preview, so I think you're right, that extending the preview might help with that. Though another thing I'd need to bear in mind if, extending the preview, is how much my particular style of laying out events is representative of what other people would see when using the same theme on their event sheets. Basically I wonder how much personal layout style differs between users, and if the best test ultimately is field testing on the users actual event sheets. Even so, I think you're right, that more layout variants would be useful.

I believe at the moment the only event-sheet elements not pictured in the preview, are the Selection boarders for Conditions and Actions, which I should really add in at some point, and the Inactive Group Comment, which ... I would have to change the preview image to add. The thing is, the preview image is actually a bunch of stacked sprites, one for each individually color-able element. And to make that image set I needed to cut apart the whole thing in Photoshop and mask out the different text types and then create from that a bunch of correctly aligned images to stack together and recreate the little event sheet scene. It's definitely not impossible to change it, but it takes a fair amount of effort.

I actually kind of wonder if I could make a special element-extraction theme that a user could apply to their own event sheet, screenshot it, and then load the screenshot into an extractor program to analyze the screenshot and build a custom preview image set from it, or just apply custom theme colors to it directly. That could be cool, but potentially pretty tricky.

Would be perfect if you could click anywhere on the preview and be directed to the matching color option

This I think would be a really good addition, as it would make the element picking a lot faster and more intuitive. I've been trying to think of a way to do this, and the main issue is that I basically need a way to make a per-pixel mapping from the preview zone to a related element. I think I might be able to make an image where each color in the image is an ID number for a related element. I could put the image over the preview area, make it invisible, and then pick colors out of it when the user clicks to get the ID of the element to look up. It's just crazy enough to work/make me crazy implementing it. (... but I totally want to try that.) :)

PS: Maybe you should move this to the Tools/Resources forum


That's a good idea. I'll need to look into that.

How did you make this neat color picker btw?


Uh oh ... you asked about the color picker ...
I apologize for what is to come ... *Solemn gaze*

:]

The color picker is actually based on an idea I've had for a picker for a while, that I'd always wanted to try out.
So I'll explain it in two parts. The design, and the implementation in C2.

Color Picker - Design

I had a few goals in mind when designing it.

Continuous Hue Strip:
(The top rainbow box is the "hue" picker.)
I wanted a hue picker that lets you scrub side to side over any hue. This desire arose from something that bugs me in a lot of pickers. Usually you have a hue picking strip that goes from Red through the rainbow, back to Red. And this means that you can scroll over any color ... except Red. You can't scroll over Red, because it's split at both ends of the strip. So on my picker, for any hue, there's guaranteed to be a place in the picker where that hue has a margin on either side, so you can always scroll over it in either direction while trying to settle on a specific color.

All Possible Hues Pickable:
I wanted a hue picker that lets you pick every possible hue that a 24bit color monitor can display. (24bit color is the standard 8bits-for-Red, 8bits-for-Green, 8bits-for-Blue system.) For instance, from pure Red to pure Yellow, color values go from ( 255, 0, 0 ) to ( 255, 255, 0 ). In this 6th of the color wheel, only the Red value changes, and transitions through 256 values, ranging from 0 to 255. These 256 steps get you 60 degrees around the color wheel, (1/6th of the way).

So going from
Red to Yellow
Yellow, to Green
Green, to Cyan
Cyan, to Blue
Blue, to Magenta
Magenta, to Red
is 6 of those 60 degree spans. (360 degrees around the color wheel). With 6 spans to cover, and 256 steps in each span, that's a 1536 pixel strip. To avoid making a really long color picker strip, I chopped it into the 6 spans mentioned earlier, and since each of those spans can be a 256 pixel strip, with 1 step per pixel, I just stacked them in a square texture that's 256 pixels wide.

Giving me 6 stacked strips that look like this
......
......
......
......
......
......

Now you may have noticed that in my actual picker there are more than 6 strips. There are 12 strips. This goes back to the first design goal, that there are no hues in my picker that are split so that you can't scroll over them. So, for every hue at an edge of my 256 pixel texture, I created one more copy of it, but offset by half a strip length (128 steps or pixels) to bring the split edge hue to the center of the picker.

So now in addition to the 6 original strips,
with Red, Yellow, Green etc at the edges,
......
......
......
......
......
......

I now have 6 halfway offset strips,
with Red, Yellow, Green etc in the center of each strip,
......
......
......
......
......
......


And so I interleaved them together like this:
......
......
......
......
......
......
......
......
......
......
......
......


That's also why if you pick a hue in the left or right-most quarter of the picker square, when you come back to it later (i.e. click back on a palette block later) the hue you picked will always be moved up or down a row to the identical hue on a strip where that hue is located more centrally.


Color Picker - Implementation in C2

This is actually a lot easier to explain.
I use a "Canvas" object (created by @R0J0hound) for my Hue picker (the rainbow square), because I need to be able to get the color under the mouse pointer when the user clicks in it.
I use a regular Sprite for the Saturation-and-Lightness square, which I'll call the "Shade" square. (This is the square below the Hue picker square) The Sprite texture for the Shade square is actually just Red fading into Gray, Black, and White, in the HSL color space.

When the user clicks in the Hue square, the RGB color under the pointer is captured. I use this color to set the RGB of a color overlay effect on the Shade picker square, altering it's natural Red hue to match the hue picked.

When a user clicks in the Shade picker square I just use the X and Y coord inside the square to determine the Saturation and lightness value being picked. The image is just a visual aid for the user, but isn't directly sampled the way the Hue picker is.

I use a custom color math and utility plugin I made to convert the RGB (from the Hue picker) and the Saturation and Lightness values (from the Shade picker) to the chosen RGB values in the final picked color.

The only other tricky thing is converting those RGB values back into Hue square coordinates and Shade square coordinates. Remember when a user clicks on a color, or enters one in the Hex code box, I need to position the color marks in the picker boxes to indicate the resulting color. The Shade square is actually pretty easy, because the coordinates are just the converted Saturation and Lightness values of the RGB color. The Hue square is harder because I basically have to convert a Hue value ranging from 0 to 1 to a location on that weirdly organized 12 strip hue texture I described in the design section. To do that, I used a variety of math shortcuts in a custom math plugin I made a while back. Basically I split the 0 to 1 range into 12 spans (1 for mid section of each of the 12 stacked color strips) and then lerp() it to the right X coordinate and quantize (snap) it to the right Y coordinate.

... and that's the story of how all the universe's landmasses, assorted festive ceremonies, and the color picker were made. :]
Last edited by fisholith on Mon May 09, 2016 6:19 am, edited 1 time in total.
B
26
S
17
G
8
Posts: 323
Reputation: 6,021

Post » Mon May 02, 2016 9:28 am

fisholith AMOS I remember it well. Most of all AMOS and Click & Create got me interested in computers. In them days one had to work hard to do simple thing with any computers. I use to use CLI for my learning and then rest is history. Construct 2 is very well produced and power of it is out of this computer world.
B
245
S
39
G
15
Posts: 1,946
Reputation: 40,276

Post » Tue May 03, 2016 12:36 am

Actually later tonight I'm going to try making a Monokai(a classic code editor theme) theme for Construct 2 when I get the time. I'll post my progress here when I've done a reasonable amount of it. :)
I like giving game advice more than I actually like making games ;)

Image
B
40
S
15
G
3
Posts: 129
Reputation: 4,651

Next

Return to Works in Progress/Feedback Requests

Who is online

Users browsing this forum: No registered users and 0 guests