Hi everyone, :)

If anyone is interested, I just built a tool for editing C2 color themes.

I still have some features to add, but if you want to try it out, you can get it from the WIP post I just made for it:

Color Theme Editor for C2

Screenshot

Themes

I also have two themes to post. :)

fi_Clean.xml

This is the theme that I currently use. It's very close to the default C2 theme, but the colors of comments and variables are a little lighter and softer, and so they don't break up the event sheet as much, which I find makes it easier to scan over events. Variables are a little less yellow-green.

The other main difference is that comment text is tinted instead of solid black, which I find makes it much easier to visually separate comment text from event text at a glance. This makes it easier for me to scan just comments or just events. When everything is the same color it just looks a little visually cluttered to me, though I might just be used to other IDEs where comments are often colored differently from the code.

Also the insert marker is neon pink, because no one can stop me. (Actually also just for visual clarity. Nothing else is that color.)

(Left image is "fi_Clean", right image is the default C2 theme for comparison)

fi_Autumn.xml

This is one of a few test themes that I created with my theme editor tool. There are others at the WIP link above, but having not had much time to test them out yet, this one seems the most practical at a glance, as well as being strangely pleasant. :)

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

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.

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

Showing a custom dark theme

Clicking on the preview toggles normal vs selection colors

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

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

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.

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

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

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

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

All feedback is welcome.

Hi all,

I've noticed that even though you can make custom color themes for C2, it's kind of hard to quickly create and test color themes with the built-in theme editor.

So I decided to try making a program to make theme creation easier and more visual.

My theme editor application is built entirely in C2.

(Note: You may need to right-click images to view full size.)

Showing the C2 Default theme

Showing a custom dark theme I made as a test

Hopefully I'll have time to put together a proper thread post for the program soon.

Strangely, this is my first post here.

In hindsight I can't believe I've never posted in this sub-forum before.

I'm not sure why but it just kind of never occurred to me that I could. Derp :]

Wow okay, I think I can actually stay logged in for real this time.

Thanks for the information.

Sorry for the delayed response. I kept getting taken to the login page after every button click or page change, and couldn't get to any part of the forum interface that would let me post without asking me to log in again. This is the 3rd time I've typed this message up.

I checked the "Keep me logged in" box last time, so here's hoping it posts this time.

[update]

Okay it worked.

Maybe something is set up weird in my browser because if "Keep me logged in" is unchecked on this site's login page, it goes into "log me out the instant I do anything" mode.

Yeah, I figured the drawGL() thing would be hilariously awful.

I'm not quite sure if I follow how pretick is the closest to the snapshot, unless you mean, it's the closest to a snapshot taken on the prior tick, in which case I think I understand.

At the moment I'm triggering a condition (belonging to my plugin) when the img.onload() function runs. This means that I get to act as soon as the color info is available, but outside of that triggered condition, I can't guarantee that the image has been loaded yet.

So, is the boolean you're talking about part of a system that would make the color info accessible from regular non-triggered events? That is, as soon as the boolean is true, then the data would be stored during the very next pretick and, by the time the event sheet code runs, you know you can trust the image data?

Finally I'm also not sure if I understand the reason for setting the runtime redraw to true. Would that indicate to C2 that the scene need to be redrawn during the next render phase?

All that said, with your help so far, I've gotten a system that does allow me to pick any color on the screen as it appears after shaders are applied, which is really handy, so thanks.

My main plan was to use it as part of a color picking UI. Fortunately a color picking UI doesn't require thousands of picks per frame-draw or anything, so it's probably okay that it's not super efficient at the moment.

I also just noticed that because my current version of the picking function takes a dataURL as an image parameter, it also works with Pode's base64 image extractor and injector. Though again, that extracts and injects underneath the shading pass, but it's a cool discovery none the less.

The tick2() suggestion sounds like it could be pretty cool, but I actually just started looking through the "preview.js" file, and I'm not sure if tick2() will work. Though I could be misinterpreting what I found.

In preview.js I regex searched for

