[Plugin] 3D Starfield

I think I've cracked it.

The problems was with the axis. For the 3d to 2d formulas to work with construct2 you have to create an artificial axis in the middle of the screen. If you fail to do so, then the stars will all go in the same directions.

Hi, amazing. Is there a way to add different shapes to stars?

This is really cool! Tried it on CocoonJS and it didn't work though, maybe it's a problem with it?

Hi, amazing. Is there a way to add different shapes to stars?

Certainly , but in this case you can use C2 to code 3dstarfield with sprite ..I did port this

with C2 events .... go to my website and click to 3d Stars.

This is really cool! Tried it on CocoonJS and it didn't work though, maybe it's a problem with it?

It's working with C2 i think cocoonjs can't translate all of js correctly to native code ..

Cause is Cocoonjs ...

In any case, it's pretty cool. I'm already making a ptotoype using it, but I decided to use a bunch of webgl so it would never probably run properly on android anyway!

Take a look:

By the way, would it be possible to add a gradient color option to the background instead of plain black? So it looks like this starfield effect? effect-radial-starfield_t128707?&hilit=starfield

HI once again, thanks for that but could you give me an example to get started please.

I would be very grateful.

Matthew

Mr matthew can you convert this to C2 .. ? If no , i can help you ...

http://phaser.io/examples/v2/demoscene/ ... ath-follow

In any case, it's pretty cool. I'm already making a ptotoype using it, but I decided to use a bunch of webgl so it would never probably run properly on android anyway!

Take a look:

Subscribe to Construct videos now

By the way, would it be possible to add a gradient color option to the background instead of plain black? So it looks like this starfield effect? effect-radial-starfield_t128707?&hilit=starfield

great !!

Yes it's possible , but i must rework the code ... understand the base of this plugin...

update routine ();

draw stars..

draw black rect

draw stars

draw black rect

draw stars

draw black rect .... every thick per seconds ... ect etc ..

so if i want gradient , question ? What must i do ?

Answer is :

we must draw gradient instead of "black rect" .... Right ?

can i do this ? YES ...

So tell me what colors you want i can try to do for you ...

I opened the runtime.js up to try and mess with it myself and I found this part

Is it supposed to be missing a ; at the end? I don't understand javascript much..

The perfect thing for me would be if you could draw a gradient rectangle like this behind the stars

http://www.w3schools.com/tags/canvas_cr ... adient.asp

And have options in the object properties to set the colors, or if the gradient is vertical/horizontal by changing the x1,x2,y1 and y2..

I don't know if this would be possible though, maybe it would be too much intense? I'm not sure..

Ok you are in the right way ... so i have no time now... but to play with it insert this code

	function remplie(color)
		{
		//	var tmp = ctx.fillStyle;
		//	var tmp2=ctx.globalAlpha;
		//	ctx.globalAlpha=1.0;
		//	ctx.fillStyle = color;
		//	ctx.fillRect(0, 0, w,h);
		//	ctx.fillStyle = tmp
		//	ctx.globalAlpha=tmp2;
			
			
			var my_gradient = ctx.createLinearGradient(0, 0, 0, h);
            my_gradient.addColorStop(0, '#000000');
            my_gradient.addColorStop(.5, '#FF0000');
            my_gradient.addColorStop(1., '#000000');
 
			ctx.fillStyle = my_gradient;
			ctx.fillRect(0, 0, w, h);
			
		}	[/code:1uhrufct]
And you have a red gradient ;  add colorstop is the start of the top to bottom ... 0 to .5 to .1.0

Weird, I typed a post but I think I forgot to press "submit" lol

Thanks, this code worked perfectly! I'm trying to mess aroung more with it so I can add these 3 colors in the object properties. This way I could maybe even change it during the runtime probably? <img src="{SMILIES_PATH}/icon_e_biggrin.gif" alt=":D" title="Very Happy">

Edit:

I got it to work, but I couldn't understand how to make the same action accept 3 parameters.. I tried to take a look at the canvas plugin so I could use it as example but it just blew my mind hahaha.

Here's the edited plugin with custom bg gradient color for the BG, and an action that changes the color in the runtime if anyone wants to use it.

OLD!!

Thanks for the help!

Edit 2:

Found out how to do it, it works fine in my PC but I think it will run extremely laggy on lower-end PCs. Still, it looks great! This is the new version:

NEW!! - https://dl.dropboxusercontent.com/u/238 ... nt_new.zip

It includes the original capx, modified to put a random color every second.

Example:

https://dl.dropboxusercontent.com/u/238 ... index.html

And once again, many thanks.

Gigatron, awesome work!

I've used your 2D starfield plugin before and was able to set an "Additive" effect value in the parameters to it in order to display a starfield 'over' a sprite.... HOWEVER, when using your 3D Star field, when I set the "Additive" effect value, I don't see the star field at all...

All I've done is created a sprite in the demo CAPX you provided, changed the 3D starfield object's "Effect" parameter to "Additive" and made sure that the Starfield has the highest z-order...

Any suggestions? Am I missing something?

remy-jay

I will fix this in a minute ..... Ok was done;

download plugin at the first post of this topic.

Have fun