CCMotionStreak.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
  1. /****************************************************************************
  2. Copyright (c) 2010-2012 cocos2d-x.org
  3. Copyright (c) 2008-2010 Ricardo Quesada
  4. Copyright (c) 2011 Zynga Inc.
  5. Copyright (c) 2008-2009 Jason Booth
  6. http://www.cocos2d-x.org
  7. Permission is hereby granted, free of charge, to any person obtaining a copy
  8. of this software and associated documentation files (the "Software"), to deal
  9. in the Software without restriction, including without limitation the rights
  10. to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  11. copies of the Software, and to permit persons to whom the Software is
  12. furnished to do so, subject to the following conditions:
  13. The above copyright notice and this permission notice shall be included in
  14. all copies or substantial portions of the Software.
  15. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  16. IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  17. FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  18. AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  19. LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  20. OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  21. THE SOFTWARE.
  22. ****************************************************************************/
  23. /**
  24. * cc.MotionStreak manages a Ribbon based on it's motion in absolute space. <br/>
  25. * You construct it with a fadeTime, minimum segment size, texture path, texture <br/>
  26. * length and color. The fadeTime controls how long it takes each vertex in <br/>
  27. * the streak to fade out, the minimum segment size it how many pixels the <br/>
  28. * streak will move before adding a new ribbon segment, and the texture <br/>
  29. * length is the how many pixels the texture is stretched across. The texture <br/>
  30. * is vertically aligned along the streak segment.
  31. * @class
  32. * @extends cc.NodeRGBA
  33. */
  34. cc.MotionStreak = cc.NodeRGBA.extend(/** @lends cc.MotionStreak# */{
  35. _fastMode:false,
  36. _startingPositionInitialized:false,
  37. /** texture used for the motion streak */
  38. _texture:null,
  39. _blendFunc:null,
  40. _positionR:null,
  41. _stroke:0,
  42. _fadeDelta:0,
  43. _minSeg:0,
  44. _maxPoints:0,
  45. _nuPoints:0,
  46. _previousNuPoints:0,
  47. /** Pointers */
  48. _pointVertexes:null,
  49. _pointState:null,
  50. // webgl
  51. _vertices:null,
  52. _colorPointer:null,
  53. _texCoords:null,
  54. _verticesBuffer:null,
  55. _colorPointerBuffer:null,
  56. _texCoordsBuffer:null,
  57. /**
  58. * Constructor
  59. */
  60. ctor: function () {
  61. cc.NodeRGBA.prototype.ctor.call(this);
  62. this._positionR = cc.p(0, 0);
  63. this._blendFunc = new cc.BlendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
  64. this._vertexWebGLBuffer = cc.renderContext.createBuffer();
  65. this._fastMode = false;
  66. this._startingPositionInitialized = false;
  67. this._texture = null;
  68. this._stroke = 0;
  69. this._fadeDelta = 0;
  70. this._minSeg = 0;
  71. this._maxPoints = 0;
  72. this._nuPoints = 0;
  73. this._previousNuPoints = 0;
  74. /** Pointers */
  75. this._pointVertexes = null;
  76. this._pointState = null;
  77. // webgl
  78. this._vertices = null;
  79. this._colorPointer = null;
  80. this._texCoords = null;
  81. this._verticesBuffer = null;
  82. this._colorPointerBuffer = null;
  83. this._texCoordsBuffer = null;
  84. },
  85. /**
  86. * @return {cc.Texture2D}
  87. */
  88. getTexture:function () {
  89. return this._texture;
  90. },
  91. /**
  92. * @param {cc.Texture2D} texture
  93. */
  94. setTexture:function (texture) {
  95. if (this._texture != texture)
  96. this._texture = texture;
  97. },
  98. /**
  99. * @return {cc.BlendFunc}
  100. */
  101. getBlendFunc:function () {
  102. return this._blendFunc;
  103. },
  104. /**
  105. * @param {Number} src
  106. * @param {Number} dst
  107. */
  108. setBlendFunc:function (src, dst) {
  109. if (dst === undefined) {
  110. this._blendFunc = src;
  111. } else {
  112. this._blendFunc.src = src;
  113. this._blendFunc.dst = dst;
  114. }
  115. },
  116. getOpacity:function () {
  117. cc.log("cc.MotionStreak.getOpacity has not been supported.");
  118. return 0;
  119. },
  120. setOpacity:function (opacity) {
  121. cc.log("cc.MotionStreak.setOpacity has not been supported.");
  122. },
  123. setOpacityModifyRGB:function (value) {
  124. },
  125. isOpacityModifyRGB:function () {
  126. return false;
  127. },
  128. onExit:function(){
  129. cc.Node.prototype.onExit.call(this);
  130. if(this._verticesBuffer)
  131. cc.renderContext.deleteBuffer(this._verticesBuffer);
  132. if(this._texCoordsBuffer)
  133. cc.renderContext.deleteBuffer(this._texCoordsBuffer);
  134. if(this._colorPointerBuffer)
  135. cc.renderContext.deleteBuffer(this._colorPointerBuffer);
  136. },
  137. isFastMode:function () {
  138. return this._fastMode;
  139. },
  140. /**
  141. * set fast mode
  142. * @param {Boolean} fastMode
  143. */
  144. setFastMode:function (fastMode) {
  145. this._fastMode = fastMode;
  146. },
  147. isStartingPositionInitialized:function () {
  148. return this._startingPositionInitialized;
  149. },
  150. setStartingPositionInitialized:function (startingPositionInitialized) {
  151. this._startingPositionInitialized = startingPositionInitialized;
  152. },
  153. /**
  154. * initializes a motion streak with fade in seconds, minimum segments, stroke's width, color and texture filename or texture
  155. * @param {Number} fade time to fade
  156. * @param {Number} minSeg minimum segment size
  157. * @param {Number} stroke stroke's width
  158. * @param {Number} color
  159. * @param {string|cc.Texture2D} texture texture filename or texture
  160. * @return {Boolean}
  161. */
  162. initWithFade:function (fade, minSeg, stroke, color, texture) {
  163. if(!texture)
  164. throw "cc.MotionStreak.initWithFade(): Invalid filename or texture";
  165. if (typeof(texture) === "string")
  166. texture = cc.TextureCache.getInstance().addImage(texture);
  167. cc.Node.prototype.setPosition.call(this, cc.PointZero());
  168. this.setAnchorPoint(0,0);
  169. this.ignoreAnchorPointForPosition(true);
  170. this._startingPositionInitialized = false;
  171. this._fastMode = true;
  172. this._minSeg = (minSeg == -1.0) ? (stroke / 5.0) : minSeg;
  173. this._minSeg *= this._minSeg;
  174. this._stroke = stroke;
  175. this._fadeDelta = 1.0 / fade;
  176. var locMaxPoints = (0 | (fade * 60)) + 2;
  177. this._nuPoints = 0;
  178. this._pointState = new Float32Array(locMaxPoints);
  179. this._pointVertexes = new Float32Array(locMaxPoints * 2);
  180. this._vertices = new Float32Array(locMaxPoints * 4);
  181. this._texCoords = new Float32Array(locMaxPoints * 4);
  182. this._colorPointer = new Uint8Array(locMaxPoints * 8);
  183. this._maxPoints = locMaxPoints;
  184. var gl = cc.renderContext;
  185. this._verticesBuffer = gl.createBuffer();
  186. this._texCoordsBuffer = gl.createBuffer();
  187. this._colorPointerBuffer = gl.createBuffer();
  188. // Set blend mode
  189. this._blendFunc.src = gl.SRC_ALPHA;
  190. this._blendFunc.dst = gl.ONE_MINUS_SRC_ALPHA;
  191. // shader program
  192. this.setShaderProgram(cc.ShaderCache.getInstance().programForKey(cc.SHADER_POSITION_TEXTURECOLOR));
  193. this.setTexture(texture);
  194. this.setColor(color);
  195. this.scheduleUpdate();
  196. //bind buffer
  197. gl.bindBuffer(gl.ARRAY_BUFFER, this._verticesBuffer);
  198. gl.bufferData(gl.ARRAY_BUFFER, this._vertices, gl.DYNAMIC_DRAW);
  199. gl.bindBuffer(gl.ARRAY_BUFFER, this._texCoordsBuffer);
  200. gl.bufferData(gl.ARRAY_BUFFER, this._texCoords, gl.DYNAMIC_DRAW);
  201. gl.bindBuffer(gl.ARRAY_BUFFER, this._colorPointerBuffer);
  202. gl.bufferData(gl.ARRAY_BUFFER, this._colorPointer, gl.DYNAMIC_DRAW);
  203. return true;
  204. },
  205. /**
  206. * color used for the tint
  207. * @param {cc.Color3B} colors
  208. */
  209. tintWithColor:function (colors) {
  210. this.setColor(colors);
  211. // Fast assignation
  212. var locColorPointer = this._colorPointer;
  213. for (var i = 0, len = this._nuPoints * 2; i < len; i++) {
  214. locColorPointer[i * 4] = colors.r;
  215. locColorPointer[i * 4 + 1] = colors.g;
  216. locColorPointer[i * 4 + 2] = colors.b;
  217. }
  218. },
  219. /**
  220. * Remove all living segments of the ribbon
  221. */
  222. reset:function () {
  223. this._nuPoints = 0;
  224. },
  225. /**
  226. * @override
  227. * @param {cc.Point} position
  228. */
  229. setPosition:function (position, yValue) {
  230. this._startingPositionInitialized = true;
  231. if(yValue === undefined){
  232. this._positionR.x = position.x;
  233. this._positionR.y = position.y;
  234. } else {
  235. this._positionR.x = position;
  236. this._positionR.y = yValue;
  237. }
  238. },
  239. /**
  240. * @override
  241. * @param {WebGLRenderingContext} ctx
  242. */
  243. draw:function (ctx) {
  244. if (this._nuPoints <= 1)
  245. return;
  246. if(this._texture && this._texture.isLoaded()){
  247. ctx = ctx || cc.renderContext;
  248. cc.NODE_DRAW_SETUP(this);
  249. cc.glEnableVertexAttribs(cc.VERTEX_ATTRIB_FLAG_POS_COLOR_TEX);
  250. cc.glBlendFunc(this._blendFunc.src, this._blendFunc.dst);
  251. cc.glBindTexture2D(this._texture);
  252. //position
  253. ctx.bindBuffer(ctx.ARRAY_BUFFER, this._verticesBuffer);
  254. ctx.bufferData(ctx.ARRAY_BUFFER, this._vertices, ctx.DYNAMIC_DRAW);
  255. ctx.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, ctx.FLOAT, false, 0, 0);
  256. //texcoords
  257. ctx.bindBuffer(ctx.ARRAY_BUFFER, this._texCoordsBuffer);
  258. ctx.bufferData(ctx.ARRAY_BUFFER, this._texCoords, ctx.DYNAMIC_DRAW);
  259. ctx.vertexAttribPointer(cc.VERTEX_ATTRIB_TEX_COORDS, 2, ctx.FLOAT, false, 0, 0);
  260. //colors
  261. ctx.bindBuffer(ctx.ARRAY_BUFFER, this._colorPointerBuffer);
  262. ctx.bufferData(ctx.ARRAY_BUFFER, this._colorPointer, ctx.DYNAMIC_DRAW);
  263. ctx.vertexAttribPointer(cc.VERTEX_ATTRIB_COLOR, 4, ctx.UNSIGNED_BYTE, true, 0, 0);
  264. ctx.drawArrays(ctx.TRIANGLE_STRIP, 0, this._nuPoints * 2);
  265. cc.g_NumberOfDraws ++;
  266. }
  267. },
  268. /**
  269. * @override
  270. * @param {Number} delta
  271. */
  272. update:function (delta) {
  273. if (!this._startingPositionInitialized)
  274. return;
  275. delta *= this._fadeDelta;
  276. var newIdx, newIdx2, i, i2;
  277. var mov = 0;
  278. // Update current points
  279. var locNuPoints = this._nuPoints;
  280. var locPointState = this._pointState, locPointVertexes = this._pointVertexes, locVertices = this._vertices;
  281. var locColorPointer = this._colorPointer;
  282. for (i = 0; i < locNuPoints; i++) {
  283. locPointState[i] -= delta;
  284. if (locPointState[i] <= 0)
  285. mov++;
  286. else {
  287. newIdx = i - mov;
  288. if (mov > 0) {
  289. // Move data
  290. locPointState[newIdx] = locPointState[i];
  291. // Move point
  292. locPointVertexes[newIdx * 2] = locPointVertexes[i * 2];
  293. locPointVertexes[newIdx * 2 + 1] = locPointVertexes[i * 2 + 1];
  294. // Move vertices
  295. i2 = i * 2;
  296. newIdx2 = newIdx * 2;
  297. locVertices[newIdx2 * 2] = locVertices[i2 * 2];
  298. locVertices[newIdx2 * 2 + 1] = locVertices[i2 * 2 + 1];
  299. locVertices[(newIdx2 + 1) * 2] = locVertices[(i2 + 1) * 2];
  300. locVertices[(newIdx2 + 1) * 2 + 1] = locVertices[(i2 + 1) * 2 + 1];
  301. // Move color
  302. i2 *= 4;
  303. newIdx2 *= 4;
  304. locColorPointer[newIdx2 + 0] = locColorPointer[i2 + 0];
  305. locColorPointer[newIdx2 + 1] = locColorPointer[i2 + 1];
  306. locColorPointer[newIdx2 + 2] = locColorPointer[i2 + 2];
  307. locColorPointer[newIdx2 + 4] = locColorPointer[i2 + 4];
  308. locColorPointer[newIdx2 + 5] = locColorPointer[i2 + 5];
  309. locColorPointer[newIdx2 + 6] = locColorPointer[i2 + 6];
  310. } else
  311. newIdx2 = newIdx * 8;
  312. var op = locPointState[newIdx] * 255.0;
  313. locColorPointer[newIdx2 + 3] = op;
  314. locColorPointer[newIdx2 + 7] = op;
  315. }
  316. }
  317. locNuPoints -= mov;
  318. // Append new point
  319. var appendNewPoint = true;
  320. if (locNuPoints >= this._maxPoints)
  321. appendNewPoint = false;
  322. else if (locNuPoints > 0) {
  323. var a1 = cc.pDistanceSQ(cc.p(locPointVertexes[(locNuPoints - 1) * 2], locPointVertexes[(locNuPoints - 1) * 2 + 1]),
  324. this._positionR) < this._minSeg;
  325. var a2 = (locNuPoints == 1) ? false : (cc.pDistanceSQ(
  326. cc.p(locPointVertexes[(locNuPoints - 2) * 2], locPointVertexes[(locNuPoints - 2) * 2 + 1]), this._positionR) < (this._minSeg * 2.0));
  327. if (a1 || a2)
  328. appendNewPoint = false;
  329. }
  330. if (appendNewPoint) {
  331. locPointVertexes[locNuPoints * 2] = this._positionR.x;
  332. locPointVertexes[locNuPoints * 2 + 1] = this._positionR.y;
  333. locPointState[locNuPoints] = 1.0;
  334. // Color assignment
  335. var offset = locNuPoints * 8;
  336. var locDisplayedColor = this._displayedColor;
  337. locColorPointer[offset] = locDisplayedColor.r;
  338. locColorPointer[offset + 1] = locDisplayedColor.g;
  339. locColorPointer[offset + 2] = locDisplayedColor.b;
  340. //*((ccColor3B*)(m_pColorPointer + offset+4)) = this._color;
  341. locColorPointer[offset + 4] = locDisplayedColor.r;
  342. locColorPointer[offset + 5] = locDisplayedColor.g;
  343. locColorPointer[offset + 6] = locDisplayedColor.b;
  344. // Opacity
  345. locColorPointer[offset + 3] = 255;
  346. locColorPointer[offset + 7] = 255;
  347. // Generate polygon
  348. if (locNuPoints > 0 && this._fastMode) {
  349. if (locNuPoints > 1)
  350. cc.vertexLineToPolygon(locPointVertexes, this._stroke, this._vertices, locNuPoints, 1);
  351. else
  352. cc.vertexLineToPolygon(locPointVertexes, this._stroke, this._vertices, 0, 2);
  353. }
  354. locNuPoints++;
  355. }
  356. if (!this._fastMode)
  357. cc.vertexLineToPolygon(locPointVertexes, this._stroke, this._vertices, 0, locNuPoints);
  358. // Updated Tex Coords only if they are different than previous step
  359. if (locNuPoints && this._previousNuPoints != locNuPoints) {
  360. var texDelta = 1.0 / locNuPoints;
  361. var locTexCoords = this._texCoords;
  362. for (i = 0; i < locNuPoints; i++) {
  363. locTexCoords[i * 4] = 0;
  364. locTexCoords[i * 4 + 1] = texDelta * i;
  365. locTexCoords[(i * 2 + 1) * 2] = 1;
  366. locTexCoords[(i * 2 + 1) * 2 + 1] = texDelta * i;
  367. }
  368. this._previousNuPoints = locNuPoints;
  369. }
  370. this._nuPoints = locNuPoints;
  371. }
  372. });
  373. /**
  374. * creates and initializes a motion streak with fade in seconds, minimum segments, stroke's width, color, texture filename or texture
  375. * @param {Number} fade time to fade
  376. * @param {Number} minSeg minimum segment size
  377. * @param {Number} stroke stroke's width
  378. * @param {Number} color
  379. * @param {string|cc.Texture2D} texture texture filename or texture
  380. * @return {cc.MotionStreak}
  381. */
  382. cc.MotionStreak.create = function (fade, minSeg, stroke, color, texture) {
  383. var ret = new cc.MotionStreak();
  384. if (ret && ret.initWithFade(fade, minSeg, stroke, color, texture))
  385. return ret;
  386. return null;
  387. };