Esta página é melhor visualizada com o JavaScript habilitado

Como Fazer A Imagem Seguir O Mouse No Gideros

 ·  ‚ėē 3 min. de leitura

O código abaixo mostra como fazer a imagem seguir o mouse no Gideros Mobile.

A ideia √© bem simples. Eu me inscrevo para receber as notifica√ß√Ķes de que o mouse se moveu e neste momento leio a posi√ß√£o do mouse. A√≠ s√≥ tenho que mover a minha imagem at√© pr√≥ximo da posi√ß√£o onde o mouse est√°.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
-- Below there are 2 auxiliary functions

function Distance(x1,y1, x2,y2)
  return (x2-x1)^2+(y2-y1)^2
end

function Lerp(a, b, t)
  return a + t * (b - a)
end


-- In order to encapsulate the of following the mouse, we are
-- going to create class FollowSprite that is derived from Sprite class.


-- Pay attention to line below. It shows you how to extend a class in Gideros.
FollowSprite = Core.class(Sprite)

-- init() method is the constructor of our class. It will be called when one
-- instantiates FollowSprite (it's done by calling function new()).
--
-- speed parameter adjusts how fast sprite will follow mouse.
-- distance parameter sets how far from mouse sprite will be.
-- texture expects the

function FollowSprite:init(speed, distance, image)
  self.bmp = Bitmap.new(Texture.new(image))
  self.bmp:setAnchorPoint(.5,.5)
  self:addChild(self.bmp)
  self.tx = 0
  self.ty = 0
  self.speed = speed
  self.dist = distance
end

function FollowSprite:follow(x, y)
  self.tx = x
  self.ty = y
end

function FollowSprite:update(dt)
  local x, y = self:getPosition()
  local distSq = Distance(x, y, self.tx, self.ty)

  if (distSq > self.dist^2) then
    local t = 0.1
    x = Lerp(x, self.tx, t)
    y = Lerp(y, self.ty, t)
    self:setPosition(x, y)
  end
end

-- Here we instantiate FollowSprite. Note that it calls init().
local obj = FollowSprite.new(300, 20, 'gideros.png')

stage:addChild(obj)

-- On ENTER_FRAME event we update sprite's position.
stage:addEventListener(Event.ENTER_FRAME, function(e)
                       local dt = e.deltaTime
                       obj:update(dt)
                       end)

-- On MOUSE_HOVER event, we update sprite position when mouse moves.
stage:addEventListener(Event.MOUSE_HOVER, function(e)
                       obj:follow(e.x, e.y)
                       end)

Na imagem abaixo vocês podem ver a imagem seguindo o mouse.

Image following the mouse in Gideros

O projeto completo pode ser baixado do meu repositório github.

Leia os coment√°rios no arquivo main.lua para ver instru√ß√Ķes sobre como definir as propriedades tanto do projeto quanto do Gideros player.

Gostou do tutorial? Então comenta lá no Instagram ou no Twitter. E aproveita e me fala quais tutoriais você gostaria de ver.

Artigo anterior nesta série de pequenos códigos do Gideros: Como Mover Uma Imagem No Gideros

Compartilhar em

M√°rcio Andrey Oliveira
Escrito por
M√°rcio Andrey Oliveira
Passionate about coding, languages, electronics...