Sand — бесплатный симулятор песка, который работает прямо в браузере. Он заполняет экран сотнями тысяч крошечных песчинок: их можно сдвигать пальцем, пересыпать, наклоняя телефон, и разбрасывать встряхиванием. Игрушка написана на WebGL2 и JavaScript и работает на телефонах, планшетах и компьютерах без всякой установки.
Это не игра с уровнями или очками. Это спокойная цифровая игрушка, что-то вроде дзен-песочницы, и оторваться от неё на удивление трудно. Ниже — как играть, за что отвечает каждая настройка, несколько советов для более красивых узоров и короткий рассказ о том, почему песок кажется таким настоящим.
Sand в двух словах
| Что это | Гиперреалистичный симулятор песка (расслабляющая игрушка, без уровней) |
| Где играть | av.github.io/safe-sand в любом современном браузере |
| Цена | Бесплатно в вебе |
| Устройства | Телефоны, планшеты и компьютеры |
| Управление на телефоне | Проведите пальцем — рисовать, наклоните — пересыпать, встряхните — разбросать |
| Управление на компьютере | Тяните мышью — сдвигать, стрелки или WASD — наклон, удерживайте Пробел — встряхнуть |
| Технологии | WebGL2 и JavaScript, симуляция на видеочипе |
| Исходный код | GitHub |
Как играть в Sand
При открытии страницы появляется небольшая стартовая карточка. Вы выбираете песок, выбираете, что лежит «под» ним, и нажимаете Pour («Насыпать»).
- Выберите вид песка: River, Beach, Desert, Volcanic или Coral (речной, пляжный, пустынный, вулканический, коралловый). У каждого свой набор цветов — от серой речной крошки до тёмного вулканического песка и светлого кораллового.
- Выберите, что под песком: Light, Lock screen или Screen off (светлый фон, экран блокировки или выключенный экран). От этого зависит поверхность, на которой лежат песчинки.
- Нажмите Pour. На iPhone разрешите доступ к датчикам движения, когда появится запрос, иначе наклон не будет работать.
- Играйте. Проведите пальцем по песку, чтобы прочертить канавку, наклоните телефон, чтобы песок пополз, встряхните, чтобы разбросать песчинки, или переверните телефон экраном вниз и посмотрите, как песок осыпается.
На компьютере вместо пальца используется мышь, стрелки или WASD наклоняют виртуальный лоток, а удержание Пробела встряхивает его. Песок реагирует так же, но создатель задумывал игрушку именно для телефона: благодаря датчикам движения песок откликается на вашу настоящую руку.
Настоящий полноэкранный режим на телефоне
Панели браузера занимают место. Чтобы получить полный эффект, добавьте страницу на главный экран: Share → Add to Home Screen («Поделиться → На экран „Домой“») на iOS или Install app («Установить приложение») на Android. После этого она открывается как приложение, от края до края.
Почему этот симулятор песка выглядит так реалистично
Большинство знакомых вам браузерных игр с песком используют сетку: каждый пиксель — это «клетка», в которой может быть песок, вода или пустота, а простые правила сдвигают её вниз по одному шагу. Такой подход отлично подходит для строительства и смешивания, но песок выглядит пиксельным. Sand идёт другим путём и старается повторить настоящий песок.
Согласно описанию проекта на GitHub:
- Симулируется каждая песчинка. Одновременно на видеочипе (GPU) движутся примерно от 100 000 до 460 000 отдельных песчинок.
- Реальные единицы. Симуляция считает в миллиметрах с реальной гравитацией (9,81 м/с²), поэтому скорость и лёгкая инерция песка совпадают с тем, чего ждёшь от настоящего.
- Каждая песчинка особенная. У песчинок свой размер, минеральный цвет и трение. Отдельные песчинки катятся и подпрыгивают, а большая куча стоит на месте, пока наклон не превысит её угол естественного откоса — самый крутой склон, который куча держит, прежде чем осыпаться.
- Свет и тень. Каждый кадр приложение строит карту высот куч, что даёт склоны, собственные тени и мягкое затенение в складках. Направление света следует за наклоном телефона, поэтому тени вытягиваются, а кварцевые песчинки поблёскивают, когда вы двигаете устройство.
- Звук рождается из самого песка. Шорох складывается из тысяч крошечных щелчков в секунду в зависимости от того, сколько песка реально движется. Камешки дают щелчки пониже. Когда ничего не движется, наступает полная тишина.
Ещё одна деталь показывает, насколько далеко зашёл реализм: поворот телефона не поворачивает картинку. Песок остаётся привязанным к стеклу, как настоящий песок в лотке.
Сравнение видов песка и фонов
| Вид песка | Как выглядит | Для чего хорош |
|---|---|---|
| River | Серо-коричневая крошка с мелкими камешками | Глубокие, чёткие канавки |
| Beach | Светлый тёплый бежевый | Мягкие, спокойные узоры |
| Desert | Оранжево-красные песчинки | Сильный цветовой контраст на светлой поверхности |
| Volcanic | От тёмно-серого до чёрного | Чёткие линии и выразительные тени |
| Coral | Очень светлый, почти белый | Тонкие, нежные завитки |
Настройка «под песком» меняет поверхность, на которой лежат песчинки: Light, Lock screen или Screen off. Попробуйте каждую с одним и тем же видом песка, чтобы понять, какой вид вам нравится больше.
7 советов для красивых узоров на песке
- Насыпьте и подождите секунду. Дайте песчинкам улечься, прежде чем рисовать, иначе линии снова засыплет.
- Рисуйте медленно — края будут чище. Медленный палец оставляет чёткую канавку с ровными стенками, а быстрый взмах отбрасывает песок в стороны.
- Наклоняйте понемногу. Наклоните чуть дальше точки, где песок начинает двигаться, затем снова выровняйте телефон. Так можно управлять целыми дюнами.
- Встряхните, чтобы начать заново. Сильная встряска распределяет песок свежим ровным слоем для следующего рисунка.
- Для рисования берите вулканический песок. Тёмный песок на светлой поверхности лучше всего показывает линии и тени.
- Включите звук и наденьте наушники. Звук создаётся движущимися песчинками, так что вы услышите разницу между медленным сползанием и внезапной лавиной.
- Если всё дёргается, проверьте Low Power Mode (режим энергосбережения). На iPhone этот режим ограничивает браузеры 30 кадрами в секунду. Приложение это распознаёт и не уменьшает из-за этого количество песка, но если выключить режим, частота кадров вернётся к полной.
Если тормозит
Приложение само подстраивает качество. Если кадры идут медленно две секунды, оно сначала поэтапно снижает чёткость экрана и только потом уменьшает число песчинок. Уровень запоминается до следующего визита. Поэтому на старом телефоне или ноутбуке без мощного видеочипа песок может выглядеть чуть мягче, но двигаться будет плавно. Скриншоты для этой статьи сделаны в настольном браузере с программной графикой, поэтому некоторые участки выглядят слегка блочными.
Краткая история игр с падающим песком
Песочные игрушки популярны в браузерах уже около двадцати лет:
- 2005: Java-апплет в японском блоге сделал жанр популярным. Более поздняя расширенная версия, «Falling Sand Game», дала название всему жанру.
- 2007: Powder Game добавила в формулу симуляцию жидкостей.
- 2010: The Powder Toy принесла жидкости и ньютоновскую гравитацию игрокам на компьютерах.
- 2019: Sandspiel показала, что песочная игрушка может быстро работать в браузере на Rust, скомпилированном в WebAssembly, и WebGL. Её создатель объяснил в своём разборе, что каждый элемент следует очень простым правилам на сетке, а всё веселье — в том, как взаимодействуют соседи.
- 2020: Noita от Nolla Games вышла из раннего доступа 15 октября — экшен-рогалайт, в котором, по словам студии, «каждый пиксель симулируется физически».
Sand — другая ветвь этого семейства. Вместо множества элементов на пиксельной сетке он сосредоточен на одном материале — настоящих песчинках, измеренных в миллиметрах, — и на ощущении, будто держишь лоток в руках.
Чему могут научиться разработчики веб-игр
- WebGL2 хватает для тяжёлой симуляции. Сотни тысяч частиц работают в обычной вкладке браузера, нативное приложение не нужно.
- Используйте датчики. Наклон и встряхивание через датчики движения делают игрушку осязаемой. Помните, что iOS спрашивает разрешение, поэтому запускайте датчики по нажатию кнопки.
- Подстраивайте качество, а не угадывайте его. Измеряйте время кадра, проверяйте, не ограничивает ли браузер просто частоту кадров, затем снижайте качество небольшими шагами и запоминайте результат.
- Звук должен следовать за симуляцией. Звук, созданный из того, что реально движется, звучит естественнее, чем зацикленный сэмпл.
- Пусть хостинг будет простым. У проекта нет этапа сборки: его может раздавать любой сервер статических файлов.
Частые вопросы
Симулятор песка Sand бесплатный?
Да. Веб-версия на av.github.io/safe-sand бесплатна, играть можно прямо в браузере, без загрузки и регистрации.
Работает ли Sand на ПК?
Да. Тяните мышью, чтобы сдвигать песок, используйте стрелки или WASD для наклона и удерживайте Пробел, чтобы встряхнуть. Версия для телефона ощущается естественнее, потому что использует датчики движения.
Почему на iPhone не работает наклон?
iOS нужно ваше разрешение, чтобы передавать данные о движении веб-странице. Нажмите Pour и разрешите доступ к движению, когда появится запрос.
Sand — это игра с уровнями?
Нет. Это расслабляющая игрушка-песочница. Здесь нет очков, таймера или цели: вы просто рисуете, наклоняете и трясёте.
Что такое игра с падающим песком (falling-sand)?
Это вид игр-симуляторов, в которых множество мелких частиц — песок, вода или огонь — подчиняются простым физическим правилам и взаимодействуют друг с другом. Известные примеры — Powder Game, The Powder Toy и Noita.
Сколько песчинок симулирует Sand?
По словам создателя, примерно от 100 000 до 460 000 песчинок, в зависимости от устройства.
