Winds Diary

Flash CS4 + ActionScript 3.0으로 게임 수학/물리 구현 공부 계속.

2-1: 배경 좌우로 스크롤 시키기.

키보드 좌우 키를 누를 때마다 배경이 좌우로 이동.

14/12/7 일

소스(스테이지상에 미리 'backM'이란 이름의 배경 무비클립을 놓아두었다):

var bg =backM;
var camera:Sprite=new Sprite(); //가상 카메라
var cVel:int = 10; //1회 이동 거리
var left=false,right=false;
var rightEnd = stage.stageWidth;//화면 우측끝
var downEnd = stage.stageHeight;//화면 하단끝

function init(){
	camera.x = rightEnd/2; //카메라는 화면 중앙
	bg.x = rightEnd/2 - camera.x;
	
	stage.addEventListener(Event.ENTER_FRAME,loop);
	stage.addEventListener(KeyboardEvent.KEY_DOWN,keyOn);
	stage.addEventListener(KeyboardEvent.KEY_UP,keyUps);
}
function keyOn(e:KeyboardEvent){
   switch(e.keyCode){
      case 37: left=true; break;//왼쪽 화살표
      case 39: right=true; break;//오른쪽 화살표
      default: break;
   }
}
function keyUps(e:KeyboardEvent){
   switch(e.keyCode){
      case 37: left=false; break;//왼쪽 화살표
      case 39: right=false; break;//오른쪽 화살표
      default: break;
   }
}
function loop(e:Event){
	if(left){
		camera.x -= cVel;
		//카메라 위치가 화면을 벗어날 경우 처리
		if(camera.x < rightEnd/2) camera.x = rightEnd/2;
	}
	if(right){ 
		camera.x += cVel;
		if(camera.x > bg.width-rightEnd/2){ 
			camera.x = bg.width-rightEnd/2;
		}
	}
	bg.x = rightEnd/2 - camera.x;
}
init();

2-1a: 배경 다중 스크롤 시키기.

키보드 좌우 키를 누를 때마다 근경, 중경, 원경인 배경 3개가 각각 다른 속도로 좌우로 이동. 배경의 넓이에 따라 이동 속도가 달라진다. 넓이가 넓을 수록 빨리 이동하고 좁을 수록 천천히 이동한다.

소스(스테이지상에 미리 'backM', 'back2M', 'back3M'이란 이름의 각각 넓이가 다른 배경 무비클립 3개를 놓아두었다):

var bg:MovieClip=backM;
var bg2:MovieClip=back2M;
var bg3:MovieClip=back3M;
var camera:Sprite=new Sprite();
var cVel:int = 10; //1회 이동 거리
var left=false,right=false;
var rightEnd = stage.stageWidth;
var downEnd = stage.stageHeight;

function init(){
	camera.x = rightEnd/2;
	bg.x = rightEnd/2 - camera.x;
	bg2.x = rightEnd/2 - camera.x;
	bg3.x = rightEnd/2 - camera.x;
	
	stage.addEventListener(Event.ENTER_FRAME,loop);
	stage.addEventListener(KeyboardEvent.KEY_DOWN,keyOn);
	stage.addEventListener(KeyboardEvent.KEY_UP,keyUps);
}
function keyOn(e:KeyboardEvent){
   switch(e.keyCode){
      case 37: left=true; break;//왼쪽 화살표
      case 39: right=true; break;//오른쪽 화살표
      default: break;
   }
}
function keyUps(e:KeyboardEvent){
   switch(e.keyCode){
      case 37: left=false; break;//왼쪽 화살표
      case 39: right=false; break;//오른쪽 화살표
      default: break;
   }
}
function loop(e:Event){
	if(left){
		camera.x -= cVel;
		if(camera.x < rightEnd/2) camera.x = rightEnd/2;
	}
	if(right){ 
		camera.x += cVel;
		if(camera.x > bg.width-rightEnd/2) camera.x = bg.width-rightEnd/2;
	}
	bg.x = rightEnd/2 - camera.x;
	bg2.x = (bg2.width-rightEnd)/(bg.width-rightEnd) * bg.x;
	bg3.x = (bg3.width-rightEnd)/(bg.width-rightEnd) * bg.x;
}
init();

2-2: 캐릭터 움직임에 따른 배경 스크롤.

키보드 좌우 키를 누를 때마다 캐릭터가 움직이고 캐릭터의 움직임에 따라 근경, 중경, 원경인 배경 3개가 각각 다른 속도로 좌우로 이동.

소스(스테이지상에 미리 'backM', 'back2M', 'back3M'이란 이름의 각각 넓이가 다른 배경 무비클립 3개와 남자 무비클립 'manMo'를 놓아두었다):

var man:MovieClip=manMo; //플레이어
var bg:MovieClip=backM; //근경
var bg2:MovieClip=back2M; //중경
var bg3:MovieClip=back3M; //원경
var camera:Sprite=new Sprite(); //카메라
var cVel:int = 10; //1회 이동 거리
var left=false,right=false;
var rightEnd = stage.stageWidth;
var downEnd = stage.stageHeight;

