/js/BubbleDots/BubbleDotsView.js
JavaScript | 177 lines | 104 code | 26 blank | 47 comment | 2 complexity | 70f866910df609dd32cb5935d5347a17 MD5 | raw file
Possible License(s): GPL-2.0, LGPL-2.1, MPL-2.0-no-copyleft-exception, BSD-3-Clause
- /**
- File:
- AbstractServerGame.js
- Created By:
- Mario Gonzalez
- Project:
- RealtimeMultiplayerNodeJS
- Abstract:
- This class is the base Game controller in RealtimeMultiplayerGame on the server side.
- It provides things such as dropping players, and contains a ServerNetChannel
- Basic Usage:
- [This class is not instantiated! - below is an example of using this class by extending it]
- (function(){
- MyGameClass = function() {
- return this;
- }
- RealtimeMultiplayerGame.extend(MyGameClass, RealtimeMultiplayerGame.AbstractServerGame, null);
- };
- Version:
- 1.0
- */
- (function () {
- BubbleDots.DemoView = function () {
- this.setupCAAT();
- this.setupStats();
- };
- BubbleDots.DemoView.prototype = {
- // Properties
- caatDirector: null, // CAAT Director instance
- caatScene: null, // CAAT Scene instance
- caatRoot: null,
- focusCharacter: null, // The 'camera' will follow this player
- stats: null, // Stats.js instance
- textfield: null, // CAAT text
- // Methods
- setupCAAT: function () {
- this.caatScene = new CAAT.Scene(); // Create a scene, all directors must have at least one scene - this is where all your stuff goes
- this.caatScene.create(); // Notice we call create when creating this, and ShapeActor below. Both are Actors
- this.caatScene.setFillStyle('#323232');
- this.caatDirector = new CAAT.Director().initialize(BubbleDots.Constants.GAME_WIDTH, BubbleDots.Constants.GAME_HEIGHT); // Create the director instance
- this.caatDirector.addScene(this.caatScene); // Immediately add the scene once it's created
- this.caatDirector.setImagesCache(BubbleDots.IMAGE_CACHE);
- this.caatRoot = new CAAT.ActorContainer()
- .setBounds(0, 0, this.caatScene.width, this.caatScene.height)
- .create()
- .enableEvents(false);
- this.caatScene.addChild(this.caatRoot);
- this.setupTextfield();
- this.createGround();
- },
- setupTextfield: function () {
- // Create a textfield
- this.textfield = new CAAT.TextActor();
- this.textfield.setFont("12px sans-serif");
- this.textfield.textAlign = "left";
- this.textfield.textBaseline = "top";
- this.textfield.calcTextSize(this.caatDirector);
- this.textfield.setSize(this.textfield.textWidth, this.textfield.textHeight);
- this.textfield.create();
- this.textfield.fillStyle = "#EEEEEE";
- this.textfield.setLocation(10, 10);
- this.caatScene.addChild(this.textfield);
- },
- /**
- * Updates our current view, passing along the current actual time (via Date().getTime());
- * @param {Number} gameClockReal The current actual time, according to the game
- */
- update: function (gameClockReal) {
- var delta = gameClockReal - this.caatDirector.timeline;
- if (this.focusCharacter) {
- this.followFocusCharacter();
- }
- this.caatDirector.render(delta);
- this.caatDirector.timeline = gameClockReal;
- },
- followFocusCharacter: function () {
- var camSpeed = 0.1;
- var targetX = -this.focusCharacter.x + this.caatScene.width / 2 - 100;
- var targetY = -this.focusCharacter.y + this.caatScene.height / 2 + 50;
- this.caatRoot.x -= (this.caatRoot.x - targetX) * camSpeed;
- this.caatRoot.y -= (this.caatRoot.y - targetY) * camSpeed * 2;
- },
- /**
- * Creates a Stats.js instance and adds it to the page
- */
- setupStats: function () {
- var container = document.createElement('div');
- this.stats = new Stats();
- this.stats.domElement.style.position = 'absolute';
- this.stats.domElement.style.top = '0px';
- container.appendChild(this.stats.domElement);
- document.body.appendChild(container);
- },
- addEntity: function (anEntityView) {
- // console.log( "Adding Entity To CAAT", anEntityView );
- this.caatRoot.addChild(anEntityView);
- },
- removeEntity: function (anEntityView) {
- console.log("Removing Entity From CAAT", anEntityView);
- this.caatRoot.removeChild(anEntityView);
- },
- /**
- * Create a view for an entity in CAAT using the entity description
- * @param {Object} entityDesc An object containing properties for this entity, sent from the server
- */
- createEntityView: function (entityDesc) {
- // Retrieve the image from caatDirector (stored in the preloading sequence in script.js)
- var imageName = "particle" + entityDesc.color;
- var imageRef = this.caatDirector.getImage(imageName);
- var caatImage = new CAAT.CompoundImage()
- .initialize(imageRef, 1, 1);
- // Create the actor using the image
- var actor = this.CAATSprite = new CAAT.SpriteActor()
- .create()
- .setSpriteImage(caatImage)
- .setLocation(entityDesc.x, entityDesc.y);
- return actor;
- },
- createGround: function () {
- // Retrieve the image from caatDirector (stored in the preloading sequence in script.js)
- var imageRef = this.caatDirector.getImage("ground");
- var caatImage = new CAAT.CompoundImage()
- .initialize(imageRef, 1, 1);
- for (var i = 0; i < 10; ++i) {
- // Create the actor using the image
- var actor = this.CAATSprite = new CAAT.SpriteActor()
- .create()
- .setSpriteImage(caatImage)
- .setLocation(i * caatImage.width, 470);
- this.caatRoot.addChild(actor);
- }
- return actor;
- },
- /**
- * Insert the CAATDirector canvas into an HTMLElement
- * @param {String} id An HTMLElement id
- */
- insertIntoHTMLElementWithId: function (id) {
- document.getElementById(id).appendChild(this.caatDirector.canvas);
- },
- // Memory
- dealloc: function () {
- this.director.destroy();
- },
- setFocusCharacter: function (entity) {
- this.focusCharacter = entity;
- }
- };
- })();