Permalink
Browse files

Updated the HTML element context to render animated tiles properly

Fixed a bug in the level editor which would try to store properties when there was no property setter method
 Added run.sh for Mac or Linux users to be able to launch the simple web server Jibble
 Fixed a bug in tilemap and now passing the delta time (dt) to the getFrame method
  • Loading branch information...
1 parent c579058 commit afd9519a758a92ff13b4816d5fad98137ca3309c @bfattori committed Feb 1, 2013
View
@@ -111,7 +111,8 @@ var TilemapDemo = function() {
run: function() {
// Create the 2D context
- this.renderContext = R.rendercontexts.VirtualHTMLDivContext.create("playfield", 800, 600, 3200, 3200);
+// this.renderContext = R.rendercontexts.VirtualCanvasContext.create("playfield", 800, 600, 3200, 3200);
+ this.renderContext = R.rendercontexts.VirtualHTMLDivContext.create("playfield", 800, 600, 3200, 3200);
this.renderContext.setWorldScale(this.areaScale);
R.Engine.getDefaultContext().add(this.renderContext);
this.renderContext.setBackgroundColor("#0a0a0a");
@@ -23,7 +23,7 @@
{
"Name": "Actor",
"ZIndex": 1,
- "Position": "496.00,320.00",
+ "Position": "466.00,320.00",
"Sprite": "sprites:goomba",
"Collidable": false,
"Gravity": true,
@@ -32,7 +32,7 @@
"ACTOR_CONFIG": {
"actorId": "",
"bitMask": "0",
- "onInit": "this.moveRight(0.5);",
+ "onInit": "this.moveRight(0.7);",
"onCollideWorld": "if (distance < 2) { this.changeDirection(); }"
}
},
@@ -48,7 +48,7 @@
"ACTOR_CONFIG": {
"actorId": "",
"bitMask": "0",
- "onInit": "this.moveLeft(0.7);",
+ "onInit": "this.moveLeft(1.0);",
"onCollideWorld": "this.flipRenderX();\nthis.changeDirection();"
}
}
@@ -326,7 +326,24 @@ R.rendercontexts.HTMLElementContext = function(){
this.base(height);
this.jQ().height(height);
},
-
+
+ _onlyChanged: function(ref, css) {
+ if (!ref)
+ return css;
+
+ var modifiedCSS = {}, jq = ref.jQ();
+ if (!jq)
+ return css;
+
+ for (var attr in css) {
+ var oldValue = jq.css(attr);
+ if (oldValue !== css[attr]) {
+ modifiedCSS[attr] = css[attr];
+ }
+ }
+ return modifiedCSS;
+ },
+
/**
* Merge in the CSS transformations object, if the browser supports it.
* @param css {Object} CSS properties to merge with
@@ -343,7 +360,7 @@ R.rendercontexts.HTMLElementContext = function(){
css.top = css.top || this.cursorPos.y;
css.left = css.left || this.cursorPos.x;
}
-
+
return css;
},
@@ -491,7 +508,7 @@ R.rendercontexts.HTMLElementContext = function(){
width: sD.w,
height: sD.h
});
- obj.css(css);
+ obj.css(this._onlyChanged(ref, css));
this.base(rect, image, srcRect, ref);
return obj;
@@ -106,7 +106,6 @@ R.resources.loaders.LevelLoader = function(){
/**
* Export all of the levels, as a JavaScript object, with the
* level name as the key and the corresponding {@link R.resources.types.Level} as the value.
- * @param resource {String} The name of the level resource
* @param [levelNames] {Array} An optional array of levels to export, by name,
* or <code>null</tt> to export all levels
*/
@@ -136,7 +136,7 @@ R.resources.types.Tile = function() {
* A solidity map will be computed for each frame of the tile, if the tile
* is animated.
*
- * @apram frame {Number} The frame number
+ * @param frame {Number} The frame number
* @param solidityMap {Array} An array of bits which indicate if a pixel is opaque or transparent
* @param statusFlag {Number} Flag used to assist in short-circuit testing
*/
@@ -283,7 +283,7 @@ R.resources.types.TileMap = function() {
continue;
// Get the frame and draw the tile
- var f = tile.getFrame(time),z
+ var f = tile.getFrame(time, dt),
obj = renderContext.drawImage(rect, tile.getSourceImage(), f,
(tile.isAnimation() ? tile : null));
View
@@ -0,0 +1,40 @@
+<html>
+<head>
+ <title>The Render Engine</title>
+ <style type="text/css">
+ body {
+ font: 16pt Arial;
+ }
+
+ a {
+ text-decoration: none;
+ }
+
+ ul {
+ list-style: none;
+ }
+
+ ul li {
+ margin-bottom: 10px;
+ }
+ </style>
+ <script type="text/javascript" src="../engine/libs/jquery.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function() {
+ $("ul li").each(function(){
+ var loc = $(this).attr("loc");
+ var html = "<a href='" + loc + "'>" + $(this).text() + "</a>";
+
+ $(this).html(html);
+ });
+ });
+ </script>
+</head>
+<body>
+<em>The Render Engine</em>
+<ul>
+ <li loc="demos/index.html">Render Engine Demos</li>
+ <li loc="tutorials/index.html">Render Engine Code Tutorials</li>
+</ul>
+</body>
+</html>
View
1 run.sh
@@ -0,0 +1 @@
+java -jar ./setup/webserver/WebServerLite.jar . 8010
@@ -914,7 +914,7 @@ var LevelEditor = function() {
// Regardless if the editable flag is true, if there is a setter, we'll
// call it to copy the value over.
- if (bean[propName][1]) {
+ if (bean[propName] && bean[propName][1]) {
if (bean[propName][1].multi || bean[propName][1].toggle || bean[propName][1].editor) {
// Multi-select, toggle, or custom editor
bean[propName][1].fn(value);
@@ -164,4 +164,60 @@ var FuseParticle = function() {
return "FuseParticle";
}
});
+};
+
+/**
+ * @class A fuse particle
+ *
+ * @param pos {R.math.Point2D} The starting position of the particle. A
+ * velocity vector will be derived from this position.
+ * @param [ttl=500] {Number} The Time To Live (lifespan) of the particle
+ */
+var ShieldParticle = function() {
+ return R.particles.AbstractParticle.extend(/** @scope ShieldParticle.prototype */{
+
+ vec: null,
+
+ constructor: function(pos, ttl) {
+ this.base(ttl || 500);
+ this.setPosition(pos);
+
+ // Set the initial vector of motion and velocity of the particle
+ var a = Math.floor(R.lang.Math2.random() * 360);
+ this.vec = R.math.Math2D.getDirectionVector(R.math.Vector2D.ZERO, R.math.Vector2D.UP, a);
+ var vel = 0.3 + R.lang.Math2.random();
+ this.vec.mul(vel);
+ },
+
+ /**
+ * Called by the particle engine to draw the particle to the rendering
+ * context.
+ *
+ * @param renderContext {RenderContext} The rendering context
+ * @param time {Number} The engine time in milliseconds
+ * @param dt {Number} The delta between the world time and the last time the world was updated
+ * in milliseconds.
+ */
+ draw: function(renderContext, time, dt) {
+ this.getPosition().add(this.vec);
+
+ // Randomize the color a bit to make the particle shimmer
+ var colr,rgba;
+ var s = time - this.getBirth();
+ var e = this.getTTL() - this.getBirth();
+ colr = 255 - Math.floor(40 * (s / e));
+ colr += (-10 + (Math.floor(R.lang.Math2.random() * 20)));
+
+ rgba = "rgb(" + colr + "," + colr + ",0)";
+
+ // Draw the particle
+ renderContext.setFillStyle(rgba);
+ renderContext.drawPoint(this.getPosition());
+ }
+
+ }, {
+ getClassName: function() {
+ return "ShieldParticle";
+ }
+ });
};

0 comments on commit afd9519

Please sign in to comment.