Solved

Why is Actionscript vertical scrolling so choppy?

Posted on 2013-05-11
8
525 Views
Last Modified: 2013-05-13
Having just had a failed attempt at getting a scrolling game working in HTML5, I went to Flash, the gold standard of web games expecting to see an amazing improvement in my simple vertical scrolling game.  But alas, I must be doing something dreadfully wrong.  

I built the simplest example I could just to see an endless stream of obstacles move top down for the player to avoid, but the scrolling is very choppy. Flash must be better than this so it has to be something fundament I'm doing wrong.  I experimented with a variety of FPS (what is recommended?) and adjusting the value of the Y position on each step.  

I have attached the project files (except the FLA which is forbidden apparently) for reference as it could be a setting or my approach of using addChild and then adjusting the Y value during the ENTER_FRAME event.  Any guidelines that could improve this scrolling would be greatly appreciated.
ScrollTest.zip
0
Comment
Question by:srbentley65
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
8 Comments
 
LVL 29

Expert Comment

by:dgofman
ID: 39158821
Please save your FLA file as CS4 File->Save AS (in dropdown file type select) "Flash CS4 Document" than you will able to attach another way archive file using RAR format
0
 

Author Comment

by:srbentley65
ID: 39158949
I'm using CS6 and didn't see that option. I am posting a zip externally on Zip with FLA file. Hopefully that will suffice.
0
 
LVL 29

Expert Comment

by:dgofman
ID: 39158992
I can see rocks are and can move a boy what do you want to do now?
0
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
LVL 29

Accepted Solution

by:
dgofman earned 500 total points
ID: 39159013
If you want rely on FPS I am using maximum 120 but you have to change your Rock class

package  {
	
	import flash.display.Stage;
	import flash.display.MovieClip;
	import flash.events.Event;

	public class Rock extends MovieClip {

		private var speed:Number;

		public function Rock() {
			// constructor code
			speed = 4;
			addEventListener(Event.ENTER_FRAME, update);
		}

		private function update(event:Event)
		{
   		   this.y += speed;
		   if (this.y > stage.stageHeight) {
				removeEventListener(Event.ENTER_FRAME, update);
				parent.removeChild(this);
			}
		}
	}
}

Open in new window


In this case you don't need Array of "enemies"

package
{
	import flash.display.MovieClip;
	import flash.events.*;
	import flash.geom.*;
	import flash.text.*;
	import flash.utils.*;
	
	public class GameController extends MovieClip
	{
		private var player:Player;
		private var moveX, moveY:Number;
		//private var enemies:Array;
		private var myTimer:Timer;
		private var rockMode: Number;
		
		public function GameController()
		{
		}
		
		public function timerFunction(event:TimerEvent)
		{
			var newRock = new Rock();
			
			// just for testing...
			switch (rockMode)
			{
				case 1:
					newRock.x = 30;
					newRock.y = -300;
					rockMode++;
					break;
				case 2:
					newRock.x = 120;
					newRock.y = -300;
					rockMode++;
					break;			
				case 3:
					newRock.x = 50;
					newRock.y = -300;
					rockMode = 1;
					break;
			}
			//enemies.push(newRock);
			mcGameStage.addChildAt(newRock, 1);
		}
		
		public function gameStart()
		{

			var myTimer:Timer = new Timer(1500);
			myTimer.addEventListener(TimerEvent.TIMER, timerFunction);
			myTimer.start();
			
			rockMode = 1;
			
			//enemies = new Array();
			
			player = new Player();
			player.x = 400;
			player.y = 450;
			mcGameStage.addChild(player);
			
			//playerScore = C.PLAYER_START_SCORE;
			
			mcGameStage.addEventListener(Event.ENTER_FRAME,update);
			
			//Handle event when this game is being preloaded
			addEventListener(Event.ADDED_TO_STAGE, gameAddedToStage ); 
			
			//Handle situations when this game is being run directly
			if (stage != null)
			{
				stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownHandler);
				stage.addEventListener(KeyboardEvent.KEY_UP,keyUpHandler);
			}
		}		
		
		private function gameAddedToStage(evt: Event):void
		{
			stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownHandler);
			stage.addEventListener(KeyboardEvent.KEY_UP,keyUpHandler);
		}		
		
		private function keyDownHandler(evt:KeyboardEvent):void
		{
			if ((evt.keyCode == 37) || (evt.keyCode == 65))
			{
				//Move player left
				moveX = -1;
			}
			else if ((evt.keyCode == 39) || (evt.keyCode == 68))
			{
				//Move player right
				moveX = 1;
			}

		}
	
		private function keyUpHandler(evt:KeyboardEvent):void
		{
			if ((evt.keyCode == 37) || (evt.keyCode == 65))
			{
				moveX = 0;
			}
			else if ((evt.keyCode == 39) || (evt.keyCode == 68))
			{
				moveX = 0;
			}
			else if ((evt.keyCode == 38) || (evt.keyCode == 87)) 
			{
				//moveY = 0;
			}
			else if ((evt.keyCode == 40) || (evt.keyCode == 83))
			{
				//moveY = 0;
			}
		}
		
		private function update(evt:Event)
		{
			//******************			
			//Handle User Input
			//******************

			//Handle Player 1 User Input
			if (moveX > 0)
			{
				if (player.x <= 700)
					player.x += 6;
			}
			else if (moveX < 0)
			{
				if (player.x > 50)
					player.x -= 6;	
			}

			//Update enemies
			/*for (var i=enemies.length - 1; i >= 0; i--)
			{
				enemies[i].update();
			}*/
		}
	}
}

