fisholith's Forum Posts

  • Hi Blamitall,

    If I understand correctly, I think you might want the following:

    Set Block1.Y to:

    Block2.Y - ( (Block2.Height /2) + (Block1.Height/2) )

    This adds the radius of B1 and B2, and then subtracts that whole value from the B2.Y.

    Place & move method

    Another handy approach in this kind of situation might be, to use two actions:

    1. B1: "Set position to another object", use B2 as the target object.

    2. B1: "Move at angle" a distance of ( ( B1.h / 2 ) + ( B2.h / 2 ) ), at angle -90.

    This approach separates out the relative offset, which can help make the code a little easier to understand/edit at a glance.

    It's not quite as efficient as setting the cords directly, but the slight difference in efficiency will likely only be noticeable if you do it 10,000 times a tick.

    So this method isn't strictly better or worse, it just has different pros and cons.

  • Hey spacedoubt,

    So, if I understand correctly, I believe the short answer would be this:

    snapX = ( round( mouse.y / 32 ) % 2 = 0 ) ? ( round( mouse.x / 128 ) * 128 ) : ( ( round( ( mouse.x + 64 ) / 128 ) * 128 ) - 64 )

    snapY = round( mouse.y / 32 ) * 32

    That said, I've also included an explanation of this solution below:

    The math

    What it sounds like you want to do is snap to a diamond shaped grid; basically a rectangular grid with every odd row shifted half a cell length.

    Let's start by thinking of the rectangular un-shifted version of the grid.

    From your capx, it looks like you want a horizontal snap distance of 128, and a vertical snap distance of 32. Now 32 might sound too small, but remember that as soon as we shift every odd row, it will suddenly look like the vertical snap distance is 64, because the vertical separation between tiles will appear to skip a row. But it really isn't skipping a row, and it really isn't 64, it's still 32.

    Unshifted
#---#---#---#
#---#---#---#
#---#---#---#
#---#---#---#

Shifted
#---#---#---#
..#---#---#---#
#---#---#---#
..#---#---#---#[/code:315nwg0m]
Now if we shift every odd row by half a cell width, we'll have a diamond grid that will snap 128 x 64 pixel tiles.

[b]Vertical snap[/b]
So lets start with the vertical snapping since it will be the same regardless of the row.
We need to snap to steps of 32 pixels.

tileY = round( mouse.y / 32 ) * 32

We are squeezing the 32 pixel tile size down to the size of integers, then using round() to chop off the decimal part, then expanding the rounded result back to the 32 pixel tile size.

[b]Horizontal snap[/b]
Next lets do the horizontal snapping, but for simplicity, our first version here will not account for the shifting on odd rows.
It's basically the same as the vertical snapping, but with bigger steps.

tileY = round( mouse.x / 128 ) * 128

Same deal, we squeeze, round, and expand back to normal.
Now that formula works fine for the even rows, but what about the shifted odd rows?
Well lets make a similar, but slightly adjusted version of the formula for the odd rows.
We want to shift the tiles over by half the horizontal step width of 128. So we'll shift by 64.

tileY = ( round( ( mouse.x + 64 ) / 128 ) * 128 ) - 64

So it's basically exactly the same as the even-row formula, except we add a 64 offset to the input "mouse.x", and we subtract it back off after we end.
Why? Well remember that the heart of our snapping system is the round() function. When we shift everything by half a step width (64), and then divide by an entire step width (128), as far as the round() is concerned we are shifting by "0.5"; and since round() will snap to the nearest integer, it will be snapping exactly halfway between the spots we'd get from the even-row formula. 

But wait, even though we shifted the input, round() is still just snapping to integers, so shouldn't it just expand back to the same snap points that the even-row formula gave us? Yes, it would [b][i]except[/i][/b], remember that we also un-offset the result by half a step width, which is the "- 64" at the very end.

[b]Picking Even or Odd formula[/b]
Okay, so we have two formulas, but now we have to choose one or the other depending on the row.
We'll need a formula that tells us if we're on an odd or even row.

round( mouse.y / 32 ) % 2

We squeeze the Y coord from counting pixels down to counting rows by dividing, then use round() to chop off the decimal fluff, leaving us with the integer row number. We then mod the row number by 2, meaning we'll get "0" if the row is even, and "1" if the row is odd. 

