Parallax effect with tiling is one of the key requirement for today's endless gaming so i decide to create my own and after some experiment i created
effect is created in as3 but it can be easily converted in any language is small amount of time
easy way to create any endless running parallax scrolling background is very easy
=====================================================
1)step one get the device width or height according to screen size
2) second step get the number of titles
numberoftile = screensize/widthoftile;
3) increase number of tile by one numberoftile+=1 or numberoftile++
4) draw all tiles inside a container or root element
5) update the tile container based on speed;
for more here is my as3 class just copy and paste in a new as3 file and name it as
parallax
as3 all code below
//package
package
{
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.Event;
import flash.display.Stage;
public class Parallax extends Sprite
{
//properties
public var __degree:Number=0;
public var startPoint=0;
public var __img:MovieClip;
public var speed:Number;
public var direction:String = "right";
private var parallaxLength:Number = 0;
private var numberofclones:Number = 0;
private var __stage:Stage;
//constructor method
//var scrollbackground=new parallax(img,speed,direction);
//Parallax(_stage,_img,_speed,_direction,_degree)
//@_stage is root elements where u want to create parallax
//@_img is the reference of image '
//@_speed of parallax
//@_direction of parallax
//@_degree of rotation
public function Parallax(_stage,_img,_speed,_direction,_degree)
{
__degree=_degree;
__stage = _stage;
__img = _img;
speed = _speed;
direction = _direction;
//drawing and setting method
init();
}
//init function
private function init():void
{
//set scrolling speed with direction
switch (direction)
{
case "left" :
speed = - speed;
parallaxLength = __stage.stageWidth;
break;
case "right" :
speed = speed;
parallaxLength = __stage.stageWidth;
break;
case "up" :
speed = - speed;
parallaxLength = __stage.stageHeight;
break;
case "down" :
speed = speed;
parallaxLength = __stage.stageHeight;
break;
}
numberofclones=Math.ceil((parallaxLength+speed)/__img.width);
numberofclones++;
//drawing parallax
drawParallax();
}
//drawing Parallax
private function drawParallax():void
{
var distancebwclones:Number = __img.width;
for (var i:Number=0; i<numberofclones; i++)
{
var cloneimg:MovieClip=new img();
this.addChild(cloneimg);
if(direction=="left" || direction=="right")
{
cloneimg.y=0;
cloneimg.rotation=__degree ;
cloneimg.x = (i * distancebwclones);
}
else if(direction=="up")
{
cloneimg.y=(i * distancebwclones);
cloneimg.rotation=__degree ;
cloneimg.x =0;
}
else
{
cloneimg.y=(i * distancebwclones);
cloneimg.rotation=__degree ;
cloneimg.x =0;
}
}
//move parallax using enterframe
this.addEventListener(Event.ENTER_FRAME,moveParallax);
}
//stop parallax
public function Pause():void
{
this.removeEventListener(Event.ENTER_FRAME,moveParallax);
}
public function Resume():void
{
this.addEventListener(Event.ENTER_FRAME,moveParallax);
}
//
private function moveParallax(e:Event):void
{
if(direction=="left")
{
startPoint=(this.x);
this.x=(this.x+speed)%__img.width;
}
else if(direction=="right")
{
startPoint=(this.x-__img.width);
this.x=(startPoint+speed)%__img.width;
}
else if(direction=="up")
{
startPoint=(this.y+__img.width);
this.y=(startPoint+speed)%__img.width;
}
else if(direction=="down")
{
startPoint=(this.y);
this.y=(startPoint+speed)%__img.width;
}
}
}
}
var realimg:MovieClip=new img();
var m:Parallax=new Parallax(stage,realimg,7,"right",0);
this.addChild(m);
m.alpha=0.7;
m.y=60;
var realimg2:MovieClip=new img();
var m1:Parallax=new Parallax(stage,realimg2,3,"up",-90);
this.addChild(m1);
m1.y=0;
m1.x=200;
effect is created in as3 but it can be easily converted in any language is small amount of time
easy way to create any endless running parallax scrolling background is very easy
=====================================================
1)step one get the device width or height according to screen size
2) second step get the number of titles
numberoftile = screensize/widthoftile;
3) increase number of tile by one numberoftile+=1 or numberoftile++
4) draw all tiles inside a container or root element
5) update the tile container based on speed;
for more here is my as3 class just copy and paste in a new as3 file and name it as
parallax
as3 all code below
//package
package
{
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.Event;
import flash.display.Stage;
public class Parallax extends Sprite
{
//properties
public var __degree:Number=0;
public var startPoint=0;
public var __img:MovieClip;
public var speed:Number;
public var direction:String = "right";
private var parallaxLength:Number = 0;
private var numberofclones:Number = 0;
private var __stage:Stage;
//constructor method
//var scrollbackground=new parallax(img,speed,direction);
//Parallax(_stage,_img,_speed,_direction,_degree)
//@_stage is root elements where u want to create parallax
//@_img is the reference of image '
//@_speed of parallax
//@_direction of parallax
//@_degree of rotation
public function Parallax(_stage,_img,_speed,_direction,_degree)
{
__degree=_degree;
__stage = _stage;
__img = _img;
speed = _speed;
direction = _direction;
//drawing and setting method
init();
}
//init function
private function init():void
{
//set scrolling speed with direction
switch (direction)
{
case "left" :
speed = - speed;
parallaxLength = __stage.stageWidth;
break;
case "right" :
speed = speed;
parallaxLength = __stage.stageWidth;
break;
case "up" :
speed = - speed;
parallaxLength = __stage.stageHeight;
break;
case "down" :
speed = speed;
parallaxLength = __stage.stageHeight;
break;
}
numberofclones=Math.ceil((parallaxLength+speed)/__img.width);
numberofclones++;
//drawing parallax
drawParallax();
}
//drawing Parallax
private function drawParallax():void
{
var distancebwclones:Number = __img.width;
for (var i:Number=0; i<numberofclones; i++)
{
var cloneimg:MovieClip=new img();
this.addChild(cloneimg);
if(direction=="left" || direction=="right")
{
cloneimg.y=0;
cloneimg.rotation=__degree ;
cloneimg.x = (i * distancebwclones);
}
else if(direction=="up")
{
cloneimg.y=(i * distancebwclones);
cloneimg.rotation=__degree ;
cloneimg.x =0;
}
else
{
cloneimg.y=(i * distancebwclones);
cloneimg.rotation=__degree ;
cloneimg.x =0;
}
}
//move parallax using enterframe
this.addEventListener(Event.ENTER_FRAME,moveParallax);
}
//stop parallax
public function Pause():void
{
this.removeEventListener(Event.ENTER_FRAME,moveParallax);
}
public function Resume():void
{
this.addEventListener(Event.ENTER_FRAME,moveParallax);
}
//
private function moveParallax(e:Event):void
{
if(direction=="left")
{
startPoint=(this.x);
this.x=(this.x+speed)%__img.width;
}
else if(direction=="right")
{
startPoint=(this.x-__img.width);
this.x=(startPoint+speed)%__img.width;
}
else if(direction=="up")
{
startPoint=(this.y+__img.width);
this.y=(startPoint+speed)%__img.width;
}
else if(direction=="down")
{
startPoint=(this.y);
this.y=(startPoint+speed)%__img.width;
}
}
}
}
calling class is very simple
var realimg:MovieClip=new img();
var m:Parallax=new Parallax(stage,realimg,7,"right",0);
this.addChild(m);
m.alpha=0.7;
m.y=60;
var realimg2:MovieClip=new img();
var m1:Parallax=new Parallax(stage,realimg2,3,"up",-90);
this.addChild(m1);
m1.y=0;
m1.x=200;
works on any programming language such as html5 c++ and even in spritekit too
Comments
Post a Comment