Основная механика: отображение позиций слоев с помощью Utils.Modulate

Предстоящие игры и / или игровая механика в этой серии

Настройтесь на утро четверга, чтобы увидеть новую запись из этой серии. Я хотел бы прочитать ваши предложения в комментариях.

  1. Выбор персонажа для рейдового штаба [четверг, 23 июня]
  2. Бесконечный бегун [четверг, 30 июня]
  3. Guitar Hero [четверг, 7 июля]
  4. Карточный матч [четверг, 14 июля]
  5. Змея [четверг, 21 июля]
  6. Ловец падающих мячей [четверг, 28 июля]
  7. Аркадный джойстик [четверг, 4 августа]
  8. Раздвижные блоки [четверг, 11 августа]
  9. Вертикальный платформер [четверг, 18 августа]
  10. Pong [четверг, 25 августа]
  11. Буря [четверг, 1 сентября]

Ссылка на прототип Framer

Этот прототип - не столько игра, сколько симуляция физического игрового контроллера: аркадного джойстика. Взяв его за ручку и перетащив в любом направлении, можно управлять элементом на экране.

Элементы игры

  • Компонент джойстика
  • Объект, управляемый игроком, объект
  • [Необязательно] кнопка для переключения правшей и левшей

Компонент джойстика

# Joystick Components
# Area at large to encompass both positions for joystick
joystickArea = new Layer
 x: Screen.width / 2
 y: 901
 width: 300, height: 300
 backgroundColor: "transparent"
 borderColor: "maroon"
 borderWidth: 10
 borderRadius: "50%"
joystickArea.states.animationOptions = time: 0.2
joystickArea.states.add
 right:
  x: Screen.width / 2
 left:
  maxX: Screen.width / 2
# Layer acting as visual joint for joystick handle [Grey shape under joystick]
joystickHandle = new Layer
 parent: joystickArea
 x: Align.center
 y: Align.center
 width: 150, height: 150
 borderRadius: "50%"
# Draggable joystick object
joystick = new Layer
 parent: joystickArea
 width: 200, height: 200
 x: Align.center
 y: Align.center
 borderRadius: 100
 backgroundColor: "red"
joystick.draggable.enabled = yes
joystick.draggable.overdrag = no
joystick.draggable.constraints = 
 x: 0, y: 0
 width: joystickArea.width
 height: joystickArea.height

Кнопка переключения рук

# Switch Hands Button
handToggle = new Layer
 y: Align.bottom
 width: 750
 height: 100
Utils.labelLayer(handToggle, "Switch Hands")
handToggle.style = fontSize: "48px"
# When button is clicked, it toggles state on joystickArea
handToggle.on Events.Click, ->
 joystickArea.states.next "left", "right"

Объект, управляемый джойстиком

# Joystick-controlled Object
player = new Layer
 x: Align.center
 y: Align.center(-200)
 rotation: 45
 borderRadius: "25%"
# Using color to denote whether object is activated by joystick
player.states.add
 moving:
  backgroundColor: "white"
 notMoving:
  backgroundColor: "gray"

Где происходят чудеса

# Joystick Mapping Logic
# Whenever the joystick is being dragged [i.e. it's position changes]
joystick.on "change:point", ->
 player.states.switch "moving"
 # Update x and y position of game object by amount between 0 and 4 units
 # depending on how far from the center the joystick is dragged
 player.x = player.x + Utils.modulate(joystick.x, [0,100], [-4,4])
 player.y = player.y + Utils.modulate(joystick.y, [0,100], [-4,4])
 
 # Restrict boundary for player object so it never goes beyond screen
 if player.x < 0
  player.x = 0
 if player.maxX > Screen.width
  player.maxX = Screen.width
 if player.y < rules.height
  player.y = rules.height
 if player.maxY > Screen.height - handToggle.height
  player.maxY = Screen.height - handToggle.height
# When joystick is no longer activated, return it to its original position
joystick.on Events.DragEnd, ->
 joystick.center()
 player.states.switch "notMoving"

Здесь выделены механизмы Framer / CoffeeScript

  • Слушатели событий
  • Состояния слоя
  • Утилита методы
  • Поток управления