{"id":1059,"date":"2010-11-01T15:07:04","date_gmt":"2010-11-01T20:07:04","guid":{"rendered":"http:\/\/www.lonhosford.com\/lonblog\/?p=1059"},"modified":"2015-07-31T18:25:51","modified_gmt":"2015-07-31T23:25:51","slug":"flixel-hello-world-basic-shooter-game-in-flash-and-flex","status":"publish","type":"post","link":"https:\/\/www.lonhosford.com\/lonblog\/2010\/11\/01\/flixel-hello-world-basic-shooter-game-in-flash-and-flex\/","title":{"rendered":"Flixel Hello World Basic Shooter Game in Flash and Flex"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"http:\/\/lh6.ggpht.com\/_e5pwU0LJbN8\/TM8hDqR80xI\/AAAAAAAAFvk\/_7NG6QL2hss\/s800\/FlixelBasicShooterGame01_AS_11-1-2010%202-14-58%20PM.png\" alt=\"\" width=\"372\" height=\"169\" \/>Decided to try an Actionscript 3 game engine and chose <a href=\"http:\/\/flixel.org\/\" target = \"_blank\">Flixel<\/a> to start. I started late afternoon Halloween and when the devil (local neighbor in costume) showed up with treats and pizza, I was well on the way.<\/p>\n<p>The Flixel site lead me off to a &#8220;hello world&#8221; space ship shooter game laid out by <a href=\"http:\/\/se.linkedin.com\/in\/andreaszecher\" target = \"_blank\">Andreas Zecher<\/a>. He has a nice <a href=\"http:\/\/www.creativeapplications.net\/flash\/flixel-2-tutorial-flash-tutorials-games\/\"  target = \"_blank\">incremental tutorial<\/a> that shows the changes if you follow it. I decided to create my own game pieces and also comment all the code so I understood on a line by line basis what was happening. I also made some changes to data moving it out of the code to at least the class member level. This post shows the results of the work.<\/p>\n<p><a href=\"http:\/\/www.amazon.com\/gp\/product\/0763784516?ie=UTF8&#038;tag=hosfordusa&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=0763784516\" target = \"_blank\"><img decoding=\"async\" border=\"0\" align=\"right\" src=\"http:\/\/lh4.ggpht.com\/_e5pwU0LJbN8\/TMg4rcI62aI\/AAAAAAAAFvI\/HBJG_mAV_1M\/s800\/51kVfkmZ-WL._SL160_.jpg\"><\/a><\/p>\n<p>I am using version <a href=\"http:\/\/flixel.org\/\" target = \"_blank\">Flixel version 2.35<\/a> because and included a swc in the download files so you do not need to download it.<\/p>\n<p>You can build this with the free Flex SDK by using the code in the src folder and be sure to include a path to the Flixel library. For Flash CS3 and later versions, you need to create a Flash Document in the src folder and set the document class to <code>Main<\/code> and then add a library path to the Flixel  2.35 code or SWC if you created one. For your convenience the Flash CS4 example download is included with a Flixel 2.35 SWC.<\/p>\n<p>Also for Flash CS3 on up you will need some Flex library swc files because of the use of the Embed meta tag. Tareq AlJaber has <a href=\"http:\/\/www.adobe.com\/devnet\/flash\/articles\/embed_metadata.html\" target = \"_blank\">good article on embedding meta data in Flash CS4<\/a>.<\/p>\n<ul style=\"padding-top: 10px;\">\n<li><a href=\"https:\/\/www.lonhosford.com\/content\/gaming\/flixel\/FlixelBasicShooterGame01_AS.zip\" onClick=\"javascript: pageTracker._trackPageview('\/downloads\/FlixelBasicShooterGame01_AS.zip'); \">Flex Builder 4 Actionscript Project<\/a><\/li>\n<li><a href=\"https:\/\/www.lonhosford.com\/content\/gaming\/flixel\/FlixelBasicShooterGame01_Flex.fxp\" onClick=\"javascript: pageTracker._trackPageview('\/downloads\/FlixelBasicShooterGame01_Flex.fxp'); \">Flex Builder 4 Flex Project<\/a><\/li>\n<li><a href=\"https:\/\/www.lonhosford.com\/content\/gaming\/flixel\/FlixelBasicShooterGame01_CS4.zip\" onClick=\"javascript: pageTracker._trackPageview('\/downloads\/FlixelBasicShooterGame01_CS4.zip'); \">Flash CS4<\/a><\/li>\n<\/ul>\n<p>This article shows the code for the Flex project.<\/p>\n<p><strong>Application Class &#8211; Main<\/strong><br \/>\nThe applicationCompleteHandler creates Flixel game instance variable named flxGame. It is easily added to the Flex SpriteVisualElement and we are off and playing.<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\n&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;\r\n&lt;s:Application xmlns:fx=&quot;http:\/\/ns.adobe.com\/mxml\/2009&quot; \r\n\t\t\t   xmlns:s=&quot;library:\/\/ns.adobe.com\/flex\/spark&quot; \r\n\t\t\t   xmlns:mx=&quot;library:\/\/ns.adobe.com\/flex\/mx&quot; \r\n\t\t\t   applicationComplete=&quot;applicationCompleteHandler(event)&quot;\r\n\t\t\t   width = &quot;644&quot;\r\n\t\t\t   height = &quot;484&quot;\r\n\t\t\t   &gt;\r\n\t&lt;fx:Script&gt;\r\n\t\t&lt;!&#x5B;CDATA&#x5B;\r\n\t\t\timport mx.events.FlexEvent;\r\n\t\t\t\r\n\t\t\timport org.flixel.FlxGame;\r\n\t\t\t\/**\r\n\t\t\t * Set the preloader.\r\n\t\t\t * *\/\r\n\t\t\t&#x5B;Frame(factoryClass=&quot;Preloader&quot;)]\r\n\t\t\t\/**\r\n\t\t\t * Properties for background\r\n\t\t\t * @see background_bc\r\n\t\t\t *\/\r\n\t\t\tprivate static const backgroundColor:Number = 0x333333;\r\n\t\t\t\/**\r\n\t\t\t * The Flixel game.\r\n\t\t\t *\/\r\n\t\t\tprivate var flxGame:FlxGame;\r\n\t\t\t\/**\r\n\t\t\t * Handler for applicationComplete event. Setup world and begin animation.\r\n\t\t\t * *\/\r\n\t\t\tprotected function applicationCompleteHandler(event:FlexEvent):void\r\n\t\t\t{\r\n\t\t\t\ttrace( className + &quot;.applicationCompleteHandler(...)&quot;);\r\n\t\t\t\tflxGame = new FlxGame(640, 480, PlayState, 1 ); \r\n\t\t\t\tbox2DContainer.addChild(flxGame);\r\n\t\t\t\t\/\/ Offset to show box2DContainer evenly.\r\n\t\t\t\tflxGame.x = 1;\r\n\t\t\t\tflxGame.y = 1;\r\n\t\t\t}\t\t\t\r\n\t\t]]&gt;\r\n\t&lt;\/fx:Script&gt;\r\n\t&lt;!--\r\n\tBackground for app \r\n\t--&gt; \r\n\t&lt;s:BorderContainer id = &quot;background_bc&quot;\r\n\t\t\t\t\t   width=&quot;{width}&quot; height = &quot;{height}&quot;\r\n\t\t\t\t\t   \r\n\t\t\t\t\t   backgroundColor=&quot;{backgroundColor}&quot;&gt;\r\n\t\t\r\n\t\t&lt;!--\r\n\t\tContainer for the FlxGame\r\n\t\t--&gt;\r\n\t\t&lt;s:SpriteVisualElement id = &quot;box2DContainer&quot; \/&gt;\r\n\t&lt;\/s:BorderContainer&gt; \r\n&lt;\/s:Application&gt;\r\n<\/pre>\n<p>[ad name=&#8221;Google Adsense&#8221;]<br \/>\n<strong>PlayState Class<\/strong><br \/>\nThe PlayState class does the real game specific details. Flixel does the rest of the work.<\/p>\n<p>Overall the plan is to have a player space ship pointing to the right only and that moves up, down, left and right with arrow keys. The spacebar is used for firing bullets. Enemy space ships appear of the right and travel left with a slight sine wave. Collisions of bullets with enemy ships terminates them in an explosion. Collision of the player ship with an enemy ship terminates both ships and ends the game.<\/p>\n<p>Enemy ships are added in more frequently as the game progress. Bullets are unlimited and have no repetition governor.<\/p>\n<p>The create method on line 88 sets the game up and starts the game. In 2.5 seconds the first enemy ship appears.<\/p>\n<p>The update method on line 116 represents the testing for player input and collisions. Lines 119 and 121 detect collisions. <\/p>\n<p>Lines 123 &#8211; 127 test for starting the game which is done by detecting if the player ship is inactive (&#8220;dead&#8221;) and the ENTER key is pressed. Game in play is based on the player ship being active.<\/p>\n<p>Lines 128 &#8211; 133 set the flag to fire a bullet when the SPACE BAR is pressed.<\/p>\n<p>Lines 135  &#8211; 144 simple detect if it is time to add another enemy ship and to call resetSpawnTimer() on line 173 that adjusts the timer to a smaller interval.<\/p>\n<p>The handler for an enemy ship hit with a bullet is the overlapAlienBullet method on line 188. Basically the enemy ship and bullet are destroyed and broken into exploding pixels. That code I have not studied but is handled by the createEmitter() method  on line 228 and the FlxEmitter class. <\/p>\n<p>The overlapAlienShip method on line 207 handles an enemy ship colliding with the play ship. The game is rendered inactive at this point, however enemy ships keep showing up in larger numbers: something I did not bother to fix. The game gets a shake using the FlxG.quake.start method on line 214.<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\npackage\r\n{\r\n\timport org.flixel.FlxEmitter;\r\n\timport org.flixel.FlxG;\r\n\timport org.flixel.FlxGroup;\r\n\timport org.flixel.FlxPoint;\r\n\timport org.flixel.FlxSprite;\r\n\timport org.flixel.FlxState;\r\n\timport org.flixel.FlxText;\r\n\timport org.flixel.FlxU;\r\n\t\r\n\tpublic class PlayState extends FlxState\r\n\t{\r\n\t\t\/**\r\n\t\t * Player ship.\r\n\t\t * *\/\r\n\t\tprivate var _playerShip:PlayerShip;\r\n\t\t\/**\r\n\t\t * FlxGroup for EnemyShip objects.\r\n\t\t * *\/\r\n\t\tprivate var _enemyShips:FlxGroup;\r\n\t\t\/**\r\n\t\t * FlxGroup for player ship bullets\r\n\t\t * *\/\r\n\t\tprivate var _bullets:FlxGroup;\r\n\t\tprivate var _enemyShipSpawnTimer:Number;\r\n\t\t\/**\r\n\t\t * Starting number of seconds that new enemy ships are spawned.\r\n\t\t * *\/\r\n\t\tprivate var _enemyShipSpawnInterval:Number = 2.5;\r\n\t\t\/**\r\n\t\t * Minimum seconds that new enemy ships are spawned.\r\n\t\t * *\/\r\n\t\tprivate var _enemyShipSpawnIntervalMin:Number = .1;\r\n\t\t\/**\r\n\t\t * Reducing factor for seconds next enemy ship is spawned.\r\n\t\t * *\/\r\n\t\tprivate var _enemyShipSpawnIntervalReductionFactor:Number = 0.95;\r\n\t\t\/**\r\n\t\t * Game text displaying number of enemy ships hit.\r\n\t\t * *\/\r\n\t\tprivate var _scoreText:FlxText;\r\n\t\t\/**\r\n\t\t * Score text font size.\r\n\t\t * *\/\r\n\t\tprivate var _scoreTextFontSize:Number = 32;\r\n\t\t\/**\r\n\t\t * Score text font color.\r\n\t\t * *\/\r\n\t\tprivate var _scoreTextFontColor:Number = 0xFF597137;\r\n\t\t\/**\r\n\t\t * Score text horizontal alignment.\r\n\t\t * *\/\r\n\t\tprivate var _scoreTextAlign:String = &quot;left&quot;;\r\n\t\t\/**\r\n\t\t * Game text displaying end of game message.\r\n\t\t * *\/\r\n\t\tprivate var _gameOverText:FlxText;\r\n\t\t\/**\r\n\t\t * End of came message.\r\n\t\t * *\/\r\n\t\tprivate var _lang_GameOverMessage:String = &quot;GAME OVER\\nPRESS ENTER TO PLAY AGAIN&quot;;\r\n\t\t\/**\r\n\t\t * Sound for exploding game ship\r\n\t\t * *\/\r\n\t\t&#x5B;Embed(source=&quot;assets\/ExplosionShip.mp3&quot;)]\r\n\t\tprivate var SoundExplosionShip:Class;\r\n\t\t\/**\r\n\t\t * Sound for exploding enemy ship\r\n\t\t * *\/\r\n\t\t&#x5B;Embed(source=&quot;assets\/ExplosionAlien.mp3&quot;)]\r\n\t\tprivate var SoundExplosionEnemyShip:Class;\r\n\t\t\/**\r\n\t\t * Sound for ship bullet\r\n\t\t * *\/\r\n\t\t&#x5B;Embed(source=&quot;assets\/Bullet.mp3&quot;)]\r\n\t\tprivate var SoundBullet:Class;\r\n\t\t\/**\r\n\t\t * The game play state constructor.\r\n\t\t * *\/\r\n\t\tpublic function PlayState()\r\n\t\t{\r\n\t\t\tsuper();\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Create game objects\r\n\t\t *\/\r\n\t\toverride public function create():void\r\n\t\t{\r\n\t\t\t\/\/ Set the FlxState bgColor. The default background color of the game.\r\n\t\t\tbgColor = 0xFFABCC7D;\r\n\t\t\t\/\/ Set the Flixel starting score value\r\n\t\t\tFlxG.score = 0;\r\n\t\t\t\/\/ Set the costume score value\r\n\t\t\t_scoreText = new FlxText(10, 8, 200, &quot;0&quot;);\r\n\t\t\t_scoreText.setFormat(null, _scoreTextFontSize, _scoreTextFontColor, _scoreTextAlign);\r\n\t\t\tadd(_scoreText);\r\n\t\t\t\/\/ Add player ship.\r\n\t\t\t_playerShip = new PlayerShip();\r\n\t\t\tadd(_playerShip);\r\n\t\t\t\/\/ Add a group for enemy ships\r\n\t\t\t_enemyShips = new FlxGroup();\r\n\t\t\tadd(_enemyShips);\r\n\t\t\t\/\/ Add a group for player ship bullets\r\n\t\t\t_bullets = new FlxGroup();\r\n\t\t\tadd(_bullets);\r\n\t\t\t\/\/ Reset the enemy ship spawning timer.\r\n\t\t\tresetSpawnTimer();\r\n\t\t\t\/\/ Flixel framework creating process.\r\n\t\t\tsuper.create();\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Automatically calls update on everything added to the game loop.\r\n\t\t * Handle custom input and perform collisions.\r\n\t\t *\/\r\n\t\toverride public function update():void\r\n\t\t{\r\n\t\t\t\/\/ Bullet hit an enemy ship\r\n\t\t\tFlxU.overlap(_enemyShips, _bullets, overlapAlienBullet);\r\n\t\t\t\/\/ Enemy ship hit player ship\r\n\t\t\tFlxU.overlap(_enemyShips, _playerShip, overlapAlienShip);\r\n\t\t\t\/\/ Ship dead and Enter key is pressed\r\n\t\t\tif(FlxG.keys.ENTER &amp;&amp; _playerShip.dead)\r\n\t\t\t{\r\n\t\t\t\t\/\/ Reset the game state to start.\r\n\t\t\t\tFlxG.state = new PlayState();\r\n\t\t\t}\t\r\n\t\t\t\/\/ Space key and ship is active\r\n\t\t\tif(FlxG.keys.justPressed(&quot;SPACE&quot;) &amp;&amp; _playerShip.dead == false)\r\n\t\t\t{\r\n\t\t\t\t\/\/ Fire a bullet\r\n\t\t\t\tspawnBullet(_playerShip.getBulletSpawnPosition());\r\n\t\t\t}\r\n\t\t\t\/\/ Reduce enemy ship spawning timer by seconds that passed since last frame\r\n\t\t\t_enemyShipSpawnTimer -= FlxG.elapsed;\r\n\t\t\t\/\/ Enemy ship spawning timer is negative\r\n\t\t\tif(_enemyShipSpawnTimer &lt; 0)\r\n\t\t\t{\r\n\t\t\t\t\/\/ Create enemy ship\r\n\t\t\t\tspawnEnemyShip();\r\n\t\t\t\t\/\/ Reset the enemy ship spawning timer.\r\n\t\t\t\tresetSpawnTimer();\r\n\t\t\t}\r\n\t\t\t\/\/ Update default game actions\t\t\t\r\n\t\t\tsuper.update();\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Launch an enemy ship at random location.\r\n\t\t * *\/\r\n\t\tprivate function spawnEnemyShip():void\r\n\t\t{\r\n\t\t\t\/\/ Enemy ship starts on right off screen\r\n\t\t\tvar x: Number = FlxG.width;\r\n\t\t\t\/\/ Enemy ship random y position\r\n\t\t\tvar y: Number = Math.random() * (FlxG.height - 100) + 50;\r\n\t\t\t_enemyShips.add(new EnemyShip(x, y));\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Fire a bullet.\r\n\t\t * *\/\r\n\t\tprivate function spawnBullet(p:FlxPoint):void\r\n\t\t{\r\n\t\t\t\/\/ Create a bullet.\r\n\t\t\tvar bullet: PlayerShipBullet = new PlayerShipBullet(p.x, p.y);\r\n\t\t\t\/\/ Add bullet to this play state.\r\n\t\t\t_bullets.add(bullet);\r\n\t\t\t\/\/ Make bullet firing sound\r\n\t\t\tFlxG.play(SoundBullet);\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Reset the bullet and enemy ship spawning timer\r\n\t\t * *\/\r\n\t\tprivate function resetSpawnTimer():void\r\n\t\t{\r\n\t\t\t\/\/ Reset the count down timer\r\n\t\t\t_enemyShipSpawnTimer = _enemyShipSpawnInterval;\r\n\t\t\t\/\/ Shorten the countdown timer interval for next pass.\r\n\t\t\t_enemyShipSpawnInterval *= _enemyShipSpawnIntervalReductionFactor;\r\n\t\t\t\/\/ Below minimum interval\r\n\t\t\tif(_enemyShipSpawnInterval &lt; _enemyShipSpawnIntervalMin)\r\n\t\t\t{\r\n\t\t\t\t_enemyShipSpawnInterval = _enemyShipSpawnIntervalMin;\r\n\t\t\t}\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Enemy ship hit by bullet.\r\n\t\t * *\/\r\n\t\tprivate function overlapAlienBullet(enemyShip:EnemyShip, bullet:PlayerShipBullet):void\r\n\t\t{\r\n\t\t\t\/\/ Set the enemy ship as dead. See FlxObject.kill();\r\n\t\t\tenemyShip.kill();\r\n\t\t\t\/\/ Set the bullet as dead. See FlxObject.kill();\r\n\t\t\tbullet.kill();\r\n\t\t\t\/\/ Update score for Flixel.\r\n\t\t\tFlxG.score += 1;\r\n\t\t\t\/\/ Update score costume.\r\n\t\t\t_scoreText.text = FlxG.score.toString();\r\n\t\t\t\/\/ Explode the enemy ship.\r\n\t\t\tvar emitter:FlxEmitter = createEmitter();\r\n\t\t\temitter.at(enemyShip);\r\n\t\t\t\/\/ Play sound for enemy ship exploding.\r\n\t\t\tFlxG.play(SoundExplosionEnemyShip);\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Play ship and enemy ship collide.\r\n\t\t * *\/\r\n\t\tprivate function overlapAlienShip(enemyShip:EnemyShip, playerShip:PlayerShip):void\r\n\t\t{\r\n\t\t\t\/\/ Set the player ship as dead. See FlxObject.kill();\r\n\t\t\tplayerShip.kill();\r\n\t\t\t\/\/ Set the enemy ship as dead. See FlxObject.kill();\r\n\t\t\tenemyShip.kill();\r\n\t\t\t\/\/ Shake game.\r\n\t\t\tFlxG.quake.start(0.02);\r\n\t\t\t\/\/ Explode player ship\r\n\t\t\tvar emitter:FlxEmitter = createEmitter();\r\n\t\t\temitter.at(playerShip);\r\n\t\t\t\/\/ Play player ship explosion sound.\r\n\t\t\tFlxG.play(SoundExplosionShip);\r\n\t\t\t\/\/ Update game text costume.\r\n\t\t\t_gameOverText = new FlxText(0, FlxG.height \/ 2, FlxG.width,_lang_GameOverMessage);\r\n\t\t\t_gameOverText.setFormat(null, 16, 0xFF597137, &quot;center&quot;);\r\n\t\t\tadd(_gameOverText);\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Ship explosion particle emitter animation.\r\n\t\t * *\/\r\n\t\tprivate function createEmitter():FlxEmitter\r\n\t\t{\r\n\t\t\tvar emitter:FlxEmitter = new FlxEmitter();\r\n\t\t\temitter.delay = 1;\r\n\t\t\temitter.gravity = 0;\r\n\t\t\temitter.maxRotation = 0;\r\n\t\t\temitter.setXSpeed(-500, 500);\r\n\t\t\temitter.setYSpeed(-500, 500);\r\n\t\t\tvar particles: int = 10;\r\n\t\t\tfor(var i: int = 0; i &lt; particles; i++)\r\n\t\t\t{\r\n\t\t\t\tvar particle:FlxSprite = new FlxSprite();\r\n\t\t\t\tparticle.createGraphic(2, 2, 0xFF597137);\r\n\t\t\t\tparticle.exists = false;\r\n\t\t\t\temitter.add(particle);\r\n\t\t\t}\r\n\t\t\temitter.start();\r\n\t\t\tadd(emitter);\r\n\t\t\treturn emitter;\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n<p>[ad name=&#8221;Google Adsense&#8221;]<br \/>\n<strong>PlayerShip Class<\/strong><br \/>\nThis class adds the graphic for the player ship. When the Flixel framework calls the update method, the player ship is repositioned and kept with boundaries.<\/p>\n<p>When the PlayerState class requires a bullet the getBulletSpawnPosition() on line 104 provides the starting position based on the graphic design for the gun barrel.<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\npackage\r\n{\r\n\timport org.flixel.FlxG;\r\n\timport org.flixel.FlxPoint;\r\n\timport org.flixel.FlxSprite;\r\n\t\r\n\t\/**\r\n\t * Defines the player's ship.\r\n\t * *\/\r\n\tpublic class PlayerShip extends FlxSprite\r\n\t{\r\n\t\t\/**\r\n\t\t * Starting game horizontal position.\r\n\t\t * *\/\r\n\t\tprivate const SHIP_START_X:Number = 50;\t\t\r\n\t\t\/**\r\n\t\t * Starting game vertical position.\r\n\t\t * *\/\r\n\t\tprivate const SHIP_START_Y:Number = 50;\t\t\r\n\t\t\/**\r\n\t\t * Ship movement velocity.\r\n\t\t * *\/\r\n\t\tprivate const SHIP_MOVEMENT_VELOCITY:Number = 250;\t\t\r\n\t\t\/**\r\n\t\t * Padding for movement of ships.\r\n\t\t * *\/\r\n\t\tprivate const SHIP_MOVEMENT_PADDING:Number = 16;\t\t\r\n\t\t\/**\r\n\t\t * Graphic for player ship.\r\n\t\t * *\/\r\n\t\t&#x5B;Embed(source=&quot;assets\/ship_published.png&quot;)]\r\n\t\tprivate var ImgShip:Class;\r\n\t\t\r\n\t\t\/**\r\n\t\t * Player ship.\r\n\t\t * *\/\r\n\t\tpublic function PlayerShip():void\r\n\t\t{\r\n\t\t\tsuper(SHIP_START_X, SHIP_START_Y, ImgShip);\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Update ship.\r\n\t\t * *\/\r\n\t\toverride public function update():void\r\n\t\t{\r\n\t\t\t\/\/ Set horizontal velocity to stopped position.\r\n\t\t\tvelocity.x = 0;\r\n\t\t\t\/\/ Set vertical velocity to stopped position.\r\n\t\t\tvelocity.y = 0;\r\n\t\t\t\r\n\t\t\t\/\/ Left key.\r\n\t\t\tif(FlxG.keys.LEFT)\r\n\t\t\t{\r\n\t\t\t\t\/\/ Set horizontal velocity to left.\r\n\t\t\t\tvelocity.x = -SHIP_MOVEMENT_VELOCITY;\r\n\t\t\t}\r\n\t\t\t\/\/ Right key.\r\n\t\t\telse if(FlxG.keys.RIGHT)\r\n\t\t\t{\r\n\t\t\t\t\/\/ Set horizontal velocity to right.\r\n\t\t\t\tvelocity.x = SHIP_MOVEMENT_VELOCITY;\r\n\t\t\t}\r\n\t\t\t\/\/ Up key.\r\n\t\t\tif(FlxG.keys.UP)\r\n\t\t\t{\r\n\t\t\t\t\/\/ Set vertical velocity to up.\r\n\t\t\t\tvelocity.y = -SHIP_MOVEMENT_VELOCITY;\r\n\t\t\t}\r\n\t\t\t\/\/ Down key.\r\n\t\t\telse if(FlxG.keys.DOWN)\r\n\t\t\t{\r\n\t\t\t\t\/\/ Set vertical velocity to down.\r\n\t\t\t\tvelocity.y = SHIP_MOVEMENT_VELOCITY;\r\n\t\t\t}\r\n\t\t\t\/\/ Postion is near right side of screen.\r\n\t\t\tif(x &gt; FlxG.width - width - SHIP_MOVEMENT_PADDING)\r\n\t\t\t{\r\n\t\t\t\t\/\/ Hold the position.\r\n\t\t\t\tx = FlxG.width - width - SHIP_MOVEMENT_PADDING;\r\n\t\t\t}\r\n\t\t\t\/\/ Postion is near left side of screen.\r\n\t\t\telse if(x &lt; SHIP_MOVEMENT_PADDING)\r\n\t\t\t{\r\n\t\t\t\t\/\/ Hold the position.\r\n\t\t\t\tx = SHIP_MOVEMENT_PADDING;\r\n\t\t\t}\r\n\t\t\t\/\/ Postion is near bottom of screen.\r\n\t\t\tif(y &gt; FlxG.height - height - SHIP_MOVEMENT_PADDING)\r\n\t\t\t{\r\n\t\t\t\t\/\/ Hold the position.\r\n\t\t\t\ty = FlxG.height - height - SHIP_MOVEMENT_PADDING;\r\n\t\t\t}\r\n\t\t\t\/\/ Postion is near top of screen.\r\n\t\t\telse if(y &lt; SHIP_MOVEMENT_PADDING)\r\n\t\t\t{\r\n\t\t\t\t\/\/ Hold the position.\r\n\t\t\t\ty = SHIP_MOVEMENT_PADDING;\r\n\t\t\t}\t\t\t\r\n\t\t\tsuper.update();\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Position bullet starting position at tip of gun barrel. \r\n\t\t * *\/\r\n\t\tpublic function getBulletSpawnPosition():FlxPoint\r\n\t\t{\r\n\t\t\t\/\/ See ImgShip asset for placement offset metrics to end of gun barrel.\r\n\t\t\tvar p: FlxPoint = new FlxPoint(x + 108, y + 27);\r\n\t\t\treturn p;\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n<p><strong>EnemyShip Class<\/strong><br \/>\nThis class adds the graphic for the enemy ship and the initial game position when created. The PlayState spawnEnemyShip method computes the vertical starting position using some random computations and the horizontal position always off the right side of the game screen..<\/p>\n<p>It mainly provides the velocity for the enemy ships which include a left only horizontal direction and a sine wave for vertical direction.<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\npackage\r\n{\r\n\timport org.flixel.FlxSprite;\r\n\t\/**\r\n\t * Defines enemy ship.\r\n\t * *\/\r\n\tpublic class EnemyShip extends FlxSprite\r\n\t{\r\n\t\t\/**\r\n\t\t * Horizontal velocity for enemy ship.\r\n\t\t * *\/\r\n\t\tprivate const ENEMY_SHIP_HORIZONTAL_VELOCITY:Number = 200;\r\n\t\t\/**\r\n\t\t * Vertical velocity for enemy ship.\r\n\t\t * *\/\r\n\t\tprivate const ENEMY_SHIP_VERTICAL_VELOCITY:Number = 50;\r\n\t\t\/**\r\n\t\t * Graphic for enemy ship.\r\n\t\t * *\/\r\n\t\t&#x5B;Embed(source=&quot;assets\/enemy_ship_published.png&quot;)]\r\n\t\tprivate var ImgEnemy:Class;\r\n\t\t\/**\r\n\t\t * Enemy ship constructor.\r\n\t\t * *\/\r\n\t\tpublic function EnemyShip(x: Number, y: Number):void\r\n\t\t{\r\n\t\t\tsuper(x, y, ImgEnemy);\r\n\t\t\t\/\/ Enemy ship moves left.\r\n\t\t\tvelocity.x = -ENEMY_SHIP_HORIZONTAL_VELOCITY;\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Update the enemy ship.\r\n\t\t * *\/\r\n\t\toverride public function update():void\r\n\t\t{\r\n\t\t\t\/\/ Sine wave for vertical velocity.\r\n\t\t\tvelocity.y = Math.cos(x \/ ENEMY_SHIP_VERTICAL_VELOCITY) * ENEMY_SHIP_VERTICAL_VELOCITY;\r\n\t\t\tsuper.update();\r\n\t\t}\r\n\r\n\t}\r\n}\r\n<\/pre>\n<p>[ad name=&#8221;Google Adsense&#8221;]<br \/>\n<strong>PlayerShipBullet Class<\/strong><br \/>\nDefines the player ship bullet using the FlxSprite createGraphic method which simply creates a rectangular image.<\/p>\n<p>The player bullet x velocity is set to right. This matches the player ship always pointing right.<\/p>\n<p>It could be interesting providing an alternative sine based vertical velocity.<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\npackage\r\n{\r\n\timport org.flixel.FlxSprite;\r\n\t\r\n\tpublic class PlayerShipBullet extends FlxSprite\r\n\t{\r\n\t\t\/**\r\n\t\t * Player ship bullet.\r\n\t\t * *\/\r\n\t\tpublic function PlayerShipBullet(x: Number, y: Number):void\r\n\t\t{\r\n\t\t\tsuper(x, y);\r\n\t\t\t\/\/ Use simple flat colored square image for bullet.\r\n\t\t\tcreateGraphic(16, 3, 0xFF597137);\r\n\t\t\tvelocity.x = 1000;\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n<p><strong>Preloader Class<\/strong><br \/>\nThis is supposed to show a nice 8-bit style preloader bar according to Andreas Zecher. I noticed a comment on his<a href=\"http:\/\/www.creativeapplications.net\/flash\/flixel-2-tutorial-flash-tutorials-games\/\"  target = \"_blank\">tutorial<\/a> that it did not work. I ran this in the Flash CS4 bandwidth profiler and could not show the preloader. All the content is in the first frame, and for that matter in Main, for CS4 and thus all needs loading before any code would run to show a preloader. <\/p>\n<p>I kept the coding in and the Preloader class simply needs to know what class it is to measure for the preloading animation to run.<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\npackage\r\n{\r\n\timport org.flixel.FlxPreloader;\r\n\t\r\n\t\/**\r\n\t * Flixel preloader.\r\n\t * *\/\r\n\tpublic class Preloader extends FlxPreloader\r\n\t{\r\n\t\t\/**\r\n\t\t * Set Flixel preloader class name.\r\n\t\t * *\/\r\n\t\toverride public function Preloader()\r\n\t\t{\r\n\t\t\tclassName = &quot;Main&quot;;\r\n\t\t\tsuper();\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n<p><strong>Default.css<\/strong><br \/>\nThis is blank and appears to be needed to remove the &#8220;Default css file not found&#8221; warning message in Flex Builder 4. You can see the solution for this in <a href=\"http:\/\/github.com\/AdamAtomic\/flixel\/wiki\/Hello,-World!-%28Flex-Builder-3.0,-OSX%29\" target = \"_blank\"> APPENDIX C: That Annoying Default.css Warning<\/a> of an article on setting up a Flixel Actionscript project in Flex Builder.  <\/p>\n<p>Basically you need a blank Default.css file and add the switch -defaults-css-url Default.css to the project Actionscript Compiler Additional compiler arguments found in the project properties.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Decided to try an Actionscript 3 game engine and chose Flixel to start. I started late afternoon Halloween and when the devil (local neighbor in costume) showed up with treats and pizza, I was well on the way. The Flixel site lead me off to a &#8220;hello world&#8221; space ship shooter game laid out by [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[19,3,9,59,31],"class_list":["post-1059","post","type-post","status-publish","format-standard","hentry","category-general","tag-actionscript","tag-adobe-flash","tag-flex","tag-flixel","tag-gaming"],"_links":{"self":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/1059","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/comments?post=1059"}],"version-history":[{"count":24,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/1059\/revisions"}],"predecessor-version":[{"id":3696,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/1059\/revisions\/3696"}],"wp:attachment":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/media?parent=1059"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/categories?post=1059"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/tags?post=1059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}