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

Yes "Sort Z order" is probably what you want. There are other ways to Z order objects, but this new action is the fastest.

The online C2 manual has a pretty good overview, which I included below, along with a link to the page.

Sort Z order:

"Sort the Z order of instances of a given object according to an instance variable. This effectively removes all instances from their Z order, sorts them, then inserts the sorted sequence back in to the holes left behind.

This means if the instances are spread across a range of layers, they will be sorted in the same Z order locations, maintaining the same order relative to other instances on those layers.

Note this action is much faster than using an ordered For each with an action like Send to front/back, so this action should be the preferred way to sort the Z order of large numbers of instances."

(source: https://www.scirra.com/manual/125/system-actions)

Hey derboo,

Point & Linear

I don't think you can change the sampling type at runtime.

I'm not sure, but I think it might be because the canvas has to be set up differently, at the HTML5 level, for either render mode.

You can change the pixel-rounding mode, at runtime, but that just snaps object visuals to integer coords for rendering, it doesn't affect the way textures are sampled. Though combining snapping with the pixelate effect shader might get you part way to recreating the look of point sampling, and it would be toggleable at run-time. Though there would be some discrepancies, when compared with actual point sampling.

Just out of curiosity, why is it that you were interested in changing the sampling type at runtime?

I vaguely remember looking for a way to do that quite a while back, but I don't recall why.

Anyway, even if there's not a direct way to get the effect you want, there might be a workaround that could approximate what you're looking for. I'd be happy to suggest anything I can think of.

I do have a thought on how you could effectively build your own custom point sampling system on top of the built-in Linear mode, in a way that would allow you to toggle it at runtime, though its efficiency might become an issue depending on the game and target platform. You could run the game in linear mode, use effects to pixelate individual objects (point sample their textures), and then pixelate the entire screen (point sample the canvas). I think that might almost perfectly recreate the point sampling look. Though the pixelate scale would need to match the scaling factor of the entire game. It could be a handful to set up and maintain, but the effect could be toggled on and off at runtime.

Fullscreen in browser

As for the "Fullscreen in browser" project property, I don't know of any way to change it at runtime, though I believe the "Crop" mode gives you enough freedom to recreate the appearance of any of the other scaling modes, though you'd need to build them yourself via events.

For instance, the game I'm currently working on runs in Crop mode, but I have a custom scaling system (via events) that fits a GameBoy sized screen (160 x 144) into arbitrary monitor dimensions by integer up-scale. Likewise, I have a custom letterboxing system that can toggle letterbox bars to clip the screen, to show only the GameBoy screen (the 160 x 144 zone), or just let the game screen extend beyond GameBoy res to fill the monitor.

Glad it worked out. :)

And oh, man, I know what you mean about taking a break, coming back, and beholding the madness of yesterday's 4am attempts at productivity. :]

Happy to help.

I also noticed that my final version of the example disappeared somehow.

The image I added is from the final version, but the download link is to an earlier version. I could not find a saved copy of the final version so I rebuilt the last few parts, added in the glideSpeed variable along with quite a bit of commentary on it, and it should now match the posted image, and support deleting blocks with middle-click.

(also edited my first post to use the v2 example)

Array Glide Reorder - v2

Ah, good catch with the missing glideSpeed, —

I was going to add it in so it would be easy to change the X and Y lerp speed in one place.

Also, sorry if my reply being directed at you seemed strange. I accidentally referred to your name when I started typing up the post, instead of the OP's name. I edited the starting line to include czar.

Though, I did take a look at your example capx, and it was cool.

I like that the reordering is specific to a zone you can drag blocks in and out of, and so ordering is restricted to just that area. It seems like a really practical way to approach a UI element, as I can see how with multiple zones you could drag blocks between them, for things like inventory or card decks.

Hey czar and allan,

(edit: derp, I meant to copy the OP's name.)

One approach is to add a second private variable to the Block that smoothes out changes in the index variable. Then use that smoothed value to position the Blocks instead of the actual index.

So in the example I linked below, each block has two private variables, index and indexAnim.

Where index is the block's sequence in the row of blocks,

and indexAnim is a variable updated every tick to glide towards the value currently in index.

So if index changes from 0 to 1, then indexAnim will smoothly transition over several ticks from 0 to 1.

An easy way to set up indexAnim to do this smooth attraction to the value in index is with the following event.

Every tick: Set indexAnim to: lerp( indexAnim , index , 0.1 )

This means that every tick, the indexAnim value will move towards the index value by an amount of 0.1 (10%) of the distance currently between them.

Example capx

Here's a commented example capx.

Array Glide Reorder - v2

Controls

Left-click drag blocks.

Right-click to create new blocks.

Middle click to destroy blocks.

Mousewheel to change cell width.

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.