Now we just need to say, IF ( row is even ) THEN ( even formula ) ELSE (odd formula).
You could do this with events, and that would be just fine, but there is a slightly more compact way to handle the IF / THEN / ELSE case, and it's called the "ternary" operator, sometimes called the one-line-IF-statement.

The ternary operator looks like this when used:

( name = "world" ) [b]?[/b] ( "hello world" ) [b]:[/b] ( "hello person who is suspiciously not world" )

and means this:

[b]IF [/b]( name = "world" ) [b]THEN[/b] ( "hello world" ) [b]ELSE[/b] ( "hello person who is suspiciously not world" )

[i](Note: The "ternary" operator is named for the fact that it takes three arguments, where most operators (like "+" and "-") take only two.)[/i]
This is exactly what we want to do. 
We just need to plug in the parts we want to use.

[b]IF [/b]( round( mouse.y / 32 ) % 2 = 0 )
[b]THEN [/b]( round( mouse.x / 128 ) * 128 )
[b]ELSE [/b]( ( round( ( mouse.x + 64 ) / 128 ) * 128 ) - 64 )

Using the ternary operator we get this:

( round( mouse.y / 32 ) % 2 = 0 )   [b]?[/b]   ( round( mouse.x / 128 ) * 128 )   [b]:[/b]   ( ( round( ( mouse.x + 64 ) / 128 ) * 128 ) - 64 )

[b]Final X &Y formulas[/b]
snapX = ( round( mouse.y / 32 ) % 2 = 0 )   ?   ( round( mouse.x / 128 ) * 128 )   :   ( ( round( ( mouse.x + 64 ) / 128 ) * 128 ) - 64 )
snapY = round( mouse.y / 32 ) * 32

[b]Modulo operator[/b]
The JavaScript Modulo operator (%) is ... tricky, to put it diplomatically.

Unlike the more common operators like plus and minus, there's actually no universal standard definition for exactly how modulo is supposed to work, and so there are a few very subtly different versions of it. The version that JavaScript uses (and by extension Construct 2) is one of the weird ones, which does not behave uniformly for positive and negative numbers. 
There's a nice visual comparison of the mod variations on the [url=http://en.wikipedia.org/wiki/Modulo_operation]modulus wiki page[/url].

This is especially a problem when writing snapping formulas that make use of JS's modulo, as it means the snapping behavior will likewise not behave consistently across positive and negative input coordinates. If you are absolutely certain that you will never feed in a negative value then it's safe-ish to use the JS modulo, though if you inadvertently change that later in a project without realizing it, you may introduce some very subtle bugs as a result of its weird behavior. I personally never use it for anything. I instead use an alternate version of the mod function described below.

There is a version of the modulo operator that does behave uniformly, and that's the "floored division" version.
Here is the formula for the "floored division" modulo.

[b]mod([/b] val [b],[/b] div [b])[/b] ... = ... val - ( floor( val / div ) * div )

So if you just used substitution to modify the original even-odd-detector formula we made, we'd go from this,
( round( mouse.y / 32 ) % 2 = 0 )
to this,
( ( round( mouse.y / 32 ) - ( floor( round( mouse.y / 32 ) / 2 ) * 2 ) ) = 0 )

Not very pretty, but it will work. it would be nicer to be able to simply use a floored division mod function like any other function.
Well, you can use C2's Function object to create a custom "floored division" style mod function.
I actually explained how to do this a while back in another post if you're interested, in the subsection [url=https://www.scirra.com/forum/detecting-360-degree-rotation_p883148?#p883148]Getting "floored division" mod into C2[/url] (towards the end of the post).

