lib/letters.js @@ -1,23 +1,24 @@ body { - padding:0; - font: normal 95%/1.5em Helvetica, Arial, sans-serif; - background-color:#C2E7E8; + padding:0; + font: normal 95%/1.5em Helvetica, Arial, sans-serif; + background: #DDD url('demos/images/small_grey_bg.png'); + background-position: 1px 0px; } h1 { - color:#CA411A; + color:#CA411A; } h2 { - color:#224041; + color:#224041; } a { - text-decoration: none; + text-decoration: none; } a:hover { - text-decoration: underline; + text-decoration: underline; } #information { @@ -28,7 +29,6 @@ a:hover { display:none; font: normal 85%/1.3em Helvetica, Arial, sans-serif; color:#333; - width:250px; } #license { @@ -49,20 +49,12 @@ a:hover { background-color:#eee; } -ul { - margin:0; - padding:0; - list-style: none; - float:left; - width:200px; -} li { font: normal 95%/1.5em Helvetica, Arial, sans-serif; } li a { - display:block; padding:2px; color: #00F; } @@ -93,4 +85,61 @@ li a.selected { float:left; width: 420px; height: 380px; +} + +#example { + padding:5px; + width:26em; + background-color: #191A1B; +} + +#shadow { + position:absolute; + top: 10px; + left: 250px; + overflow:visible; +} + +#board { + position:absolute; + top: 10px; + left: 250px; + overflow:visible; +} + +.layer_0 { + width:16px; + height:17px; + position:absolute; + display:block; + background:url('demos/images/cube_blue.png') no-repeat bottom left; +} + +#shadow .dirt { + width:16px; + height:17px; + position:absolute; + display:block; + background:url('demos/images/cube_shadow.png') no-repeat bottom left; +} + +#board .dirt { + width:16px; + height:17px; + position:absolute; + display:block; + background:url('demos/images/cube_red.png') no-repeat bottom left; +} + +#content { + margin-top:20px; + width:500px; + background-color:white; + opacity:0.75; + padding:10px; +} + +#content h1 { + margin:0; + padding:0; } \ No newline at end of file axonome.css @@ -20,7 +20,8 @@ <div class="nav"> <a href="../index.html">Home</a> | <a class="selected" href="index.html">Demos</a> | - <a href="http://github.com/elbowdonkey/axonome">github</a></div> + <a href="http://github.com/elbowdonkey/axonome">github</a> + </div> <h1>axono.me demos</h1> <ul> <li><a href="isometric1.html">A grid</a></li> demos/index.html @@ -1,5 +1,5 @@ <script type="text/javascript" charset="utf-8"> -$('#board').iso({unwalkables: ["2_2_0","2_3_0","3_2_0","4_2_0","4_3_0", "4_4_0", "3_4_0"], layers: 2}); +$('#board').iso({unwalkables: ["2_2_0","2_3_0","3_2_0","4_2_0","4_3_0", "4_4_0"], max_x: 20, max_y: 20}); $('#board').children().mouseenter(function(e) { var tile = $(e.target); @@ -17,13 +17,15 @@ $('#board').children().mouseenter(function(e) { var xyz = $.fn.iso.avatar.movement_queue[key]; var id = xyz[0] + "_" + xyz[1] + "_" + xyz[2]; $('#tile_' + id).addClass('hover'); - $('#tile_' + id).css({opacity:((key)/10)+0.25}); + $('#tile_' + id).append(key); + //$('#tile_' + id).css({opacity:((key)/10)+0.25}); } }); $('#board').children().mouseleave(function(e) { $('#board').children().removeClass('hover'); + $('#board').children().html(''); $('#board').children().css({opacity:1.0}); }); demos/isometric1.html @@ -3,32 +3,6 @@ <head> <title>axono.me - axono.you</title> <link rel="stylesheet" href="axonome.css" type="text/css" media="screen" charset="utf-8"> - <style type="text/css" media="screen"> - #example { - padding:5px; - width:26em; - background-color: #191A1B; - } - - #board { - float:left; - position:relative; - margin-left:135px; - overflow:visible; - font-size:0.1em; - } - - #board div { - width:32px; - height:34px; - position:absolute; - display:block; - background:url('demos/images/avatar.png') no-repeat top left; - position: absolute; - overflow:hidden; - } - - </style> <link rel="stylesheet" href="twilight.css" type="text/css" media="screen" charset="utf-8"> <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script> @@ -36,93 +10,64 @@ <script src="lib/node.js" type="text/javascript" charset="utf-8"></script> <script src="lib/a.js" type="text/javascript" charset="utf-8"></script> <script src="lib/avatar.js" type="text/javascript" charset="utf-8"></script> - <script src="lib/iso.js" type="text/javascript" charset="utf-8"></script> - + <script src="lib/letters.js" type="text/javascript" charset="utf-8"></script> + <script src="lib/jquery.iso.js" type="text/javascript" charset="utf-8"></script> + <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ - var iso = new Iso(3,3,'x',{tile_width: 34, tile_height: 20}); - var grid = iso.grid; - var nodes = grid.nodes; - - for (var i=0; i < nodes.length; i++) { - var node = nodes[i]; - var id = 'tile_' + node.index(); - - $('#board').append('<div id="' + id + '"></div>'); - $('#' + id).css({ - zIndex: node.zindex(), - left: (node.left()) + 'px', - top: (node.top()) + 'px' - }); - - $('#' + id).hover( - function() { - var pop = parseInt(Math.random() * 10)+4; - $(this).animate({ - top: '-=' + pop - }, 200) - .animate({ - top: '+=' + pop - }, 200); - }, - function() { - - } - ); - }; - - function undulate() { - if (index_count >= nodes.length) { - index_count = 0; - return true; - } - - var move_by = parseInt(Math.random() * 10)+4; - - $('#tile_' + index_count) - .animate({ - top: '-=' + move_by - }, 200, function (){ - $('#tile_' + index_count) - .animate({ - top: '+=' + move_by - }, 200, function () { - index_count += 1; - undulate(); - }); + var word = new Letters("axono.me",1,2,1); + + $('#board').iso({ + unwalkables: word, + tile_width:16, + tile_height:8, + max_x: 43, + max_y: 9, + layers: 2} + ); + + $('#board').mouseover(function() { + $('#board .dirt').each(function() { + var move_by = parseInt(Math.random() * 5); + $(this).animate({top: '-=' + move_by}, 75).animate({top: '+=' + move_by}, 100); }); - } + }); - var index_count = 0; - undulate(); + $('#board').mouseout(function() { + index_count = 0; + $('#board .dirt').stop(); + }); }); </script> </head> <body> - <h1 style="float:left">axono.me</h1> + <div id="shadow"></div> <div id="board"></div> - <p style="clear:both;"><a href="http://github.com/elbowdonkey/axonome">http://github.com/elbowdonkey/axonome</a></p> - <p>axono.me is a lightweight open source Javascript isometric pixel art grid library. See the <a href="demos/">demos</a>.</p> + <div id="content"> + <h1>axono.me</h1> + <p>axono.me is a jQuery plugin designed to help you make isometric pixel art style tile based games and other oddities. See the <a href="demos/">demos</a>.</p> + <p><a href="http://github.com/elbowdonkey/axonome">http://github.com/elbowdonkey/axonome</a></p> + <h2>Features</h2> + <ul> + <li>fully test driven using <a href="http://github.com/nathansobo/screw-unit">Screw Unit</a></li> + <li>small footprint</li> + <li>a* pathfinding</li> + <li>silly things, like a letter renderer</li> + </ul> - <h2>Features</h2> - <ul> - <li>fully test driven using <a href="http://github.com/nathansobo/screw-unit">Screw Unit</a>;</li> - <li>small, essentials-only footprint;</li> - </ul> - - <h2>Browser Support</h2> - <p>axono.me has been tested using Safari 4 and Firefox 3.</p> + <h2>Browser Support</h2> + <p>axono.me has been tested using Safari 4 and Firefox 3.</p> - <h2>Examples</h2> + <h2>Examples</h2> <p>Here's how you'd render a 6x6 isometric grid using jQuery.</p> <div id="example"> -<pre class="textmate-source twilight"><span class='linenum'> 1</span> <span class="text text_html text_html_basic"><span class="source source_js source_js_embedded source_js_embedded_html"><span class="keyword keyword_operator keyword_operator_js">$</span><span class="meta meta_brace meta_brace_round meta_brace_round_js">(</span><span class="support support_class support_class_js">document</span><span class="meta meta_brace meta_brace_round meta_brace_round_js">)</span><span class="meta meta_delimiter meta_delimiter_method meta_delimiter_method_period meta_delimiter_method_period_js">.</span>ready<span class="meta meta_brace meta_brace_round meta_brace_round_js">(</span><span class="storage storage_type storage_type_js">function</span><span class="meta meta_brace meta_brace_round meta_brace_round_js">()</span><span class="meta meta_brace meta_brace_curly meta_brace_curly_js">{</span> -<span class='linenum'> 2</span> <span class="storage storage_type storage_type_js">var</span> iso <span class="keyword keyword_operator keyword_operator_js">=</span> <span class="meta meta_class meta_class_instance meta_class_instance_constructor"><span class="keyword keyword_operator keyword_operator_new keyword_operator_new_js">new</span> <span class="entity entity_name entity_name_type entity_name_type_instance entity_name_type_instance_js">Iso</span></span><span class="meta meta_brace meta_brace_round meta_brace_round_js">(</span><span class="constant constant_numeric constant_numeric_js">6</span><span class="meta meta_delimiter meta_delimiter_object meta_delimiter_object_comma meta_delimiter_object_comma_js">,</span><span class="constant constant_numeric constant_numeric_js">6</span><span class="meta meta_delimiter meta_delimiter_object meta_delimiter_object_comma meta_delimiter_object_comma_js">,</span><span class="string string_quoted string_quoted_single string_quoted_single_js"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_js">'</span>#board<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_js">'</span></span><span class="meta meta_brace meta_brace_round meta_brace_round_js">)</span><span class="punctuation punctuation_terminator punctuation_terminator_statement punctuation_terminator_statement_js">;</span> -<span class='linenum'> 3</span> <span class="storage storage_type storage_type_js">var</span> grid <span class="keyword keyword_operator keyword_operator_js">=</span> iso<span class="meta meta_delimiter meta_delimiter_method meta_delimiter_method_period meta_delimiter_method_period_js">.</span>grid<span class="punctuation punctuation_terminator punctuation_terminator_statement punctuation_terminator_statement_js">;</span> -<span class='linenum'> 4</span> iso<span class="meta meta_delimiter meta_delimiter_method meta_delimiter_method_period meta_delimiter_method_period_js">.</span>render<span class="meta meta_brace meta_brace_round meta_brace_round_js">()</span><span class="punctuation punctuation_terminator punctuation_terminator_statement punctuation_terminator_statement_js">;</span> -<span class='linenum'> 5</span><span class="meta meta_brace meta_brace_curly meta_brace_curly_js">}</span><span class="meta meta_brace meta_brace_round meta_brace_round_js">)</span><span class="punctuation punctuation_terminator punctuation_terminator_statement punctuation_terminator_statement_js">;</span></span></span></pre> +<pre class="textmate-source twilight"><span class='linenum'>1</span> <span class="text text_html text_html_basic"><span class="source source_js source_js_embedded source_js_embedded_html"><span class="keyword keyword_operator keyword_operator_js">$</span><span class="meta meta_brace meta_brace_round meta_brace_round_js">(</span><span class="support support_class support_class_js">document</span><span class="meta meta_brace meta_brace_round meta_brace_round_js">)</span><span class="meta meta_delimiter meta_delimiter_method meta_delimiter_method_period meta_delimiter_method_period_js">.</span>ready<span class="meta meta_brace meta_brace_round meta_brace_round_js">(</span><span class="storage storage_type storage_type_js">function</span><span class="meta meta_brace meta_brace_round meta_brace_round_js">()</span><span class="meta meta_brace meta_brace_curly meta_brace_curly_js">{</span> +<span class='linenum'>2</span> <span class="storage storage_type storage_type_js">var</span> iso <span class="keyword keyword_operator keyword_operator_js">=</span> <span class="meta meta_class meta_class_instance meta_class_instance_constructor"><span class="keyword keyword_operator keyword_operator_new keyword_operator_new_js">new</span> <span class="entity entity_name entity_name_type entity_name_type_instance entity_name_type_instance_js">Iso</span></span><span class="meta meta_brace meta_brace_round meta_brace_round_js">(</span><span class="constant constant_numeric constant_numeric_js">6</span><span class="meta meta_delimiter meta_delimiter_object meta_delimiter_object_comma meta_delimiter_object_comma_js">,</span><span class="constant constant_numeric constant_numeric_js">6</span><span class="meta meta_delimiter meta_delimiter_object meta_delimiter_object_comma meta_delimiter_object_comma_js">,</span><span class="string string_quoted string_quoted_single string_quoted_single_js"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_js">'</span>#board<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_js">'</span></span><span class="meta meta_brace meta_brace_round meta_brace_round_js">)</span><span class="punctuation punctuation_terminator punctuation_terminator_statement punctuation_terminator_statement_js">;</span> +<span class='linenum'>3</span> <span class="storage storage_type storage_type_js">var</span> grid <span class="keyword keyword_operator keyword_operator_js">=</span> iso<span class="meta meta_delimiter meta_delimiter_method meta_delimiter_method_period meta_delimiter_method_period_js">.</span>grid<span class="punctuation punctuation_terminator punctuation_terminator_statement punctuation_terminator_statement_js">;</span> +<span class='linenum'>4</span> iso<span class="meta meta_delimiter meta_delimiter_method meta_delimiter_method_period meta_delimiter_method_period_js">.</span>render<span class="meta meta_brace meta_brace_round meta_brace_round_js">()</span><span class="punctuation punctuation_terminator punctuation_terminator_statement punctuation_terminator_statement_js">;</span> +<span class='linenum'>5</span><span class="meta meta_brace meta_brace_curly meta_brace_curly_js">}</span><span class="meta meta_brace meta_brace_round meta_brace_round_js">)</span><span class="punctuation punctuation_terminator punctuation_terminator_statement punctuation_terminator_statement_js">;</span></span></span></pre> </div> <p>The Iso object handles rendering as well as representing the grid as Javascript objects.</p> @@ -142,5 +87,7 @@ </ul> <div id="license"><p><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/"><img alt="Creative Commons License" style="border-width:0" src="http://creativecommons.org/images/public/somerights20.png" /></a><br /><span xmlns:dc="http://purl.org/dc/elements/1.1/" property="dc:title">axono.me</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://axono.me" property="cc:attributionName" rel="cc:attributionURL">Michael Buffington</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License</a>.</p></div> + + </div> </body> </html> index.html @@ -92,7 +92,7 @@ function A(x,y,grid) { var node_x = neighbor_node["x"]; var node_y = neighbor_node["y"]; var node_z = neighbor_node["z"]; - var increment_g_by = this.is_it_diagonal(current_node,neighbor_node) ? 24 : 10; + var increment_g_by = this.is_it_diagonal(current_node,neighbor_node) ? 14 : 10; neighbor_node["g"] = increment_g_by; lib/a.js @@ -1,5 +1,5 @@ function Grid(width,height,options) { - var floor = Math.floor + var floor = Math.floor var random = Math.random; this.grid = new Array(); this.width = width; @@ -26,6 +26,24 @@ function Grid(width,height,options) { var index = x + "_" + y + "_" + z; return this.nodes[index]; } + + this.column = function(x,z) { + var column = new Array(); + for (var y=0; y < this.height; y++) { + var index = x + "_" + y + "_" + z; + column.push(this.nodes[index]); + } + return column; + } + + this.row = function(y,z) { + var row = new Array(); + for (var x=0; x < this.width; x++) { + var index = x + "_" + y + "_" + z; + row.push(this.nodes[index]); + } + return row; + } } //TODO: don't need this anymore? lib/grid.js @@ -4,8 +4,8 @@ var defaults = $.fn.iso.defaults; $.fn.iso.grid = new Grid(defaults.max_x,defaults.max_y,defaults); - for (var i=0; i < options.unwalkables.length; i++) { - $.fn.iso.grid.nodes[options.unwalkables[i]].walkable = false; + for (var i=0; i < defaults.unwalkables.length; i++) { + $.fn.iso.grid.nodes[defaults.unwalkables[i]].walkable = false; }; $.fn.iso.nodes = $.fn.iso.grid.nodes; @@ -38,7 +38,9 @@ labels: true, tile_offset: [262,0], layers: 1, - iso_tile_height: 5 + iso_tile_height: 5, + unwalkables: [], + render_all: true }; var defaults = $.fn.iso.defaults; @@ -51,17 +53,29 @@ var node = nodes[key]; var id = 'tile_' + key; var label = (defaults.labels) ? id : ''; + + if (defaults.render_all == false) { + if (node.walkable != true) { + $(container).append('<div class="layer_' + node.z + '" id="' + id + '"></div>'); + $('#' + id).css({ + zIndex: node.zindex, + left: (node.left+defaults.tile_offset[0]) + 'px', + top: (node.top - (node.z * defaults.iso_tile_height)) + 'px' + }).data("xyz", [node.x,node.y,node.z]); + $('#' + id).addClass('dirt'); + } + } else { + $(container).append('<div class="layer_' + node.z + '" id="' + id + '"></div>'); - $(container).append('<div id="' + id + '">' + label + '</div>'); - - $('#' + id).css({ - zIndex: node.zindex, - left: (node.left+defaults.tile_offset[0]) + 'px', - top: (node.top - (node.z * defaults.iso_tile_height)) + 'px' - }).data("xyz", [node.x,node.y,node.z]); + $('#' + id).css({ + zIndex: node.zindex, + left: (node.left+defaults.tile_offset[0]) + 'px', + top: (node.top - (node.z * defaults.iso_tile_height)) + 'px' + }).data("xyz", [node.x,node.y,node.z]); - if (node.walkable != true) { - $('#' + id).addClass('dirt'); + if (node.walkable != true) { + $('#' + id).addClass('dirt'); + } } }; lib/jquery.iso.js @@ -8,6 +8,7 @@ function Node(x,y,z,grid,options) { this.iso_height = 0; this.iso_width = 0; this.walkable = true; + this.id = this.x + "_" + this.y + "_" + this.z; if (options) { if (options.tile_width && options.tile_height) { @@ -71,7 +72,8 @@ function Node(x,y,z,grid,options) { depth: this.calculate_depth(), zindex: this.zindex(), left: this.left(), - top: this.top() + top: this.top(), + id: this.id } } lib/node.js @@ -5,17 +5,6 @@ Screw.Unit(function(c) { with(c) { before(function() { defaults.layers = 2; grid = new Grid(3,3,defaults); - // nodes = [ - // new Node(0,0,0, grid, defaults), - // new Node(1,0,0, grid, defaults), - // new Node(2,0,0, grid, defaults), - // new Node(0,1,0, grid, defaults), - // new Node(1,1,0, grid, defaults), - // new Node(2,1,0, grid, defaults), - // new Node(0,2,0, grid, defaults), - // new Node(1,2,0, grid, defaults), - // new Node(2,2,0, grid, defaults) - // ] nodes = grid.nodes; }); @@ -32,17 +21,37 @@ Screw.Unit(function(c) { with(c) { expect(grid.node(0,0,0)).to(equal,grid.nodes["0_0_0"]); expect(grid.node(0,0,1)).to(equal,grid.nodes["0_0_1"]); }); + + it('should return a column of nodes', function() { + var column = grid.column(0,0); // x,z + expect(column).to(equal,[grid.nodes["0_0_0"],grid.nodes["0_1_0"],grid.nodes["0_2_0"]]); + + var column = grid.column(1,0); // x,z + expect(column).to(equal,[grid.nodes["1_0_0"],grid.nodes["1_1_0"],grid.nodes["1_2_0"]]); + + var column = grid.column(0,1); // x,z + expect(column).to(equal,[grid.nodes["0_0_1"],grid.nodes["0_1_1"],grid.nodes["0_2_1"]]); + }); + + it('should return a row of nodes', function() { + var row = grid.row(0,0); // y,z + expect(row).to(equal,[grid.nodes["0_0_0"],grid.nodes["1_0_0"],grid.nodes["2_0_0"]]); + + var row = grid.row(1,0); // y,z + expect(row).to(equal,[grid.nodes["0_1_0"],grid.nodes["1_1_0"],grid.nodes["2_1_0"]]); + + var row = grid.row(0,1); // y,z + expect(row).to(equal,[grid.nodes["0_0_1"],grid.nodes["1_0_1"],grid.nodes["2_0_1"]]); + }); }); describe('Grid; with options', function() { - // it('should be able to created using options hash', function() { - // grid = new Grid({width:3, height:3}); - // - // expect(grid.width()).to(equal,3); - // expect(grid.height()).to(equal,3); - // }); - - // TODO: some nodes should be walkable, some should not be + it('should be able to created using options hash', function() { + grid = new Grid(3,3,{foo:3}); + expect(grid.width).to(equal,3); + expect(grid.height).to(equal,3); + }); + it('should return a range of nodes', function() { grid = new Grid(6,6,defaults); var nodes = grid.range(1,1,2,2,0); spec/grid_spec.js @@ -28,6 +28,10 @@ Screw.Unit(function(c) { with(c) { }); + it('should have an id', function() { + expect(node_a.id).to(equal,"0_0_0"); + }); + it('should belong to a grid', function() { expect(node_a.grid).to(equal,grid); }); spec/node_spec.js 09eadeba39383e621550b3152a208c241e384bf3 Michael Buffington michael.buffington@gmail.com http://github.com/elbowdonkey/axonome/commit/bf94958243d2f4e17538e6f928f50d1bf4d28ba6 bf94958243d2f4e17538e6f928f50d1bf4d28ba6

2009-10-06T20:52:45-07:00

flux, as usual - added silly letters class as well untested 04e3d2d70237d5a78b7a2ecc33c331999caaad2b Michael Buffington michael.buffington@gmail.com