/js/BubbleDots/BubbleDotsView.js

  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