PageRenderTime 31ms CodeModel.GetById 17ms RepoModel.GetById 1ms app.codeStats 0ms

/js/BubbleDots/BubbleDotsView.js

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