tick\w*\(

to find all the different tick types.

I found the various tick calls inside the logic() function declaration:

// Process application logic
Runtime.prototype.logic = function (cur_time) [/code:34pbx0dk]
pretick() "// Tick objects-to-pre-tick"
tick() "// Tick behaviors"
posttick() "// Call posttick on behaviors"
tick() "// Tick objects-to-tick"
run() "// If the running layout has an event sheet, run it"
tick2() "// Post-event ticking (tick2)" [Looks to tick behaviors]
tick2() "// Tick objects-to-tick2"
[i](The comments are taken from preview.js and precede the respective tick calls.)[/i]

The logic() function is called from within a [i]different[/i] runtime tick() function, not to be confused with the object tick() function above.
[code:34pbx0dk]Runtime.prototype.tick = function (background_wake, timestamp, debug_step)[/code:34pbx0dk][i](Note this is a function also named "tick" but it belongs to the runtime, where all the tick() functions called inside the logic() function belong to objects or behaviors.)[/i]

Within this runtime tick() function, logic() is called, and afterwards draw() and drawGL() are called, and after that the snapshot canvas code runs.

So I think the canvas may not get redrawn until after all of the various object tick calls are completed, and the logic() function exits. Would this matter? I'm not sure if there's a reason I wouldn't just get the canvas result from the previous drawGL call, unless it's been erased by the time the tick code runs.

[b][update][/b]
I had a weird and possibly terrible idea. Could I force the canvas to redraw from within the plugin by calling draw() or drawGL()? That seems like it could work, but also be really bad if put inside a loop in the event sheet.

Fortunately I've run into the disembodied "this" issue before, so I think I set that up correctly, but it's good to know I wasn't being paranoid. That said, I did set it up wrong the very first time. <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile">

img.src always blank

Within the onload() function, I set up an alert() to print out the image URL that was being assigned to img.src. The src was always a base64 image string of a blank canvas with a size matching the game's window dimensions. For some reason, I'm just never getting anything but a blank image from:

this.runtime.canvas.toDataURL("image/png")

I was able to use this base64 image decoder to see what exactly was stored in the base64 image text.

http://codebeautify.org/base64-to-image-converter

Workaround

So with some experimenting I may have found a workaround that allows me to get legitimate pixel color values.

Rather than trying to capture the canvas inside my Action function, I'm instead passing one extra parameter to the action, an Image URL, so I can simply pass C2's System CanvasSnapshot URL variable to my Action.

This guarantees that the URL contains an actual image. And it seems to work, so far. I'm actually getting correct color data. Ultimately I would like to be able to capture the game canvas entirely from within my plugin, but I don't know if there's a way to ensure that the capture is timed and sequenced correctly so that I actually get an image.

Capturing from within my plugin?

Do you have any ideas on what might be going wrong with capturing the canvas from within my plugin? You mentioned waiting for the image load trigger. Are you talking about waiting for a trigger related to the game canvas itself? It looks like when this.runtime.canvas.toDataURL("image/png") is used from within my plugin, the URL returned is a text representation of a large blank image matching the game window size. If there is a way to wait for it to contain image data that would be cool.

My current code

Instance vars.

instanceProto.onCreate = function()
{
	// Captured pixel.
	this.pixelCap = []; // Will be filled by a getImageData() call.
	this.pixelCapX = 0; // Coord of captured pixel.
	this.pixelCapY = 0; // Coord of captured pixel.
};[/code:2lbr1k2g]

Action.
[code:2lbr1k2g]Acts.prototype.pixelCap = function ( posX , posY , dataURL )
{
	var img = new Image();
	var self = this;

	img.onload = function ()
	{
		// Make temp canvas, and draw image data into it.
		var canvas = document.createElement('canvas');
		canvas.width = img.width;
		canvas.height = img.height;
		var ctx = canvas.getContext('2d');
		ctx.drawImage(img,0,0); // Paste image starting at coord (0,0).

		// Save pixel data.
		self.pixelCap = ctx.getImageData( posX , posY , 1 , 1 ); // Save to instance var.
		self.pixelCapX = posX;
		self.pixelCapY = posY;

		// Trigger notice of completion.
		self.runtime.trigger(cr.plugins_.fi_color.prototype.cnds.onCapturedPixel, self);
	}

	img["crossOrigin"] = "anonymous";
	img.src = dataURL;
};[/code:2lbr1k2g]

Condition triggered from the onload in the Action code above.
[code:2lbr1k2g]Cnds.prototype.onCapturedPixel = function () // REMEMBER: These params are C2 event sheet params.
{
	return   true;
};[/code:2lbr1k2g]

The Expression that retrieves the Red value of the pixel.
[code:2lbr1k2g]Exps.prototype.cpR = function ( ret )
{
	ret.set_float(   this.pixelCap.data[ 0 ]   );
};[/code:2lbr1k2g]

At the moment I have an action that captures a pixel to a plugin instance variable.

It sets the onload() callback, and sets the img.src.

When the onload() callback runs it grabs a pixel out of the image data at the coords passed to the action function.

Speaking of which, now that I think of it, I should try printing the coords from within the onload() function to see if they are the correct values or undefined, as the action function scope is gone when onload() runs. Maybe that's the issue, and so I need to store the coords in a plugin instance variable.

That's the point at which everything I print out is (0,0,0,255).

So within the onload() I save the pixel data to a plugin instance variable, and then trigger a C2 plugin condition to indicate that the load is complete, and is ready for use.

From there I can use an expression to get the R, G, or B values. Or at least I could if they weren't all 0.

I'll post my code for the action condition and expression in a little bit, in an update.

Thanks again for all the extra info and clarification.

Wow, thanks R0J0hound, that's super helpful.

Sprite loadURL code

I just looked up the Sprite's loadURL code.

I see what look like 4 parts to the code.

1. Declare some variables, including the image "img". [3 lines]

2. Assign an onload() function. [a bunch of lines]

3. An if-statement that checks stuff about the "url_". [2 lines]

4. Finally "img.src = url_;". [1 line]

So does that final assignment in part 4 "img.src = url_;" trigger the onload() function assigned in part 2? Or rather, does the completion of loading that newly assigned URL trigger it?

Because otherwise I'm not sure where the loading of the image is happening.

If that's the case, I may understand what's going on in your code. I think the assignment of that onload() function just threw me a bit, because it looked like nothing explicitly called it. So I'm assuming that again the assignment to img.src sets some behind-the-scenes stuff in motion that ultimately triggers the onload() function.

Possibly realized my in-event color picking troubles

As an added bonus, when looking through the Sprite's loadURL code, I may have figured out why my previous in-event attempts to pick colors acted so finicky. I think I was waiting till the screenshot was taken, via the triggered event, but I wasn't waiting until after I was done loading it into a sprite, via the sprite's triggered event.

I've been trying to pick the post-webgl colors out of the 3rd party Canvas plugin by saving a screenshot with the System action, loading the screenshot into a Sprite, and then pasting that screenshot Sprite into a Canvas plugin, so I can pick it's colors. I keep forgetting that every image loading step is going to be asynchronous, not just the screenshot.

Some questions about your code example

Will the "canvas.getContext('2d');" in your first code example work if webgl is enabled?

Or does that not matter because, once inside the onload() function, we're dealing with our own custom canvas for the screencap, rather than C2's game canvas?

Thoughts on readpixels

The "working only on frame one" thing might be because of how buffer clearing works when using webgl with preserveDrawingBuffer set to false, which I assume it is for C2 for performance reasons. Not sure though.

At the second link you posted one of the comments seems to indicate that it might be possible to get data from the buffer after it's drawn but before it's handed to the compositor and cleared. Granted that would require inserting code into C2's runtime I gather, which is probably not the direction I should be going. Of course I could be totally wrong about all of the above, I'm just trying to follow along.

[update]

So I set up the plugin and implemented the example code, but I'm always getting [ 0 , 0 , 0 , 255 ] as the pixel values regardless of the coordinates I use. I'm using an alert() to print the pixel directly out of the onload() function, right after the call to ctx.getImageData().

Still working on figuring out what's going on, but I'm open to any suggestions.

Do I maybe need to wait for some aspect of the C2 canvas to load before passing it to "img.src"?

Hey ConstructorRichi, <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile">

I made my own modified version of the SDK template files, with some extra information comments, and a more graphical style of divider comments to break up and mark the different sections of code.

I'm planning on making a tutorial to go along with my modified version of the SDK at some point, but I can upload a copy for you to take a look at now in case it might help. <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile">

https://dl.dropboxusercontent.com/u/382 ... mplate.zip

You may alraedy know this, but the one really important step in creating a plugin is to make sure the "id" value you choose for the edittime.js file, matches two spots in the runtime.js file.

In my SDK mod the places that must match are marked in both files with the following placeholder text:

XXXXXXXXXXXXXXXX_MyPluginID_XXXXXXXXXXXXXXXX

(Note the "ID" in the placeholder text.)

edittime.js

(Note the first placeholder is for the NAME, not the ID. Only the ID has to match between files.)

//╔════════════════════════════════════════════════════════════════════════════╗
//â•‘///////////////////////////////   Settings   ///////////////////////////////â•‘
//╚════════════════════════════════════════════════════════════════════════════╝
function GetPluginSettings()
{
	return {
		"name":			"XXXXXXXXXXXXXXXX_MyPluginName_XXXXXXXXXXXXXXXX",
		"id":			"XXXXXXXXXXXXXXXX_MyPluginID_XXXXXXXXXXXXXXXX",[/code:28nntpg6]
		
[b]runtime.js[/b]
[i](You may need to scroll down a little to see both placeholder spots.)[/i]
[code:28nntpg6]//╔════════════════════════════════════════════════════════════════════════════╗
//â•‘/////////////////////////////   Plugin class   /////////////////////////////â•‘
//╚════════════════════════════════════════════════════════════════════════════╝

//----------------------------------------------------------------
// *** CHANGE THE PLUGIN ID HERE *** - must match the "id" property in edittime.js
//          vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
cr.plugins_.XXXXXXXXXXXXXXXX_MyPluginID_XXXXXXXXXXXXXXXX = function(runtime)
{
	this.runtime = runtime;
};

//----------------------------------------------------------------
(function ()
{
	/////////////////////////////////////
	// *** CHANGE THE PLUGIN ID HERE *** - must match the "id" property in edittime.js
	//                            vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
	var pluginProto = cr.plugins_.XXXXXXXXXXXXXXXX_MyPluginID_XXXXXXXXXXXXXXXX.prototype;[/code:28nntpg6]

[b]C2 plugin video tutorial - by John Velojet[/b]
I found this nice walk-through for setting up a super simple plugin from start to finish. 
[youtube video="ZlgJ4ts00C4"]
[i](This is actually the first tutorial I use to make a working plugin, back when I started looking into making plugins.)[/i]

Okay, I've done some digging through the C2 js files, but I'm having trouble finding the point at which any image data is actually encountered.

C2 snapshot code

The Action in system.js calls "doCanvasSnapshot()"

[system.js , line 1913]

SysActs.prototype.SnapshotCanvas = function (format_, quality_)
{
	this.runtime.doCanvasSnapshot(format_ === 0 ? "image/png" : "image/jpeg", quality_ / 100);
}; [/code:355ixjpx]

"doCanvasSnapshot()" is called in system.js, and seems to be declared in preview.js ... maybe?
I'm not especially familiar with the setup of the HTML5 canvas in C2, or in general. So I suspect there are probably some conventions I'm not recognizing.
[preview.js , line 5043]
[code:355ixjpx]Runtime.prototype.doCanvasSnapshot = function (format_, quality_)
{
	this.snapshotCanvas = [format_, quality_];
	this.redraw = true;		// force redraw so snapshot is always taken
}; [/code:355ixjpx]

I found a spot in the tick code that seems to be involved with the snapshot process, and uses "this.snapshotCanvas" , but it seems like it's arranging for the snapshot data to be available to some other system somewhere, rather than handling image data itself.
[preview.js , line 2346]
[code:355ixjpx]// Snapshot the canvas if enabled
if (this.snapshotCanvas)
{
	if (this.canvas && this.canvas.toDataURL)
	{
		this.snapshotData = this.canvas.toDataURL(this.snapshotCanvas[0], this.snapshotCanvas[1]);
		
		if (window["cr_onSnapshot"])
			window["cr_onSnapshot"](this.snapshotData);
		
		this.trigger(cr.system_object.prototype.cnds.OnCanvasSnapshot, null);
	}
		
	this.snapshotCanvas = null;
} [/code:355ixjpx]

The only other place I'm even seeing the word snapshot come up is in an assignment to an array named "window".
I have no idea what's going on here. Is this some kind of variable function callback thing?
[preview.js , line 6061]
[code:355ixjpx]window["cr_getSnapshot"] = function (format_, quality_)
{
	var runtime = window["cr_getC2Runtime"]();
	
	if (runtime)
		runtime.doCanvasSnapshot(format_, quality_);
} [/code:355ixjpx]

[b]My thoughts so far[/b]
So I'm starting to suspect that the image data saved by the snapshot action is setup inside code much closer to the actual drawing of the main canvas, and the snapshot action just flags it to be saved to a variable for later use. I could be completely wrong though, as I'm not quite sure what I'm looking at.

All that said, I'm not sure if I really need to get at the snapshot code in the first place. I was going to take a look at it just to get an idea of how to pick a color from the final rendered scene, though I don't know if that's the direction I should be going, or if there's a better way to get at the color data.

Any suggestions are still welcome. I'm still not quite clear on how to access the canvas from within the SDK.

Thanks for the reply rexrainbow,

I'm familiar with that aspect of the third party Canvas plugin. I meant the HTML5 canvas that C2 renders the game into. Apologies, I should have been more specific in my first post. I think (though I may be wrong) R0J0hound's code I linked to in the first post samples C2's main HTML5 canvas directly.

I was also thinking that since C2 can store a screencap of the canvas that includes applied shaders, would it be better to try to use an approach related to that screencap mechanism to get the post shader colors?

I've been trying to get a simple method for picking screen colors for a while and all the event-and-object approaches I've tried end up being kind of fiddly, especially when it comes to capturing post shader colors.

[edit] Oh, hey R0J0hound, I think you just posted right before I did.

I have to head out briefly, but I'll be able to reply shortly. Thanks for the info.

[edit 2] Thanks for the info, and the suggestion R0J0hound, I'll take a look at the screencap action code.