How do I create something similar to this ?

Hi There,

I don't know if im posting on the right place, please reminds me if im not.

Anyway, just want to ask to you guys, do you think we can make something similar to this...

http://2.s3.envato.com/files/91398310/index.html

...using Construct 2 ? Im not asking for a full tutorial or something, i just need thoughts and ideas from you guys, what are the best work around if we can't or if we can, what are the ideas to make it, you know, all the 3d feel, the tower rotating, and all that stuff

Really appreciate any of comments and suggestions.. Thanks <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile">

I think it can be done yes. It would however require complex events and actions with lots of variables.

You could put transparent sprites on both side of the tower with a little gradient shadow, and a variable number going from 0 to 360 would constantly check which square to display or not. Turning the tower changes the blocks size and shade which give it a very nice 3D effect.

I suspect a static layer with two vertical gradient shadows has been set above every rotating elements.

It's cleverly done.

Thanks for replying Telyko !

I was almost thinking about the same as yours, i thought this 3D effects is just an eye-illusion, although when you check the javascript code, it looks really really complex, and i dont even know how to recreate it..

So you are talking about masking ?

How about the tower, you think it's just a flat bunch of blocks , i mean just one sprite, moving the x position while masking and gave a little nice vertical gradient shadow ?

the rotating part is confusing me, how do they set up the element, like the platform to be, suspiciously feels like rotating to the back of the tower.. since, i was only thinking about playing with layering..

I think the javascript code has been minified or something, which makes it look complicated.

I'm not into code that much (which is why I love Construct 2 so much after all ^^ ). Yes I think it's just flat blocks but pushing the arrows buttons creates events that resize the blocks. If you look very closely at blocks with ladders on top of them you'd expect real 3D to display the sides of those blocks while they are just 2D sprites which change sizes. As I said this is very well done and seems complex but by trying to reproduce the concept in a more simple way with fewer blocks for a start I'm sure it can be done. After that it's just adding more variables and elements but sticking to the same logic.I'd say something like:

A full row of blocks contains 10 blocks in line with each a letter assigned: A B C D E F G H I J

if rotated left: then A size= -30 B size = -20 etc.. etc.. Just throwing ideas here.

I would say definitelly doable, the position of the objjects are basically angles tranfered to a X value, how to explain... Imagine having the relative angle of the tower you want, in °, put it inside a formula like Radius*cos(angle), and it will be placed, the Z-ordering is more a challenge, as for moving your character, it is just changing the view of the angle, moving the ennemies could be done via a linear interpolation between their angle and their two reference positions.

a little Chalenging mathematically but doable

"Yes I think it's just flat blocks but pushing the arrows buttons creates events that resize the blocks."

I do not see them changing size, only getting darker and hidden by the block in front of them

epicjelly

https://dl.dropboxusercontent.com/u/100 ... index.html like this sort of I guess (left and right arrows for a epic adventure!!).

capx (need license because of families): https://dl.dropboxusercontent.com/u/100 ... aring.capx

capx if you don't have a license (only has black blocks): https://dl.dropboxusercontent.com/u/100 ... amily.capx

just place the objects in the layout view on the tower, and set the boolean that says if it is in front of the tower or not, and have fun

epicjelly

https://dl.dropboxusercontent.com/u/100 ... index.html like this sort of I guess (left and right arrows for a epic adventure!!).

capx (need license because of families): https://dl.dropboxusercontent.com/u/100 ... aring.capx

capx if you don't have a license (only has black blocks): https://dl.dropboxusercontent.com/u/100 ... amily.capx

just place the objects in the layout view on the tower, and have fun

I love you Fishy.

I love you Fishy.

I've made a little mistake, I've corrected it now (I was doing + 180 instead of *(-1) so it didn't worked when behind the tower, I've updated the files that the links gives)

The math is simply positioning the objects on a circle.

x = center.x+ radius*cos(angle)

y = center.y+ radius*sin(angle)

Only it's from the side so y doesn't change. With it you can calculate z for sorting if you like later.

x = center.x+ radius*cos(angle)

z = radius*sin(angle)

That is the basic formula for positioning objects. You change y like in any other game and you change the radius and angle to calculate the x position. The scaling can be done with the sin() function. Notice the value of sin() at these angles:

sin(0) =0

sin(45)~=0.707

sin(90)=1

sin(135)~=0.707

sin(180)=0

It looks like it would work well to set the width to BrickWidth*sin(angle). With it the bricks will be full width when facing head on (90 degrees) and will disappear to a sliver as it turns. Well, it will also be full width when facing away (270 degrees) but we can hide them when the z is less than 0 to hide that. Also keep in mind changing the width is only necessary for the wall bricks, the platforms just change position in the game.

Here's a capx with just the bricks:

https://www.dropbox.com/s/nnoeswz440ur1 ... .capx?dl=1

The bricks are placed in a circle taking into account the tower's radius and how many bricks you want per layer. From that we can find how wide each brick should be and the angle difference from one brick to another.

First calculating the brick width is simple enough. We just take the length around the tower (or the circle circumference) and divide it by the number of bricks in a layer.

Circumference = 2*pi*radius

BrickWidth = 2*pi*radius/numBricksPerLayer

NOTE: The I'd like to point out that the "BrickWidth" above and the one in the expression to set the sprite's width is different from the sprite's actual width.

Next calculating the angle of one brick to another is even simpler. Just divide 360 by the number of bricks per layer.

Finally the loop to create a ring of bricks would look like this:

start of layout

--- set brickwidth to 2*pi*radius/numBricksPerLayer

----- repeat numBricksPerLayer times

-------- create sprite

-------- set sprite.r to radius

-------- set sprite.a to loopindex*360/numBricksPerLayer

Anyway that's most of the math you'd end up using.

-cheers

Oh my god you guys are awesome! i didnt expect so much reply and ideas, but thank you very much! i will certainly look at each of your ideas to make something out of it.. i guess i will posting some progress if i finally made something very similar to this!

Thanks Agaain!

Thanks to aphrodite and rojo for showing some capx for me to understand it even easily!

EDITED:

R0J0hound: Seems like i cant open the capx, it says i didnt have the latest version, release 169, is it already out ? im currently using release 168

epicjelly

r169 is the latest beta. A link to it is on the center of the bottom of the page, right above the total downloads counter.

The math is simply positioning the objects on a circle.

Anyway that's most of the math you'd end up using.

-cheers

Hello. You can upload capx again. dropbox is die

> The math is simply positioning the objects on a circle.

> Anyway that's most of the math you'd end up using.

> -cheers

>

Hello. You can upload capx again. dropbox is die

—

The link from R0J0 here is valid - I just tested it and it downloads fine.

Yeah, sorry about that. I just fixed the link and didn't reply