function init(){
	//man.fx: 필드상 플레이어 위치, man.x: 화면상 플레이어 위치
	man.fx = man.x; //플레이어 초기위치
	camera.x = rightEnd/2; //카메라 초기위치
	bg.x = rightEnd/2 - camera.x; //배경들 초기위치
	bg2.x = rightEnd/2 - camera.x;
	bg3.x = rightEnd/2 - camera.x;
	
	stage.addEventListener(Event.ENTER_FRAME,loop);
	stage.addEventListener(KeyboardEvent.KEY_DOWN,keyOn);
	stage.addEventListener(KeyboardEvent.KEY_UP,keyUps);
}
function keyOn(e:KeyboardEvent){
   switch(e.keyCode){
      case 37: left=true; break;//왼쪽 화살표
      case 39: right=true; break;//오른쪽 화살표
      default: break;
   }
}
function keyUps(e:KeyboardEvent){
   switch(e.keyCode){
      case 37: left=false; break;//왼쪽 화살표
      case 39: right=false; break;//오른쪽 화살표
      default: break;
   }
}
function loop(e:Event){
	if(left){ 
		man.fx -= cVel; 
		man.nextFrame();//남자 걷는 애니 작동
		if(man.fx < 0) man.fx = 0; //화면 밖으로 나갈시 처리
	}
	if(right){ 
		man.fx += cVel; 
		man.nextFrame();
		if(man.fx > bg.width) man.fx = bg.width;
	}
	
	camera.x = man.fx; //카메라는 일단 캐릭터 필드상 위치로
	//카메라가 화면 벗어나지 못하게 처리
	if(camera.x < rightEnd/2) camera.x = rightEnd/2;
	if(camera.x > bg.width-rightEnd/2) camera.x = bg.width-rightEnd/2;
	//캐릭터의 화면상 위치 정하기
	man.x = man.fx - camera.x + rightEnd/2;
	bg.x = rightEnd/2 - camera.x; //배경들 위치 정하기
	bg2.x = (bg2.width-rightEnd)/(bg.width-rightEnd) * bg.x;
	bg3.x = (bg3.width-rightEnd)/(bg.width-rightEnd) * bg.x;
}
init();

2-2a: 캐릭터가 가장자리 접근시 배경 스크롤

키보드 좌우 키를 누를 때마다 캐릭터가 움직이고 캐릭터의 움직임에 따라 근경, 중경, 원경인 배경 3개가 각각 다른 속도로 좌우로 이동까지는 동일.
다른 점은 캐릭터가 중심에서 정해진 거리까지 가장자리로 이동해야 배경이 스크롤 되기 시작한다는 점.(스크린 상의 하늘색 수직선 2개가 좌우 가장자리 경계점)
코드에서도 달라진 점은 거의 없다.

소스(스테이지상에 미리 'backM', 'back2M', 'back3M'이란 이름의 각각 넓이가 다른 배경 무비클립 3개와 남자 무비클립 'manMo'를 놓아두었다):

var man:MovieClip=manMo; //플레이어
var bg:MovieClip=backM; //근경
var bg2:MovieClip=back2M; //중경
var bg3:MovieClip=back3M; //원경
var camera:Sprite=new Sprite(); //카메라
var cVel:int = 10; //1회 이동 거리
var scrollDif=100; //화면중앙에서 스크롤 시작점까지 폭
var up=false,down=false,left=false,right=false;
var rightEnd = stage.stageWidth;
var downEnd = stage.stageHeight;

function init(){
	//man.fx: 필드상 플레이어 위치, man.x: 화면상 플레이어 위치
	man.fx = man.x; //플레이어 초기위치
	camera.x = rightEnd/2; //카메라 초기위치
	bg.x = rightEnd/2 - camera.x; //배경들 초기위치
	bg2.x = rightEnd/2 - camera.x;
	bg3.x = rightEnd/2 - camera.x;
	
	stage.addEventListener(Event.ENTER_FRAME,loop);
	stage.addEventListener(KeyboardEvent.KEY_DOWN,keyOn);
	stage.addEventListener(KeyboardEvent.KEY_UP,keyUps);
}
function keyOn(e:KeyboardEvent){
   switch(e.keyCode){
      case 37: left=true; break;//왼쪽 화살표
      case 39: right=true; break;//오른쪽 화살표
      default: break;
   }
}
function keyUps(e:KeyboardEvent){
   switch(e.keyCode){
      case 37: left=false; break;//왼쪽 화살표
      case 39: right=false; break;//오른쪽 화살표
      default: break;
   }
}
function loop(e:Event){
	if(left){ 
		man.fx -= cVel; 
		man.nextFrame();
		if(man.fx < 0) man.fx = 0;
	}else if(right){ 
		man.fx += cVel; 
		man.nextFrame();
		if(man.fx > bg.width) man.fx = bg.width;
	//키에서 손을 떼도 남자의 걷는 애니 계속되는 것 방지용
	}else{ man.stop();}
	
	if(camera.x < man.fx - scrollDif){ camera.x = man.fx - scrollDif;}
	if(camera.x > man.fx + scrollDif){ camera.x = man.fx + scrollDif;}
	//카메라가 화면 벗어나지 못하게 처리
	if(camera.x < rightEnd/2) camera.x = rightEnd/2;
	if(camera.x > bg.width-rightEnd/2) camera.x = bg.width-rightEnd/2;
	//캐릭터의 화면상 위치 정하기
	//마지막 -man.width/2는 무비클립속 그림이 중앙에 위치하면
	//제거되어야 한다.
	man.x = man.fx - camera.x + rightEnd/2 - man.width/2;
	bg.x = rightEnd/2 - camera.x; //배경들 위치 정하기
	bg2.x = (bg2.width-rightEnd)/(bg.width-rightEnd) * bg.x;
	bg3.x = (bg3.width-rightEnd)/(bg.width-rightEnd) * bg.x;
}
init();