Open in new window

0
 

Author Comment

by:srbentley65
ID: 39159856
I don't necessarily want to rely on FPS because I thought that makes a lot of assumptions about the target device it's running on. So I'm open to the best approach to smooth scrolling animation.  Your solution does look much better than what I started with.
0
 

Author Comment

by:srbentley65
ID: 39161268
When I compile that and post it online, this is the result:
Scroll Test Flash Result

Does that scrolling acceptable?  It still looks jumpy to me.
0
 
LVL 29

Expert Comment

by:dgofman
ID: 39161855
You annimation is very smooth what you don't like it?
0
 
LVL 29

Expert Comment

by:dgofman
ID: 39162064
You can also try moving canvas of the rocks

package
{
	import flash.display.MovieClip;
	import flash.events.*;
	import flash.geom.*;
	import flash.text.*;
	import flash.utils.*;
	
	public class GameController extends MovieClip
	{
		private var player:Player;
		private var moveX, moveY:Number;
		private var myTimer:Timer;
		private var rockMode: Number;

		private var _enemies:Object;
		private var _rockCanvas:MovieClip;
		private var _speed:Number;
		private var _y:Number;

		public function GameController()
		{
			_y = 0;
			_speed = 4;
			_enemies = {};
			_rockCanvas = new MovieClip();
			addChild(_rockCanvas);
		}
		
		public function timerFunction()
		{
			var newRock = new Rock();
			
			// just for testing...
			switch (rockMode)
			{
				case 1:
					newRock.x = 30;
					rockMode++;
					break;
				case 2:
					newRock.x = 120;
					rockMode++;
					break;			
				case 3:
					newRock.x = 50;
					rockMode = 1;
					break;
			}
			newRock.y = (0 - _y - newRock.height);
			_rockCanvas.addChildAt(newRock, 0);
			_enemies[newRock.name] = newRock;
		}
		
		public function gameStart()
		{
			timerFunction();
			setInterval(timerFunction, 1500);
			
			rockMode = 1;
			
			//enemies = new Array();
			
			player = new Player();
			player.x = 400;
			player.y = 450;
			mcGameStage.addChild(player);
			
			//playerScore = C.PLAYER_START_SCORE;
			
			mcGameStage.addEventListener(Event.ENTER_FRAME,update);
			
			//Handle event when this game is being preloaded
			addEventListener(Event.ADDED_TO_STAGE, gameAddedToStage ); 
			
			//Handle situations when this game is being run directly
			if (stage != null)
			{
				stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownHandler);
				stage.addEventListener(KeyboardEvent.KEY_UP,keyUpHandler);
			}
		}		
		
		private function gameAddedToStage(evt: Event):void
		{
			stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownHandler);
			stage.addEventListener(KeyboardEvent.KEY_UP,keyUpHandler);
		}		
		
		private function keyDownHandler(evt:KeyboardEvent):void
		{
			if ((evt.keyCode == 37) || (evt.keyCode == 65))
			{
				//Move player left
				moveX = -1;
			}
			else if ((evt.keyCode == 39) || (evt.keyCode == 68))
			{
				//Move player right
				moveX = 1;
			}

		}
	
		private function keyUpHandler(evt:KeyboardEvent):void
		{
			if ((evt.keyCode == 37) || (evt.keyCode == 65))
			{
				moveX = 0;
			}
			else if ((evt.keyCode == 39) || (evt.keyCode == 68))
			{
				moveX = 0;
			}
			else if ((evt.keyCode == 38) || (evt.keyCode == 87)) 
			{
				//moveY = 0;
			}
			else if ((evt.keyCode == 40) || (evt.keyCode == 83))
			{
				//moveY = 0;
			}
		}
		
		private function update(event:Event)
		{
			//******************			
			//Handle User Input
			//******************

			//Handle Player 1 User Input
			if (moveX > 0)
			{
				if (player.x <= 700)
					player.x += 6;
			}
			else if (moveX < 0)
			{
				if (player.x > 50)
					player.x -= 6;	
			}

			_y += _speed;
			_rockCanvas.y = _y;

			//Update enemies
			for(var name:String in _enemies)
			{
				var rock:Rock = _enemies[name];
				if(_y - Math.abs(rock.y) > stage.stageHeight) {
					_rockCanvas.removeChild(rock);
					delete _enemies[name];
				}
			}
		}
	}
}

Open in new window


package  {
	import flash.display.MovieClip;

	public class Rock extends MovieClip {

	}
}

Open in new window


And you will get better performance if you will initialize first your rocks before start moving this canvas.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Adobe Flash Player - PPAPI plugin 6 790
Adobe Flash Player ActionScript error 6 73
Shockwave Flash Object within PowerPoint 2013 2 180
File conversion question 5 150
I come across a lot of question about how to access things in the document class from a movieclip, or accessing something from a movieclip in the document class. It took me a while to figure this out but once I did it makes life so much easier. …
Recently, I was asked to recommend a tracking system to be implemented on a clients website. As the entire site was built on flash, my first thought was to suggest custom built tracking system. However, our company at that point of time didn't h…
The goal of the tutorial is to teach the user how to live broadcast using Flash Media Live Encoder and connecting it to YouTube to broadcast. Log into your Youtube account, choose live stream settings, start live stream from Flash Media Live Enc…
The goal of the tutorial is to teach the user how to select which audio input to use. Once you have an audio input plugged into the laptop or computer, you will go into the audio input settings and choose which audio input you want to use.

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question