Основная механика: отображение позиций слоев с помощью Utils.Modulate
Предстоящие игры и / или игровая механика в этой серии
Настройтесь на утро четверга, чтобы увидеть новую запись из этой серии. Я хотел бы прочитать ваши предложения в комментариях.
- Выбор персонажа для рейдового штаба [четверг, 23 июня]
- Бесконечный бегун [четверг, 30 июня]
- Guitar Hero [четверг, 7 июля]
- Карточный матч [четверг, 14 июля]
- Змея [четверг, 21 июля]
- Ловец падающих мячей [четверг, 28 июля]
- Аркадный джойстик [четверг, 4 августа]
- Раздвижные блоки [четверг, 11 августа]
- Вертикальный платформер [четверг, 18 августа]
- Pong [четверг, 25 августа]
- Буря [четверг, 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
- Слушатели событий
- Состояния слоя
- Утилита методы
- Поток управления