Jump to content

  • Log In with Google      Sign In   
  • Create Account

thefollower

Member Since 16 Feb 2008
Offline Last Active Yesterday, 09:59 PM

Topics I've Started

Problem with my zooming feature after panning

Yesterday, 08:32 PM

Hey,

 

I have been trying to add a zoom feature to my game but was experiencing issues with scrolling after having zoomed in and out. I get this weird "snapping" movement.

 

I have managed to reproduce the glitch in a fiddle here http://jsfiddle.net/d3k0yg0b/

 

I'm not totally sure what is causing the problem but I've been trying to look at my logic all day and can't work out whats causing it. The two main functions related to the problem are below:

 

function scroll(e) { //mousedown event trigger
    e.preventDefault();
    var mousePos = {};
        mousePos.x = e.pageX;
        mousePos.y = e.pageY;
    var parent = this,
        offsetX = canvas.offsetX,
        offsetY = canvas.offsetY;

    function update(e) {
    var new_mousePos = {};
        new_mousePos.x = e.pageX;
        new_mousePos.y = e.pageY;
    var difx = new_mousePos.x - mousePos.x,
        dify = new_mousePos.y - mousePos.y;
        canvas.offsetX = offsetX + (difx / 2.5);
        canvas.offsetY = offsetY + (dify / 2.5);

    var max_x = (canvas.width / 2) + (radius / 2),
        min_x = (canvas.width / 2) - (radius / 2),
        max_y = (canvas.height / 2) + (radius / 2),
        min_y = (canvas.height / 2) - (radius / 2);

        if (canvas.offsetX > max_x) {
            canvas.offsetX = max_x;
        } else if (canvas.offsetX < min_x) {
            canvas.offsetX = min_x;
        }
        if (canvas.offsetY > max_y) {
            canvas.offsetY = max_y;
        } else if (canvas.offsetY < min_y) {
            canvas.offsetY = min_y;
        }
    }

    function clear() {
        parent.removeEventListener('mousemove', update, false);
        this.removeEventListener('mouseup', clear, false);
    }
    parent.addEventListener('mousemove', update, false);
    document.body.addEventListener('mouseup', clear, false);
}


function zoomTest(e){
    ////
    //update radius for circle
    ////
    function zoomUpt(){
        radius = modifyPercentage(init_radius,zoom.percent);
    }
    ////
    //animate zoom to make it smoother
    ////
    function transition_zoom(zoom,speed,fnc){
        if(zoom.intervalId != false){ 
            clear();
        }        
        var range = zoom.percentVal*zoom.modifier;
        
        if(zoom.direction == 1){
        var endVal = zoom.position + range;
            if(endVal > zoom.maxRange){
                endVal = zoom.maxRange;
            }
        }else if(zoom.direction == 0){
        var endVal = zoom.position - range;
            if(endVal < 50){
                endVal = 50;
            }
        }
        
        function process_transition(){
            if(zoom.direction){
                zoom.position += zoom.speed;
                if(zoom.position > zoom.maxRange){ zoom.position = zoom.maxRange; }
                if(zoom.position > endVal) { zoom.position = endVal;}    
            } else {	
                zoom.position -= zoom.speed;
                if(zoom.position < 50) { zoom.position = 50; } 
                if(zoom.position < endVal) { zoom.position = endVal;} 
            }
            zoom.percent = (zoom.position/zoom.range) * 100;		
            if(fnc){ 
                fnc();
            }			
            if(zoom.position == endVal){
                clear();
            }
        }
        
        function clear(){
            clearInterval(zoom.intervalId);
            zoom.intervalId = false;
        }
        zoom.intervalId   = setInterval(process_transition,1);
    } 
    ////
	var delta 	= e.wheelDelta,
	    oldZoom 	= zoom.position,
	    completed	= 0;

	if(delta == 120){ 		  //scroll in
	        zoom.direction = 1;
        } else if(delta == -120){         //scroll out
		zoom.direction = 0;
	} else {
		zoom.direction = -1;
	}
}	
    if(zoom.position == zoom.maxRange && zoom.direction){ return false; }
	if(zoom.position == 150 && !zoom.direction){ return false; }				
	transition_zoom(zoom,zoom.speed,zoomUpt);
}

