espace

create custom function like function(paramx=100)

Recommended Posts

hi,

I would make a custom function to have tween more simple.

I would have readable params in the function because i have a lot of value.

i could do :
 

function transition (obj,xbegin,ybegin,easing,delay,time....) //but it become difficult to read

transition(player,100,100,Phaser.Easing.Linear.None,100,2000,...)

but it become difficult to read.

I put below a short example of what i would do :

function transition(xbegin=x_begin) {
console.log(x_begin)
} 

transition(xbegin=100)//but that don't work because xbegin is undefined

here the jsfiddle :

https://jsfiddle.net/u2jac54g/

Thanks.

Share this post


Link to post
Share on other sites

to describe more what i want to do :


function displacement(obj,game,time_displacement,delay_displacement,xbegin=x_begin2,ybegin=y_begin,timedisplacement2=time_displacement2,delaydisplacement2=delay_displacement2,xend=x_end,yend=y_end,nameEasing=name_Easing,nameEasing2=name_Easing2) {
	
	game.add.tween(obj.position).to({x:x_begin2,y:y_begin},time_displacement,name_Easing,true,delay_displacement);


	function displacement_back(){
		game.add.tween(obj.position).to({x:x_end,y:y_end},time_displacement2,name_Easing2,true,1);
	}
	//sert de delay
	game.time.events.add(Phaser.Timer.SECOND * delay_displacement2, displacement_back, this);
}


displacement(player,game,500,100,xbegin=200,ybegin=300,timedisplacement2=2000,delaydisplacement2=5,xend=500,yend=800,nameEasing=Phaser.Easing.Linear.None,nameEasing2=Phaser.Easing.Linear.None) 

 

Share this post


Link to post
Share on other sites

this :


function displacement(obj,game,timedisplacement=time_displacement,delaydisplacement=delay_displacement,xbegin=x_begin,ybegin=y_begin,timedisplacement2=time_displacement2,delaydisplacement2=delay_displacement2,xend=x_end,yend=y_end,nameEasing=name_Easing,nameEasing2=name_Easing2) {
	game.add.tween(obj.position).to({x:xbegin,y:ybegin},timedisplacement,nameEasing,true,delaydisplacement);

	function displacement_back(){
		game.add.tween(obj.position).to({x:xend,y:yend},timedisplacement2,nameEasing2,true,1);
	}
	//sert de delay
	game.time.events.add(Phaser.Timer.SECOND * delaydisplacement2, displacement_back, this);
}

and after when i want to move an object to a position and after a certain delay move to another position with special effect i call only this :

displacement(player,game,timedisplacement=500,delaydisplacement=4,xbegin=100,ybegin=100,timedisplacement2=1000,delaydisplacement2=10,xend=800,yend=900,nameEasing=Phaser.Easing.Linear.None,nameEasing2=Phaser.Easing.Elastic.Out)

and not a long function like above.

Share this post


Link to post
Share on other sites

I'm sorry, but how is that easy to read? I kinda think I kinda understand what you are trying to do, but that code you wrote just makes me cringe. CRINGE.

You need to look into:

http://www.w3schools.com/js/js_objects.asp

and

http://www.w3schools.com/js/js_scope.asp

and

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/arguments

 

 

Share this post


Link to post
Share on other sites

 

Hi, thanks for your links, especially : developper mozilla it's well documented.

I have read the three (mozilla not entierely ;) it' will be for the next days)  

But in this case i don't see the relation between your docs and my snippet....

expect this

function person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}

Sorry...maybe if you have time, could you say a little more....

It's true that i have begin javascript since 4 weeks only...and i would learn with the correct way.

 

 

 

 

Share this post


Link to post
Share on other sites

It's mostly related to readability. 

http://ruben.verborgh.org/blog/2013/02/21/programming-is-an-art/

