Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Sprite, automatically move to next row

    Hi,

    I am trying to write a script to get my sprite to move to the next row once it reaches the last frame on it's current row.

    Here's my attempt so far; in the code below I want bird2 when it reaches frame 3 and spState(1) - this means first row - to switch to spState (2) second row.

    Code:
                if ($('#bird2'['current_frame']) == 3 && $('#bird2').spState(1)) {
                    $('#bird2').spState(2);
                } else {
                       $('#bird2').spState(1);
                }
    Here's the code regarding the spState()

    Code:
            spState: function(n) {
                $(this).each(function() {
                    // change state of a sprite, where state is the vertical
                    // position of the background image (e.g. frames row)
                    var yPos = ((n - 1) * $(this).height()) + 'px';
                    var xPos = $._spritely.getBgX($(this));
                    var bp = xPos + ' -' + yPos;
                    $(this).css('background-position', bp);
                });
                return this;
    this is from http://www.spritely.net/ you will notice on this site that if you drag the slider to the left the bird sprites change direction, in fact they play the second row of frames.

    The reason I want my bird sprite to go automatically to the next row is because I am using video turned into individual frames and a png strip, and I am limited by the max width of png (8192px). see http://www.cranihum.com/ scroll down to see the bird on the rooftop. Each frame in that bird sprite is 80px wide and there are 93 frames. So I would like to include multiple rows to allow me to increase the number of frames. Up to 15 rows will be needed and after the last row it should go back to the first row. Perhaps a switch statement would be better than what I currently have.

    I am new to JavaScript and have been trying to pick up clues from http://www.w3schools.com I am very happy to learn and I hope to be prompted and pushed in the right direction. I hope my request is clear, please ask questions if not.

    Thank you

    Will
    Last edited by sohopigeon; 06-14-2010 at 04:53 PM.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Can't help you with the javascript, but there are many useful URL's here.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    thank you, it looks like there are some interesting sites.

  • #4
    New Coder
    Join Date
    Jun 2010
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi All,

    There's been some progress but still no cigar.

    The updated script is (with help):

    Code:
    				var MaxRows = 4;
    				for (var CurrentRow = 1; CurrentRow <= MaxRows; CurrentRow++) {
    			        $('#bird3').spState(CurrentRow);
    			        }
    This is for the example png below, with 4 rows and 5 frames per row.

    Sprite, automatically move to next row-pigeon_5fx4r.jpg

    I think the problem with the script is there's nothing to tell it when to go to the next row. It should go to the next row when the last frame is reached, frame 5. I can't figure out how to do this.

    If you look at http://www.spritely.net/ move the slider to the left and to the right and you will see the blackbirds change direction. There is a different row for each direction. (see http://www.spritely.net/images/bird-forward-back.png) The function to change which row plays is triggered from the slider. As I say, I want the trigger to change the row to come from the frame number reached.

    I'm trying to figure out how to write some code that will read what frame is played. Here are the codes for the spritely plug-in that I'm looking at, I feel if I can understand how these work, I will have an idea how to write that code. At this stage I need help :-)

    Thank you

    Code for #bird to set speed (frames per second - fps) and the number of frames per row. (I understand how this works)
    Code:
    				$('#bird')
    					.sprite({fps: 9, no_of_frames: 3})
    Code for #slider, includes how it affects the different elements on the page. fyi spState(1) = row 1, .spState(2) = row 2 (I understand how this works)
    Code:
                                        $('#slider')
                                            .show()
    					.slider({
    						value: 8,
    						min: -60,
    						max: 60,
    						slide: function() {
    							window.app.spritely.sliderChange($(this).slider('value'));
    						},
    						change: function() {
    							window.app.spritely.sliderChange($(this).slider('value'));
    						}
    					});
                                    }
    	        },
    	        
    			sliderChange: function(val) {
    	      		if ($('#dragMe').css('display') == 'block') {
    	      			if (!$.browser.msie) {
    	      				$('#dragMe').fadeOut('slow');
    	      			} else {
    	      				$('#dragMe').hide();
    	      			}
    	      		}
    	      		var sliderSpeed = val;
                    if (sliderSpeed < 0) {
                        var sliderSpeed = String(sliderSpeed).split('-')[1];
                        $('#bird, #bird2').spState(2);
                        $('#hill1, #hill2, #clouds').spChangeDir('right');
                    } else {
                        $('#bird, #bird2').spState(1);
                        $('#hill1, #hill2, #clouds').spChangeDir('left');
                    }
                    $('#hill1, #hill2, #clouds').spRelSpeed(sliderSpeed);
    Code for spritely 0.2.1 plug-in (I don't get how this works!)

    Code:
    /*
     * jQuery spritely 0.2.1
     * http://spritely.net/
     *
     * Documentation:
     * http://spritely.net/documentation/
     *
     * Copyright 2010, Peter Chater, Artlogic Media Ltd, http://www.artlogic.net/
     * Dual licensed under the MIT or GPL Version 2 licenses.
     *
     * Change history:
     * Version 0.2.1
     *   - animate function will stop cycling after play_frames has completed
     * Version 0.2
     *   - added isDraggable method (requires jquery-ui) $('#sprite').sprite().isDraggable({start: null, stop: function() {alert('Ouch! You dropped me!')});
     *   - sprites may be set to play a limited number of frames when instantiated, e.g. $('#sprite').sprite({fps: 9, no_of_frames: 3, play_frames: 30})
     *   - sprite speed may be controlled at any point by setting the frames-per-second $('#sprite').fps(20);
     *   - sprites with multiple rows of frames may have there 'state' changed, e.g. to make the second row of frames
     *     active, use: $('#sprite').spState(2); - to return to the first row, use $('#sprite').spState(1);
     *   - background element speed may be controlled at any point with .spSpeed(), e.g. $('#bg1').spSpeed(10)
     *   - background elements may be set to a depth where 100 is the viewer (up close) and 0 is the horizon, e.g.:
     *     $('#bg1').pan({fps: 30, speed: 2, dir: 'left', depth: 30});
     *     $('#bg2').pan({fps: 30, speed: 3, dir: 'left', depth: 70});
     *     relative speed of backgrounds may now be set in a single action with $('#bg1, #bg2').spRelSpeed(20);
     *     which will make elements closer to the horizon (lower depths) move slower than closer elements (higher depths)
     */
    (function($) {
    	$._spritely = {
    		// shared methods and variables used by spritely plugin
    		animate: function(options) {
    			var el = $(options.el);
    			var el_id = el.attr('id');
    			options = $.extend(options, $._spritely.instances[el_id] || {});
    			if (options.play_frames && !$._spritely.instances[el_id]['remaining_frames']) {
    				$._spritely.instances[el_id]['remaining_frames'] = options.play_frames + 1;
    			}
    			if (options.type == 'sprite' && options.fps) {
    				var frames;
    				var animate = function(el) {
    					var w = options.width, h = options.height;
    					if (!frames) {
    						frames = [];
    						total = 0
    						for (var i = 0; i < options.no_of_frames; i ++) {
    							frames[frames.length] = (0 - total);
    							total += w;
    						}
    					}
    					if ($._spritely.instances[el_id]['current_frame'] >= frames.length - 1) {
    						$._spritely.instances[el_id]['current_frame'] = 0;
    					} else {
    						$._spritely.instances[el_id]['current_frame'] = $._spritely.instances[el_id]['current_frame'] + 1;
    					}
    					var yPos = $._spritely.getBgY(el);
    					el.css('background-position', frames[$._spritely.instances[el_id]['current_frame']] + 'px ' + yPos);
    					if (options.bounce && options.bounce[0] > 0 && options.bounce[1] > 0) {
    						var ud = options.bounce[0]; // up-down
    						var lr = options.bounce[1]; // left-right
    						var ms = options.bounce[2]; // milliseconds
    						el
    							.animate({top: '+=' + ud + 'px', left: '-=' + lr + 'px'}, ms)
    							.animate({top: '-=' + ud + 'px', left: '+=' + lr + 'px'}, ms);
    					}
    				}
    				if ($._spritely.instances[el_id]['remaining_frames'] && $._spritely.instances[el_id]['remaining_frames'] > 0) {
    					$._spritely.instances[el_id]['remaining_frames'] --;
    					if ($._spritely.instances[el_id]['remaining_frames'] == 0) {
    						$._spritely.instances[el_id]['remaining_frames'] = -1;
    						delete $._spritely.instances[el_id]['remaining_frames'];
    						return;
    					} else {
    						animate(el);
    					}
    				} else if ($._spritely.instances[el_id]['remaining_frames'] != -1) {
    					animate(el);
    				}
    			} else if (options.type == 'pan') {
    				if (!$._spritely.instances[el_id]['_stopped']) {
    					if (options.dir == 'left') { 
    						$._spritely.instances[el_id]['l'] = ($._spritely.instances[el_id]['l'] - (options.speed || 1)) || 0;
    					} else {
    						$._spritely.instances[el_id]['l'] = ($._spritely.instances[el_id]['l'] + (options.speed || 1)) || 0;
    					}
    					var bp_top = $._spritely.getBgY(el);
    					$(el).css('background-position', $._spritely.instances[el_id]['l'] + 'px ' + bp_top);
    				}
    			}
    			$._spritely.instances[el_id]['options'] = options;
    			window.setTimeout(function() {
    				$._spritely.animate(options);
    			}, parseInt(1000 / options.fps));
    		},
    		randomIntBetween: function(lower, higher) {
    			return parseInt(rand_no = Math.floor((higher - (lower - 1)) * Math.random()) + lower);
    		},
    		getBgY: function(el) {
    			if ($.browser.msie) {
    				// fixme - the background-position property does not work
    				// correctly in IE so we have to hack it here... Not ideal
    				// especially as $.browser is depricated
    				var bgY = $(el).css('background-position-y') || '0';
    			} else {
    				var bgY = ($(el).css('background-position') || ' ').split(' ')[1];
    			}
    			return bgY;
    		},
    		getBgX: function(el) {
    			if ($.browser.msie) {
    				// see note, above
    				var bgX = $(el).css('background-position-x') || '0';
    			} else {
    				var bgX = ($(el).css('background-position') || ' ').split(' ')[0];
    			}
    			return bgX;
    		}
    	};
    	$.fn.extend({
    		spritely: function(options) {
    			var options = $.extend({
    				type: 'sprite',
    				do_once: false,
    				width: null,
    				height: null,
    				fps: 12,
    				no_of_frames: 2,
    				stop_after: null
    			}, options || {});
    			var el_id = $(this).attr('id');
    			if (!$._spritely.instances) {
    				$._spritely.instances = {};
    			}
    			if (!$._spritely.instances[el_id]) {
    				$._spritely.instances[el_id] = {current_frame: -1};
    			}
    			$._spritely.instances[el_id]['type'] = options.type;
    			$._spritely.instances[el_id]['depth'] = options.depth;
    			options.el = this;
    			options.width = options.width || $(this).width() || 100;
    			options.height = options.height || $(this).height() || 100;
    			var get_rate = function() {
                    return parseInt(1000 / options.fps);
                }
                if (!options.do_once) {
    				window.setTimeout(function() {
    					$._spritely.animate(options);
    				}, get_rate(options.fps));
    			} else {
    				$._spritely.animate(options);
    			}
    			return this; // so we can chain events
    		},
    		sprite: function(options) {
    			var options = $.extend({
    				type: 'sprite',
    				bounce: [0, 0, 1000] // up-down, left-right, milliseconds
    			}, options || {});
    			return $(this).spritely(options);
    		},
    		pan: function(options) {
    			var options = $.extend({
    				type: 'pan',
    				dir: 'left',
    				continuous: true,
    				speed: 1 // 1 pixel per frame
    			}, options || {});
    			return $(this).spritely(options);
    		},
    		flyToTap: function(options) {
    			var options = $.extend({
    				el_to_move: null,
    				type: 'moveToTap',
    				ms: 1000, // milliseconds
    				do_once: true
    			}, options || {});
    			if (options.el_to_move) {
    				$(options.el_to_move).active();
    			}
    			if ($._spritely.activeSprite) {
    				if (window.Touch) { // iphone method see http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone/9 or http://www.nimblekit.com/tutorials.html for clues...
    					$(this)[0].ontouchstart = function(e) {
    						var el_to_move = $._spritely.activeSprite;
    						var touch = e.touches[0];
    						var t = touch.pageY - (el_to_move.height() / 2);
    						var l = touch.pageX - (el_to_move.width() / 2);
    						el_to_move.animate({
    							top: t + 'px',
    							left: l + 'px'
    						}, 1000);
    					};
    				} else {
    					$(this).click(function(e) {
    						var el_to_move = $._spritely.activeSprite;
    						$(el_to_move).stop(true);
    						var w = el_to_move.width();
    						var h = el_to_move.height();
    						var l = e.pageX - (w / 2);
    						var t = e.pageY - (h / 2);
    						el_to_move.animate({
    							top: t + 'px',
    							left: l + 'px'
    						}, 1000);
    					});
    				}
    			}
    			return this;
    		},
    		isDraggable: function(options) {
    			if (!$(this).draggable) {
    				alert('To use the isDraggable method you need to load jquery-ui.js');
    				return this;
    			}
    			var options = $.extend({
    				type: 'isDraggable',
    				start: null,
    				stop: null,
    				drag: null
    			}, options || {});
    			var el_id = $(this).attr('id');
    			$._spritely.instances[el_id].isDraggableOptions = options;
    			$(this).draggable({
    				start: function() {
    					var el_id = $(this).attr('id');
    					$._spritely.instances[el_id].stop_random = true;
    					$(this).stop(true);
    					if ($._spritely.instances[el_id].isDraggableOptions.start) {
    						$._spritely.instances[el_id].isDraggableOptions.start(this);
    					}
    				},
    				drag: options.drag,
    				stop: function() {
    					var el_id = $(this).attr('id');
    					$._spritely.instances[el_id].stop_random = false;
    					if ($._spritely.instances[el_id].isDraggableOptions.stop) {
    						$._spritely.instances[el_id].isDraggableOptions.stop(this);
    					}
    				}
    			});
    			return this;
    		},
    		active: function() {
    			// the active sprite
    			$._spritely.activeSprite = this;
    			return this;
    		},
    		activeOnClick: function() {
    			// make this the active script if clicked...
    			var el = $(this);
    			if (window.Touch) { // iphone method see http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone/9 or http://www.nimblekit.com/tutorials.html for clues...
    				el[0].ontouchstart = function(e) {
    					$._spritely.activeSprite = el;
    				};
    			} else {
    				el.click(function(e) {
    					$._spritely.activeSprite = el;
    				});
    			}
    			return this;
    		},
    		spRandom: function(options) {
    			var options = $.extend({
    				top: 50,
    				left: 50,
    				right: 290,
    				bottom: 320,
    				speed: 4000,
    				pause: 0
    			}, options || {});
    			var el_id = $(this).attr('id');
    			if (!$._spritely.instances[el_id].stop_random) {
    				var r = $._spritely.randomIntBetween;
    				var t = r(options.top, options.bottom);
    				var l = r(options.left, options.right);
    				$('#' + el_id).animate({
    					top: t + 'px', 
    					left: l + 'px'
    				}, options.speed)
    			}
    			window.setTimeout(function() {
    				$('#' + el_id).spRandom(options);
    			}, options.speed + options.pause)
    			return this;
    		},
    		makeAbsolute: function() {
    			// remove an element from its current position in the DOM and
    			// position it absolutely, appended to the body tag.
    			return this.each(function() {
    				var el = $(this);
    				var pos = el.position();
    				el.css({position: "absolute", marginLeft: 0, marginTop: 0, top: pos.top, left: pos.left })
    					.remove()
    					.appendTo("body");
    			});
    		
    		},
    		spSet: function(prop_name, prop_value) {
    			var el_id = $(this).attr('id');
    			$._spritely.instances[el_id][prop_name] = prop_value;
    			return this;
    		},
    		spGet: function(prop_name, prop_value) {
    			var el_id = $(this).attr('id');
    			return $._spritely.instances[el_id][prop_name];
    		},
    		spStop: function(bool) {
    			$(this).each(function() {
    				var el_id = $(this).attr('id');
    				$._spritely.instances[el_id]['_last_fps'] = $(this).spGet('fps');
    				$._spritely.instances[el_id]['_stopped'] = true;
    				$._spritely.instances[el_id]['_stopped_f1'] = bool;
    				if ($._spritely.instances[el_id]['type'] == 'sprite') {
    					$(this).spSet('fps', 0);
    				}
    				if (bool) {
    					// set background image position to 0
    					var bp_top = $._spritely.getBgY($(this));
    					$(this).css('background-position', '0 ' + bp_top);
    				}
    			});
    			return this;		
    		},
    		spStart: function() {
    			$(this).each(function() {
    				var el_id = $(this).attr('id');
    				var fps = $._spritely.instances[el_id]['_last_fps'] || 12;
    				$._spritely.instances[el_id]['_stopped'] = false;
    				if ($._spritely.instances[el_id]['type'] == 'sprite') {
    					$(this).spSet('fps', fps);
    				}
    			});
    			return this;		
    		},
    		spToggle: function() {
    			var el_id = $(this).attr('id');
    			var stopped = $._spritely.instances[el_id]['_stopped'] || false;
    			var stopped_f1 = $._spritely.instances[el_id]['_stopped_f1'] || false;
    			if (stopped) {
    				$(this).spStart();
    			} else {
    				$(this).spStop(stopped_f1);
    			}
    			return this;		
    		},
    		fps: function(fps) {
    			$(this).each(function() {
    				$(this).spSet('fps', fps);
    			});
    			return this;
    		},
    		spSpeed: function(speed) {
    			$(this).each(function() {
    				$(this).spSet('speed', speed);
    			});
    			return this;
    		},
    		spRelSpeed: function(speed) {
    			$(this).each(function() {
    				var rel_depth = $(this).spGet('depth') / 100;
    				$(this).spSet('speed', speed * rel_depth);
    			});
    			return this;
    		},
    		spChangeDir: function(dir) {
    			$(this).each(function() {
    				$(this).spSet('dir', dir);
    			});
    			return this;
    		},
    		spState: function(n) {
    			$(this).each(function() {
    				// change state of a sprite, where state is the vertical
    				// position of the background image (e.g. frames row)
    				var yPos = ((n - 1) * $(this).height()) + 'px';
    				var xPos = $._spritely.getBgX($(this));
    				var bp = xPos + ' -' + yPos;
    				$(this).css('background-position', bp);
    			});
    			return this;
    		}
    	})
    })(jQuery);
    // Stop IE6 re-loading background images continuously
    try {
      document.execCommand("BackgroundImageCache", false, true);
    } catch(err) {}

  • #5
    New Coder
    Join Date
    Jun 2010
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Just sharing my understanding of a code snippet from spritely 0.2.1 plug-in (lines 40 to 48)

    Code:
    var w = options.width, h = options.height;
    if (!frames) {
    	frames = [];
    	total = 0
    	for (var i = 0; i < options.no_of_frames; i ++) {
    		frames[frames.length] = (0 - total);
    		total += w;
    	}
    }
    I think options.width and options.height come from the CSS

    Code:
    #bird3	{	
    	position: absolute;
    	width: 160px;
    	height: 128px;
    	background: transparent url(images/pigeon_5fx4r_c.png) 0 0 no-repeat;
    }
    I don't fully understand how but I think the code snippet is defining the visible area for the each frame in the sprite and then going back to the start after reaching the end.

    I've also been reading up on http://www.w3schools.com/js/js_objects.asp & http://www.quirksmode.org/js/associative.html as I think I need to understand these better to get how spritely 0.2.1 plug-in is working

    Thoughts appreciated

    Thank you


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •