1. UFCEKU-20-3Web Games Programming Multiplayer Gaming Game Deployment and Related Issues

2. UFCEKU-20-3Web Games Programming Agenda Multiplayer Webgames Saving Game State Game Deployment

3. UFCEKU-20-3Web Games Programming Multiplayer Webgames Game playing enhanced through human interaction Games turn based or realtime Realtime gaming most predominate form Webserver required to host network connectivity

4. UFCEKU-20-3Web Games Programming Sockets Socket server is a piece of software that runs on remote computer. A socket is one endpoint of a two- way communication link between two programs running on the network A socket is bound to a port number so that the TCP layer can identify the application that data is destined to be sent. An endpoint is a combination of an IP address and a port number. Every TCP connection can be uniquely identified by its two endpoints. Multiple connections can be made between a client host and the server.

5. UFCEKU-20-3Web Games Programming Multiplayer:Sockets

6. UFCEKU-20-3Web Games Programming Sockets Need to have a common port number for client and server www.electro-server.com - free 25 user edition Example Java code on the module website and the Java tutorial here: http://java.sun.com/docs/books/tutorial/networking/sockets/index.html

7. UFCEKU-20-3Web Games Programming Saving Game State Saving online data content direct to local system would break the security model Flash uses a local ShareObject var localData:SharedObject = SharedObject.getLocal(“gameData”); Save game state to a remote server - need to be able to run scripts -and probably want users to login etc. Remote servers often used to store highscores for online games

8. UFCEKU-20-3Web Games Programming Game Deployment Game deployed on a remote webserver Client required to view content Flash Player - Flash SDK provides code to launch player install Shockwave Player - not a transparent install process Presentation fixed sized window usually accompanied by adverts Examples www.miniclip.com shockwave3d.com

9. UFCEKU-20-3Web Games Programming Local Deployment Export Flash game scenario a a native executable file Windows platform an.exe file Mac platform - a projector file

10. UFCEKU-20-3Web Games Programming

11. UFCEKU-20-3Web Games Programming Basic Web Deployment Export Flash as a.swf file Create html file and Insert Media (Dreamweaver) and include JavaScript file “ASRunActiveContent.js” Publish to remote website and test in various web browsers

12. UFCEKU-20-3Web Games Programming Polished Web Deployment Export Flash as a.swf file with preloader Create html file frameset with appropriate design and layout to feature Flash content Insert Media (Dreamweaver) and include JavaScrip file “ASRunActiveContent.js” Publish to remote website and test in various web browsers

13. UFCEKU-20-3Web Games Programming

14. UFCEKU-20-3Web Games Programming

15. UFCEKU-20-3Web Games Programming

16. UFCEKU-20-3Web Games Programming Preloaders Visual indication of time required for loading content Preloader can be internal: Show progress while staying on frame one until main content downloads Once content loaded move to required frame and play Preloader can load an external.swf file. Preloader loads external.swf while showing progress Once the target movie is fully downloaded it will replace the preloader movie Preloader movie will determine some settings of the target movie, e.g. frame rate.

17. UFCEKU-20-3Web Games Programming Preloader:Internal timeline Loading… downloading Movie downloaded ? noyes play

18. UFCEKU-20-3Web Games Programming Preloader:External Loading… downloading Movie downloaded ? noyes replace preloader.swf movie with target.swf movie preloader.swftarget.swf

19. UFCEKU-20-3Web Games Programming Preloaders: Testing In the authoring environment: Compile and run movie then choose View- Simulate Download Need some content to see the download or set the download rate to low value Results can be misleading and sometimes the authoring environment gets in the way etc. No substitute for testing from a real website From a remote webserver The most reliable way to test your work - using various browsers and platforms - embed a large sound file to give the preloader something to do over the network for testing purposes

20. UFCEKU-20-3Web Games Programming Simulating Downloading Showing Internal Preloader

21. UFCEKU-20-3Web Games Programming // Frame-based preloader - assumes loadPercent dynamic textfield and progressBar.mc on interface // stop the movie from playing this.stop(); //add the listener for load progress event and reference the LoaderInfo object of the main swf. this.loaderInfo.addEventListener(ProgressEvent.PROGRESS,checkLoadProgress); // function to handle the progress event function checkLoadProgress(event:ProgressEvent):void { // divide the bytes loaded by the total time 100 to give the correct value var progressPercentComplete:Number=(event.bytesLoaded / event.bytesTotal)*100; //output a percentage text via the dynamic text field loadPercent.text = "LOADING... "+ String(Math.floor(progressPercentComplete)) + " %"; // scale the progress movie clip - need to reduce by 100th to achieve correct size progressBar_mc.scaleX = progressPercentComplete *.01; // if all the file is loaded if (progressPercentComplete == 100) { //do what needs to be done when your file has loaded progressBar_mc.scaleX = 100; // stop at the second frame - might need to gotAndPlay() deoending on scenario gotoAndStop(2); //remove the progress listener - now not required this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS,checkLoadProgress); }

22. UFCEKU-20-3Web Games Programming Frame Preloader Interface progressBar_mc rectangle Dynamic text field loadPercent

23. UFCEKU-20-3Web Games Programming Internet Explorer Bug Loads first time but not after a page refresh…

24. UFCEKU-20-3Web Games Programming // AS3 preloader to display load status of an external movie file import flash.display.*; import flash.events.*; import flash.text.*; /* make sure the frame rate of the preloader movie is the same as the external movie as the external movie frame rate will be set to the preloader frame rate */ // change this line to reference the name of your external movie var externalContent:URLRequest = new URLRequest("platformgame.swf"); var externalMovieLoader:Loader = new Loader(); externalMovieLoader.load(externalContent); externalMovieLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, preLoader); externalMovieLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete); function preLoader(event:ProgressEvent):void { var loaded:Number = Math.round(event.bytesLoaded); var total:Number = Math.round(event.bytesTotal); var progressBarScale:int = 0; var percent:Number = loaded/total * 100; backDrop_mc.visible = false; progressBarScale= percent; preLoader_mc.scaleX = progressBarScale*.01; percentText.text = Math.round(percent) + "%" } function loadComplete(event:Event):void { externalMovieLoader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS,preLoader); externalMovieLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, loadComplete); stop(); addChild(externalMovieLoader); gotoAndPlay(3); backDrop_mc.visible = true; }

25. UFCEKU-20-3Web Games Programming Deployment Don’t deploy your project files! i.e..fla Only deploy.swf,.html.js and any related.mp3 files Assignment must be published to your UWE webspace