Hope that helps out.

  • Hey frodoe7,

    Another similar method is to use multiple sprites stacked together.

    Suppose you have a tank in your game, and you want to be able to change the color of the body, the treads, and the turret separately.

    One way to do this is to create a sprite for the body, a sprite for the treads, and a sprite for the turret, and for each one include color variations. The variations can either be in frames as Tetriser suggested, or in their own separate animations within the sprite.

    You can then use the "Pin" behavior to keep all the sprites together.

    This approach can be especially handy if you want to allow for a lot of variations, as the number of color combinations is the product (multiplicative total) of the number of color variations in each sprite.

    So if the tank has 8 colors for each sprite (body, treads, and turret), then the total number of color arrangements is 8 * 8 * 8, which is 512 combinations. It adds (multiplies) up fast.

  • 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

    C2 themes - Fisholith bundle v1.zip

    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

    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

  • 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

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

  • Awesome, good to hear —

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

  • Hey Kraplanta,

    Themes are custom color palettes, that can re-skin event sheet colors, expression editor colors, and layout colors.

    Though they mainly tend to be targeted at just event sheet colors, from what I've seen.

    Applying a theme

    There are some themes that come with Construct other than the basic white-ish theme.

    You can try out one of the other themes by doing the following:

    • Start Construct 2.
    • From the main menu choose File > Preferences, then choose the "Colors" tab.
    • From the "Choose theme" drop-menu, pick a theme to try. (I think C2 comes with 4.)
    • Click the "Load selected theme" button, to apply the colors.
    • Click the "Ok" button to close the preferences window.
    • Finally, any event sheets you had open will need to be closed and reopened for the new theme to take full effect. (Otherwise you'll usually have all the fill colors from the new theme, and all the edge colors from the prior theme, and it looks weird.)

    Installing a theme

    On Win7, any xml theme files you download should be placed in this path:

    "Program Files\Construct 2\themes"

    Remember, 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.

    Were you interested in trying or making a theme?

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

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

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

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

  • 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

    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

    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

    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.

    [quote:5v7ewf9z]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.

    [quote:5v7ewf9z]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.) :)

    [quote:5v7ewf9z]PS: Maybe you should move this to the Tools/Resources forum

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

    [quote:5v7ewf9z]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. :]

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

    The short answer is that I now always use

    instanceProto.onCreate

    My reasoning

    As I understand it, anything in "instanceProto.onCreate" will get run on a per instance creation basis. and so the creation of instance related stuffs should go there.

    If you knew in advance that you'd only ever have one instance of your pluggin (e.g. the Keyboard plugin), in theory you could use the "pluginProto.Instance" instead, ... but ...

    If there's only ever going to be one instance, you can still use "instanceProto.onCreate", and it will just get called once for your one instance. So "onCreate" seems to work just fine regardless of the situation.

    Also, I have now created single-instance-only plugins using both methods, and they both work, so I use "onCreate" exclusively now. When I say "single-instance-only" I mean things like a math utility library, which you can literally only create a single instance of, again much like the Keyboard plugin.

    My modified SDK

    Here is a download for my modified version of the plugin SDK, with additional comments and a more graphical style of dividing up the different sections of the runtime and edit files. I'm hoping to make a pluggin creation tutorial using this version of the SDK at some point, but in the meantime you're welcome to use it for pluggin making or just reference if it helps out in either respect.

    !fi_plugin_template.zip

    JS structure video

    This is a really good video that describes why the basic structure OOP in JavaScript looks the way it does, and the philosophy behind JavaScript's prototypal inheritance. It has an awesome side-by-side code and visual diagram approach to explaining everything.

    JS Video:

    Subscribe to Construct videos now

    (youtube - 27 min)

    The video is also a companion to a website that lets you type JS code and see a visual diagram representation of the inheritance structure as you go, and it uses exactly the same diagram system shown in the videos.

    JS real-time diagram Site: http://www.objectplayground.com/

    JS online sandbox

    And finally, there's an online JS coding environment, that I use for testing functions and code snippets while working on pluggin projects, and it has been indispensable as a JS sandbox.

    It's just nice to open a webpage and be instantly able to program anything, and have that code print anything out to a console.

    JS sandbox: https://repl.it/languages

    Hope that helps out. <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile">

  • I just finished an update of my theme editor, and put it up as release-2 . :)

    Color Theme Editor for C2 - release 2

    Below are a few of the themes I've created with the new version, so far.

    Themes

    fi_Gallium.xml

    When selected:

    fi_Hydrogen.xml

    fi_Hydrogen_selC2.xml (same, but uses C2 orange color for selection.)

    When selected:

    When selected: (fi_Hydrogen_selC2.xml version)

    fi_SedonaCandyShop.xml

    A weird ice cream looking theme, because why not.

    When selected:

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

    When selected:

  • Release 2 of my Construct 2 color theme editor :)

    Updated UI

    Added xml import among other features, reorganized the interface, and fixed some bugs.

    New themes

    Theme base colors with selection colors side-by-side.

    Download & info thread

    Color Theme Editor for C2 - release 2