Permalink
Browse files

Hive morning last minute hacks - images for trinkets, platforms are n…

…ow separate files again instead of a tileset image. Added a hack for animated gifs and svgs to work.
  • Loading branch information...
1 parent f00738f commit d01585ca00376a0d9a20ac1219e6333333536cd2 @jonoxia committed Jan 22, 2012
Showing with 62 additions and 22 deletions.
  1. +6 −2 strings.json
  2. +2 −1 templates/design.html
  3. +9 −1 templates/play.html
  4. +11 −2 webrunner-edit.js
  5. +15 −3 webrunner-mobs.js
  6. +19 −13 webrunner-world.js
View
@@ -75,7 +75,9 @@
"_save_code": "save code",
"_test_code": "test code",
"_edit_this_level": "Edit this level",
- "_created_by": "Created by %s"
+ "_created_by": "Created by %s",
+ "_platform_img_url": "Platform img url",
+ "_trinket_img_url": "Trinket img url"
},
"jp": {
"_runjumpbuild": "ラン・ジャンプ・ビルド",
@@ -153,7 +155,9 @@
"_save_code": "コードを保存する",
"_test_code": "コードをテストする",
"_edit_this_level": "このステージを変更する",
- "_created_by": "%sに作られた"
+ "_created_by": "%sに作られた",
+ "_platform_img_url": "Platform img url",
+ "_trinket_img_url": "Trinket img url"
}
}
View
@@ -25,7 +25,6 @@
<a href="listlevels.py">${_other_levels}</a><br/>
<label for="level-bg-url">${_background_img_url}:</label><input type="text" id="level-bg-url"/><br>
- <label for="level-tileset-url">${_tileset_url}:</label><input type="text" id="level-tileset-url"/><br>
<label for="level-music-url">${_music_url}:</label><input type="text" id="level-music-url"/><br>
<hr/>
<input type="radio" name="tools" value="eraser" id="eraser-tool"/>
@@ -44,10 +43,12 @@
<button onclick="showhide('more-powerup-tools');">${_powerup_tools}</button>
<button onclick="showhide('physics-props');">${_physics}</button>
<div id="more-obstacle-tools" class="hidden-panel">
+ <label for="platform-img-url">${_platform_img_url}</label><input type="text" id="platform-img-url"/><br/>
</div><br/>
<div id="more-monster-tools" class="hidden-panel">
</div><br/>
<div id="more-powerup-tools" class="hidden-panel">
+ <label for="platform-img-url">${_trinket_img_url}</label><input type="text" id="trinket-img-url"/><br/>
</div><br/>
<div id="physics-props" class="hidden-panel">
<label for="gravity">${_gravity}:</label><input type="text" id="gravity"/><br>
View
@@ -6,9 +6,15 @@
<script src="webrunner-world.js"></script>
<script src="webrunner-mobs.js"></script>
<script src="webrunner-play.js"></script>
+ <style>
+ .anim-gif {
+ z-index:2;
+ position: absolute;
+ }
+ </style>
</head>
<body>
- <p>${_level_name} : <span id="levelName">${levelName}</span>${editLink} <a href="listlevels.py">${_other_levels}</a></p>
+ <p>${_level_name} : <span id="levelName">${levelName}</span> ${editLink} <a href="listlevels.py">${_other_levels}</a></p>
<h2 id="output"></h2></p>
<canvas id="game-canvas" width="800" height="600"></canvas>
<span style="display:none;" id="avatarURL">${avatarURL}</span>
@@ -21,4 +27,6 @@ <h2 id="output"></h2></p>
<audio id="bonk-sfx" preload="auto" autobuffer="true" src="sfx/donk.ogg"></audio>
<audio id="crunch-sfx" preload="auto" autobuffer="true" src="sfx/crunch.ogg"></audio>
<audio id="kaching-sfx" preload="auto" autobuffer="true" src="sfx/kaching.ogg"></audio>
+ <span id="gifslum">
+</span>
</body></html>
View
@@ -289,7 +289,9 @@ function saveChanges() {
allData.startY = TheWorld.startY;
// BG image and other URLs:
allData.bgUrl = $("#level-bg-url").val();
- allData.tilesetUrl = $("#level-tileset-url").val();
+ allData.tilesetUrl = JSON.stringify({ "platform-img-url": $("#platform-img-url").val(),
+ "trinket-img-url": $("#trinket-img-url").val()
+ });
allData.musicUrl = $("#level-music-url").val();
allData.goalUrl = $("#level-goal-url").val();
// Physics modifications:
@@ -437,10 +439,17 @@ $(document).ready(function() {
var startEditing = function() {
progressBar.draw(0.5);
$("#level-bg-url").val(TheWorld.bgUrl);
- $("#level-tileset-url").val(TheWorld.tilesetUrl);
+
$("#level-goal-url").val(TheWorld.goalUrl);
$("#level-music-url").val(TheWorld.musicUrl);
+ if (TheWorld.tileset) {
+ var tileUrls = JSON.parse(TheWorld.tileset);
+ for (var name in tileUrls) {
+ $("#" + name).val(tileUrls[name]);
+ }
+ }
+
for (var prop in PhysicsConstants) {
$("#" + prop).val( PhysicsConstants[prop] );
}
View
@@ -20,6 +20,15 @@ Mob.prototype = {
var self = this;
this.img = loader.add(filename);
+ if ((filename.indexOf(".gif") > -1 || filename.indexOf(".svg") > -1) && filename != "shrimp.gif") {
+ this.hackImg = $("<img>").attr("src", filename).attr("class", "anim-gif");
+
+ this.hackImg.attr("width", this.width)
+ this.hackImg.attr("height", this.height);
+ $("#gifslum").append(this.hackImg);
+ this.horribleHack = true;
+ }
+
this.vx = 0;
this.vy = 0;
@@ -31,11 +40,14 @@ Mob.prototype = {
},
draw: function(ctx) {
- if (this.isAnimated) {
+ if (this.horribleHack) {
+ this.hackImg.css("left", TheWorld.worldXToScreenX(this.left) + $("#game-canvas").offset().left); // if using this method, we have to do wold transform
+ this.hackImg.css("top", TheWorld.worldYToScreenY(this.top) + $("#game-canvas").offset().top);
+ } else if (this.isAnimated) {
var spriteOffsetX = this.width * this.animationFrame;
var spriteOffsetY = this.height * this.movementDirection;
ctx.drawImage(this.img, spriteOffsetX, spriteOffsetY, this.width, this.height,
- this.left, this.top, this.width, this.height);
+ this.left, this.top, this.width, this.height);
} else {
ctx.drawImage(this.img, this.left, this.top);
}
@@ -226,8 +238,8 @@ Mob.prototype.__proto__ = new Box();
function Player(loader, filename, x, y, width, height) {
- this.mobInit(loader, filename, true);
this.boxInit(x, y, width, height);
+ this.mobInit(loader, filename, true);
}
Player.prototype = {
type: "player",
View
@@ -70,8 +70,8 @@ var TheWorld = {
bgUrl: "",
bgImg: null,
- tilesetUrl: "",
- tileSetImg: null,
+ tileset: "",
+ tilesetImages: {},
goalUrl: "",
goalImg: null,
@@ -406,10 +406,15 @@ var TheWorld = {
if (self.bgUrl && self.bgUrl!= "") {
self.bgImg = loader.add(self.bgUrl);
}
- // tileset img
- self.tilesetUrl = parsedData.tilesetUrl;
- if (self.tilesetUrl && self.tilesetUrl != "") {
- self.tileSetImg = loader.add(self.tilesetUrl);
+ // tileset images
+ self.tileset = parsedData.tilesetUrl;
+ if (self.tileset && self.tileset != "") {
+ var tileUrls = JSON.parse(self.tileset);
+ for (var name in tileUrls) {
+ if (tileUrls[name] != "") {
+ self.tilesetImages[name] = loader.add(tileUrls[name]);
+ }
+ }
}
// goal img
self.goalUrl = parsedData.goalUrl;
@@ -567,8 +572,8 @@ Platform.prototype = {
classification: "obstacle",
draw: function(ctx) {
- if (TheWorld.tileSetImg) {
- this.fillTiled(ctx, TheWorld.tileSetImg, 0, 0, 64, 64);
+ if (TheWorld.tilesetImages["platform-img-url"]) {
+ this.fillTiled(ctx, TheWorld.tilesetImages["platform-img-url"], 0, 0, 64, 64);
} else {
ctx.fillStyle = GROUND_COLOR;
ctx.fillRect(this.left, this.top, this.width, this.height);
@@ -602,8 +607,8 @@ SemiPermiablePlatform.prototype = {
classification: "obstacle",
draw: function(ctx) {
- if (TheWorld.tileSetImg) {
- this.fillTiled(ctx, TheWorld.tileSetImg, 64, 0, 64, 64);
+ if (TheWorld.tilesetImages["semiplatform-img-url"]) {
+ this.fillTiled(ctx, TheWorld.tilesetImages["semiplatform-img-url"], 0, 0, 64, 64);
} else {
ctx.fillStyle = "green";
ctx.fillRect(this.left, this.top, this.width, this.height);
@@ -651,7 +656,7 @@ PowerUp.prototype.__proto__ = new Box();
// We're not registering this one because it should never be
// instantiated.
-function SpeedPlus() {
+/*function SpeedPlus() {
}
SpeedPlus.prototype = {
type: "speedplus",
@@ -694,6 +699,7 @@ JumpPlus.prototype = {
};
JumpPlus.prototype.__proto__ = new PowerUp();
ConstructorRegistry.register(JumpPlus);
+*/
function PointlessTrinket() {
}
@@ -703,8 +709,8 @@ PointlessTrinket.prototype = {
width: 32,
height: 32,
draw: function(ctx) {
- if (TheWorld.tileSetImg) {
- ctx.drawImage(TheWorld.tileSetImg, 0, 64, 32, 32, this.left, this.top, 32, 32);
+ if (TheWorld.tilesetImages["trinket-img-url"]) {
+ ctx.drawImage(TheWorld.tilesetImages["trinket-img-url"], this.left, this.top, 32, 32);
} else {
ctx.fillStyle = "yellow";
ctx.beginPath();

0 comments on commit d01585c

Please sign in to comment.