Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.10.2019, 07:44
Интересующийся
Отправить личное сообщение для Wimko Посмотреть профиль Найти все сообщения от Wimko
 
Регистрация: 05.10.2019
Сообщений: 13

Как задать начальные координаты sprite?
Всем привет, пытаюсь разобраться в уроке
// Copyright 2013 William Malone ([url]www.williammalone.com[/url])
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//   [url]http://www.apache.org/licenses/LICENSE-2.0[/url]
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

(function() {
	// [url]http://paulirish.com/2011/requestanimationframe-for-smart-animating/[/url]
	// [url]http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating[/url]
	// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
	// MIT license

    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

(function () {

	var coin,
		coinImage,
		canvas;

	function gameLoop () {

	  window.requestAnimationFrame(gameLoop);

	  coin.update();
	  coin.render();
	}

	function sprite (options) {

		var that = {},
			frameIndex = 0,
			tickCount = 0,
			ticksPerFrame = options.ticksPerFrame || 0,
			numberOfFrames = options.numberOfFrames || 1;

		that.context = options.context;
		that.width = options.width;
		that.height = options.height;
		that.image = options.image;

		that.update = function () {

            tickCount += 1;

            if (tickCount > ticksPerFrame) {

				tickCount = 0;

                // If the current frame index is in range
                if (frameIndex < numberOfFrames - 1) {
                    // Go to the next frame
                    frameIndex += 1;
                } else {
                    frameIndex = 1;
                }
            }
        };

		that.render = function () {

		  // Clear the canvas
		  that.context.clearRect(0, 0, that.width, that.height);

		  // Draw the animation
		  that.context.drawImage(
		    that.image,
		    frameIndex * that.width / numberOfFrames,
		    0,
		    that.width / numberOfFrames,
		    that.height,
		    0,
		    0,
		    that.width / numberOfFrames,
		    that.height);
		};

		return that;
	}

	// Get canvas
	canvas = document.getElementById("coinAnimation");
	canvas.width = 1200;
	canvas.height = 128;


	// Create sprite sheet
	coinImage = new Image();

	// Create sprite
	coin = sprite({
		context: canvas.getContext("2d"),
		width: 640,
		height: 128,
		image: coinImage,
		numberOfFrames: 5,
		ticksPerFrame: 5
	});

	// Load sprite sheet
	coinImage.addEventListener("load", gameLoop);
	coinImage.src = "img/SpriteMen.png";

} ());


Со скоростью и кадрами понятно, но не понятно, как в таком случае задать первоначальное положение объекта sprite, подскажите пожалуйста, кто знает.
Ответить с цитированием
  #2 (permalink)  
Старый 24.10.2019, 15:10
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

https://developer.mozilla.org/ru/doc...xt2D/drawImage
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как получать координаты при каждом клике мышью? wadim Общие вопросы Javascript 10 01.02.2014 16:44
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
как в datepicker задать диапазон дат во время выполнения скрипта. Yurik jQuery 0 23.02.2011 12:19
Как правильно задать ID в создаваемом элементе ? Indiana Events/DOM/Window 15 31.10.2010 16:15