Calculate if NPC is inside an oval shape

21 January 2014 - 08:37 PM

Hello,

 

I have drawn a circle but converted it to an oval shape in my HTML5 canvas like this:

 

ctx.save();
ctx.scale(1.5,1);
ctx.beginPath();
ctx.arc(x, y, radius , 0, 2 * Math.PI, false);
ctx.restore();
ctx.lineWidth = 1;
ctx.strokeStyle = 'rgba(255,255,255,0.7)';
ctx.stroke();

Now in a separate function i have some calculations to set the location of my NPC. 

 

First i get the location of the oval center and the NPC position and get the distance like this:

 

var vectorX = NPC.X - locationX,
    vectorY = NPC.Y - locationY,
    distance = Math.sqrt(vectorX*vectorX + vectorY*vectorY);

if(distance < raidus){
   alert('You have entered the oval');
}

The problem lies with the if statement, because its an oval i don't totally know how i check if the NPC has entered accurately, its confusing me because its not a simple circle.


Make sprite follow an array of points in a grid

17 January 2014 - 09:08 PM

Hello

 

I need help with understanding how to approach the logic of this.

So i have an array of points which my sprite will follow at a fixed speed the array looks like this:

 

[

   {"X":"2"   ,"Y":"2"},
   {"X":"9"   ,"Y":"2"},
   {"X":"10" ,"Y":"3"},
   {"X":"1"   ,"Y":"3"}
]

 

 

My grids are 50 by 50 pixels and my sprite moves at 4 pixels per second.

 

Now I set up my sprite info so i have and i can calculate the line the sprite will take quite easily:
 

sprite.currentLocationX = path[0].X * 50;
sprite.currentLocationY = path[0].Y * 50;

sprite.dX = path[1].X * 50; //destination X

sprite.dY = path[1].Y * 50; //destination Y

 

 

My question is how do you calculate when the sprite has passed destination X:Y and so update the sprite's destination ?

 

I update the sprite's X:Y current location every frame using delta*speed.

 

I thought about using the idea of checking when X:Y is greater than destination X:Y but that merely assumes the sprite is moving north east only. 

 

If it matters in terms of explaining the way to work it out, my sprites moving in 8 compass directions.


NodeJS sessions - i'm really confused

13 December 2013 - 12:54 PM

I'm really confused with how to check a user is who they say they are in a chat room by checking against the mySQL database.

 

First the user logs in, and an ajax request is sent to a PHP file which checks the login info and sets a session like:
 

$_SESSION['uid'] = $row['uid'];

Now in my nodeJS  in app.js i want to check this session so i know they are logged in and i have their userID so i know who is sending the message.

 

The idea is like this using Express/SocketIO & mysql-node:
 

socket.on('sendMessage', function(data,callBack){ 
var userID = //assign $_SESSION['uid'], possible?

if(!userID){ 
   console.log('User not logged in!');
} else {

var message = sanitize(data['message']).escape();
  
  var query = connection.query('SELECT name FROM users WHERE uid = ?', [userID],

    function(err,results){
      if(err){
       console.log('Query Error: '+err);
      } else if(results.length == 1){
        var username = results[0].name;
        console.log(username+' sent a message!');
      }
  });

});

Is this possible this way? If not - how do you actually do it ?


Help calculating the correct direction between two points

18 November 2013 - 12:17 PM

Hey

 

 

I have an animation of two objects rotating in different circles at different speeds. I then have two possible directions in which to travel to and from each object (red & green line represent this).

 

 

What I am stuck with is how I work out which path is the correct path to travel on. To explain what is going on in the animation see this image:


hyceSA3.png

 

 

In the above image the red path is the correct path, going from inner to outer orbit the travel direction on the red path is clockwise, given that the green path is bowing into a smaller orbit, it is not the correct path to take.

 

In the below image the objects are in different locations! In this situation the green path is correct going from inner to outer orbit the travel direction on the green path is anti-clockwise, given that the red path is bowing into a smaller orbit, it is not the correct path to take.

 

VVADj1e.png

 

 

My animation is here showing the paths calculated at the same time to show two possible choices at any given time: http://jsfiddle.net/Kz32b/

 

 

How can I work out which line is best between red and green. When the set of rules are the path must not go below the smallest orbit.


PARTNERS