/js/BubbleDots/BubbleDotsView.js
JavaScript | 177 lines | 104 code | 26 blank | 47 comment | 2 complexity | 70f866910df609dd32cb5935d5347a17 MD5 | raw file
1/** 2 File: 3 AbstractServerGame.js 4 Created By: 5 Mario Gonzalez 6 Project: 7 RealtimeMultiplayerNodeJS 8 Abstract: 9 This class is the base Game controller in RealtimeMultiplayerGame on the server side. 10 It provides things such as dropping players, and contains a ServerNetChannel 11 Basic Usage: 12 [This class is not instantiated! - below is an example of using this class by extending it] 13 14 (function(){ 15 MyGameClass = function() { 16 return this; 17 } 18 19 RealtimeMultiplayerGame.extend(MyGameClass, RealtimeMultiplayerGame.AbstractServerGame, null); 20 }; 21 Version: 22 1.0 23 */ 24(function () { 25 BubbleDots.DemoView = function () { 26 this.setupCAAT(); 27 this.setupStats(); 28 }; 29 30 BubbleDots.DemoView.prototype = { 31 // Properties 32 caatDirector: null, // CAAT Director instance 33 caatScene: null, // CAAT Scene instance 34 caatRoot: null, 35 focusCharacter: null, // The 'camera' will follow this player 36 stats: null, // Stats.js instance 37 textfield: null, // CAAT text 38 39 // Methods 40 setupCAAT: function () { 41 this.caatScene = new CAAT.Scene(); // Create a scene, all directors must have at least one scene - this is where all your stuff goes 42 this.caatScene.create(); // Notice we call create when creating this, and ShapeActor below. Both are Actors 43 this.caatScene.setFillStyle('#323232'); 44 45 this.caatDirector = new CAAT.Director().initialize(BubbleDots.Constants.GAME_WIDTH, BubbleDots.Constants.GAME_HEIGHT); // Create the director instance 46 this.caatDirector.addScene(this.caatScene); // Immediately add the scene once it's created 47 this.caatDirector.setImagesCache(BubbleDots.IMAGE_CACHE); 48 49 50 this.caatRoot = new CAAT.ActorContainer() 51 .setBounds(0, 0, this.caatScene.width, this.caatScene.height) 52 .create() 53 .enableEvents(false); 54 this.caatScene.addChild(this.caatRoot); 55 56 this.setupTextfield(); 57 this.createGround(); 58 }, 59 60 setupTextfield: function () { 61 // Create a textfield 62 this.textfield = new CAAT.TextActor(); 63 this.textfield.setFont("12px sans-serif"); 64 this.textfield.textAlign = "left"; 65 this.textfield.textBaseline = "top"; 66 this.textfield.calcTextSize(this.caatDirector); 67 this.textfield.setSize(this.textfield.textWidth, this.textfield.textHeight); 68 this.textfield.create(); 69 this.textfield.fillStyle = "#EEEEEE"; 70 this.textfield.setLocation(10, 10); 71 this.caatScene.addChild(this.textfield); 72 }, 73 74 /** 75 * Updates our current view, passing along the current actual time (via Date().getTime()); 76 * @param {Number} gameClockReal The current actual time, according to the game 77 */ 78 update: function (gameClockReal) { 79 var delta = gameClockReal - this.caatDirector.timeline; 80 81 if (this.focusCharacter) { 82 this.followFocusCharacter(); 83 } 84 85 this.caatDirector.render(delta); 86 this.caatDirector.timeline = gameClockReal; 87 }, 88 89 followFocusCharacter: function () { 90 var camSpeed = 0.1; 91 var targetX = -this.focusCharacter.x + this.caatScene.width / 2 - 100; 92 var targetY = -this.focusCharacter.y + this.caatScene.height / 2 + 50; 93 this.caatRoot.x -= (this.caatRoot.x - targetX) * camSpeed; 94 this.caatRoot.y -= (this.caatRoot.y - targetY) * camSpeed * 2; 95 }, 96 97 /** 98 * Creates a Stats.js instance and adds it to the page 99 */ 100 setupStats: function () { 101 var container = document.createElement('div'); 102 this.stats = new Stats(); 103 this.stats.domElement.style.position = 'absolute'; 104 this.stats.domElement.style.top = '0px'; 105 container.appendChild(this.stats.domElement); 106 document.body.appendChild(container); 107 }, 108 109 addEntity: function (anEntityView) { 110// console.log( "Adding Entity To CAAT", anEntityView ); 111 this.caatRoot.addChild(anEntityView); 112 }, 113 114 removeEntity: function (anEntityView) { 115 console.log("Removing Entity From CAAT", anEntityView); 116 this.caatRoot.removeChild(anEntityView); 117 }, 118 119 /** 120 * Create a view for an entity in CAAT using the entity description 121 * @param {Object} entityDesc An object containing properties for this entity, sent from the server 122 */ 123 createEntityView: function (entityDesc) { 124 // Retrieve the image from caatDirector (stored in the preloading sequence in script.js) 125 var imageName = "particle" + entityDesc.color; 126 var imageRef = this.caatDirector.getImage(imageName); 127 var caatImage = new CAAT.CompoundImage() 128 .initialize(imageRef, 1, 1); 129 130 // Create the actor using the image 131 var actor = this.CAATSprite = new CAAT.SpriteActor() 132 .create() 133 .setSpriteImage(caatImage) 134 .setLocation(entityDesc.x, entityDesc.y); 135 136 return actor; 137 }, 138 139 createGround: function () { 140 // Retrieve the image from caatDirector (stored in the preloading sequence in script.js) 141 var imageRef = this.caatDirector.getImage("ground"); 142 var caatImage = new CAAT.CompoundImage() 143 .initialize(imageRef, 1, 1); 144 145 for (var i = 0; i < 10; ++i) { 146 // Create the actor using the image 147 var actor = this.CAATSprite = new CAAT.SpriteActor() 148 .create() 149 .setSpriteImage(caatImage) 150 .setLocation(i * caatImage.width, 470); 151 152 this.caatRoot.addChild(actor); 153 } 154 155 return actor; 156 }, 157 158 /** 159 * Insert the CAATDirector canvas into an HTMLElement 160 * @param {String} id An HTMLElement id 161 */ 162 insertIntoHTMLElementWithId: function (id) { 163 document.getElementById(id).appendChild(this.caatDirector.canvas); 164 }, 165 166 // Memory 167 dealloc: function () { 168 this.director.destroy(); 169 }, 170 171 setFocusCharacter: function (entity) { 172 this.focusCharacter = entity; 173 } 174 }; 175})(); 176 177