Someone wrote an article some time ago on how to make yourself indispensible in a IT role (I can't find it anymore) but it was somewhat more elaborated than this:

https://www.se.rit.edu/~tabeec/RIT_441/Resources_files/How To Write Unmaintainable Code.pdf

You are doing stuff from the 2nd link.

timedisplacement=time_displacement,

That line right there, well not just that one, but these as well :

You could have chosen some different names. OR put some kind of prefix like 

start_delaydisplacement=end_delaydisplacement,

And I would have felt better... Well just a tiny bit better, BUT it would of made me cringe less.

You are making assignments to variables that you will never use again. So why even bother doing the assignment? If timedisplacement=time_displacement then just use time_displacement instead of using timedisplacement.

Can you tell yet why it's bad to have  timedisplacement be so similar to time_displacement?  It's because readability goes down the drain. You might make sense of it when you write it, however when / if you come back to it you will have no idea what happened there. But I will make it easier for you from now on.

So let's start again.

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor

 

function _Constructor_Tween(Object, Destination_x, Destination_y, Start_x, Start_y, Time_Displacement, Delay_Displacement) {
    this.Object = Object;
    this.Destination_x = Destination_x; 
    this.Destination_y = Destination_y;
    this.Start_x = Start_x;
    this.Start_y = Start_y;
    this.Time_Displacement = Time_Displacement;
    this.Delay_Displacement = Delay_Displacement;
}

function displacement(TweenObject){
    game.add.tween(TweenObject.Object.position).to({x:TweenObject.Destination_x, y:TweenObject.Destination_y},
        TweenObject.Time_Displacement,
        Phaser.Easing.Linear.None,
        true,
        Time_Displacement);
    function displacement_back(){
        game.add.tween(obj.position).to({x:TweenObject.Start_x,y:TweenObject.Start_y},
            TweenObject.Time_Displacement,
            Phaser.Easing.Elastic.Out,
            true,
            1);
    }
    game.time.events.add(Phaser.Timer.SECOND * TweenObject.Time_Displacement, displacement_back, this);
}

var _TweenObject = new _Constructor_Tween(player, 100, 100, 800, 900, 500, Phaser.Easing.Linear.None);
displacement(_TweenObject);

Now I don't know if this code will work for you or not, because you have unused variables and I don't really know what you want to do. But it's to illustrate how to make some intelligible code.

There are other issues with what you wrote such as the displacement function which would have made your life easier from the start even without OOP.

function displacement(player, game, xx, yy, easing, time, delay){
    game.add.tween(player.position).to({x:xx, y:yy},
        time,
        easing,
        true,
        delay);
}

function create(){
    displacement(player, game, 100, 100, Phaser.Easing.Linear.None, 500, 10);
    game.time.events.add(Phaser.Timer.SECOND * 4, 
                        displacement(player, game, 800, 900, Phaser.Easing.Elastic.Out, 1000, 1),
                        this);
}

Good Luck.

Share this post


Link to post
Share on other sites

hi Symof,

Big thank you for you ! i have take time to read carefully yours docs. It's very interesting. I see around me that the oop method is very used....but do you take the time to do use it each time also for small objects ?

Have a nice day.

Share this post


Link to post
Share on other sites
11 hours ago, espace3d said:

hi Symof,

Big thank you for you ! i have take time to read carefully yours docs. It's very interesting. I see around me that the oop method is very used....but do you take the time to do use it each time also for small objects ?

Have a nice day.

I use it on-the-fly for small objects. But I still use OOP wherever possible.

And you use OOP all the time but you just don't notice it.

Earlier you used the two function displacement and displacement_back with this kind of arhitecture:

function displacement(param_01) {
    //stuff
    function displacement_back(param_02){
        //stuff
    }
    //stuff
}

The displacement function that you made IS AN OBJECT, and you can do this sort of call :

function displacement(param_01) {
    //stuff
    function displacement_back(param_02){
        //stuff
    }
    //stuff
}

displacement(param_01).displacement_back(param_02);

Or when you use physics on a variable, you then turn it into an object:

var _player;

function create(){
    game.physics.startSystem(Phaser.Physics.ARCADE);
    
    game.physics.arcade.enable(_player);
   
   _player.body.gravity.y = 100;
}

So what the code above turns the _player variable into a Phaser.Physics.Arcade object.

http://www.ling.helsinki.fi/kit/2009s/clt230/RUR-PLE/html/en/inter/30-dot.htm

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Property_accessors

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.