Color Theme Editor for C2 - release 4 [COMPLETE]

Show us your works in progress and request feedback

Post » Tue May 03, 2016 6:40 am

TabloidA Good for you good luck
B
245
S
39
G
15
Posts: 1,941
Reputation: 40,246

Post » Tue May 03, 2016 4:17 pm

Thanks for the detailed answer, the tech behind the color picker is pretty crazy
Ever thought about releasing it as a standalone plugin for C2?
You could also try a compact version with a single hue strip with "infinite" scroll,
offsetting two sprites when the cursor reaches a border, and/or on mouse wheel
B
21
S
6
G
8
Posts: 328
Reputation: 6,611

Post » Tue May 03, 2016 11:15 pm

The only issue I've been having is that the program doesn't fit my screen perfectly. It could just be the resolution of my monitor, but the top and bottom of the program is cut off.
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 » Wed May 04, 2016 6:19 am

Hey @TabloidA, :)

I made a more compact version of the program for you. I meant to finish it and get it to you earlier, but it turned out to be a bit trickier than I expected.

C2 Theme Editor - r3beta Compact (win32)

The program is normally, 1208 x 952, and this compact version is 1208 x 882, which is just about the absolute smallest I can make it before I'd need to redesign the palette system.

Fortunately, from what you described, it sounds like you're monitor might be 1600 x 900, so the 882 height should fit inside the 900 vertical res.

Now the 882 is the inside-size of the program window, and that doesn't count the exterior windows boarder. So, I also added a full-screen mode that should solve the window boarder problem if there is one.

You toggle full-screen with F1, tilda "~", or slash "/".

In addition, because this version is built from the update I haven't released yet, there are some other new features in it as well.

* XML preview now updates in realtime.
* Undo / Redo system added. (200 levels)
* Arrow keys move the swatch selector around the swatches.
* You can now click directly on the preview to select elements to edit.
(Just remember that not all elements are shown in the preview, namely the action and condition boarders when selected, and the deactivated group comment.)

I haven't bug-tested everything fully, which is why I haven't put out the 3rd release yet, so there may be some issues with this compact version I haven't seen. Feel free to let me know if you encounter any weird behavior.

Let me know if it works okay on your computer. Also, what is your monitor resolution, out of curiosity?
Anyway, hope this helps out. :)

(edit: Oh, also I bundled a bunch of themes I made which you can open as examples. There are also preview images for all of them.)
B
26
S
17
G
8
Posts: 323
Reputation: 6,021

Post » Wed May 04, 2016 8:02 am

Works fine my monitor res is 1920 x 1080
B
245
S
39
G
15
Posts: 1,941
Reputation: 40,246

Post » Wed May 04, 2016 8:09 am

This is amazing.
Cannot wait to try this out.
Great work
B
12
S
4
Posts: 2
Reputation: 902

Post » Wed May 04, 2016 7:46 pm

I appreciate the effort :P 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 :geek:

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 ;)
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 » Thu May 05, 2016 11:33 am

@TabloidA Probably just your TV doing some weird resolution upscale trick, on normal screens if fits in 1920x1080 and doesn't look this aliased
B
21
S
6
G
8
Posts: 328
Reputation: 6,611

Post » Thu May 05, 2016 3:18 pm

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.
B
26
S
17
G
8
Posts: 323
Reputation: 6,021

Post » Fri May 06, 2016 1:56 am

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





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.
Last edited by fisholith on Thu Feb 16, 2017 10:53 am, edited 3 times in total.
B
26
S
17
G
8
Posts: 323
Reputation: 6,021

PreviousNext

Return to Works in Progress/Feedback Requests

Who is online

Users browsing this forum: No registered users and 1 guest