1

Пишу свой аналог игры osu!Catch the beat. Суть игры в том, что нужно ловить падающие объекты (ну для наглядности лучше загуглить игру). Графику отрисовываю на PictureBox. Есть список объектов (ну которые нужно ловить) и в событии таймера перемещаю их так:

foreach(fruit fr in f) //fruit - это класс того самого объекта
// f - список объектов
{
     fr.move();
     fr.draw(ref g);
     //g - это Graphics, созданный из PictureBox
}

Функции move() и draw() выглядят так:

public void move()
{
     p.Y += speed;
     //где p - это Point, задающий положение объекта
}
public void draw(ref Graphics g)
{
     g.DrawImage(image, p);
     //image - картинка объекта (находится в данных класса)
}

Проблема вот в чем. Интервал в таймере стоит 1ms. Если выставлять медленную скорость(конкретней - переменную speed ~ 20-30) - да, будет плавно. Но если поставить её больше (скажем 100) - то понятное дело плавность исчезнет, поскольку перемещение за раз происходит аж на 100 пикселей.

И вот как добиться нужной скорости, при этом не теряя плавность?

5
  • 2
    1ms в таймере, это 1000 fps получается? зачем столько? что бы добиться максимально красивой плавности, нужно реализовать motion blur эффект.
    – Zergatul
    10 сен 2017 в 21:03
  • Конечно же, там нет столько. Если поставить, скажем 50ms, (ну и в соотвствующей пропорции увеличить speed), то будет ещё хуже
    – 9Pasha
    10 сен 2017 в 21:06
  • 2
    Я боюсь, что при слишком малых интервалах таймера ваша программа начинает работать некорректно, так как реальный интервал больше, чем вы ожидаете. Нужно не полагаться на точность таймера (довольно низкую в случае WinForms) при вычислении координат, а измерять реально прошедшее время через Environment.TickCount 11 сен 2017 в 4:41
  • Ну допустим время я буду считать через Environment.TickCount, а отрисовывать мне как, все так же через событие timer?
    – 9Pasha
    11 сен 2017 в 13:36
  • Вам надо сначала определиться, какой скорости движения вы хотите достичь (в пикселях/ мс). 100 пикс./мс - нереально, так как при этом вся высота монитора, скажем 1000 пикс., будет проходится за 0,01 с, меньшее периода перерисовки изображения. Даже 10 пикс./мс уже довольно быстро. Потом определиться с периодом таймера (1 мс - слишком мало, я бы взял 10 мс). На основе этих величин уже можно посчитать скорость в пикс. на тик таймера (вашу speed). Так возможно и замерять время не придется, если параметры подобрать нормальные. 12 сен 2017 в 10:34

2 ответа 2

2

Не знаю, что за PictureBox такой, но в играх так уж сложилось, что перемещение осуществляется по обычной физической формуле:

S = v * t, где: S - расстояние, которое пройдёт объект v - его скорость в пикселях в секунду (в данной случае) t - прошедшее время.

Чтобы объекты двигались плавно, их надо двигать каждый кадр на S, подставляя вместо t время, прошедшее с предыдущего кадра. В коде это может выглядеть так:

// вызывается постоянно, например - каждый раз, когда отрисовывается форма (OnDraw, OnRender или что-то такое)
public void move(float deltaTime)
{
p.Y += speed * deltaTime;
}

Вот и всё. Никаких motionBlur'ов (лезть в шейдеры, когда прогаешь под WinForms? странно), обычное движение. А привязывать движение к фиксированному фпс очень плохо: фпс никогда не будет точной мерой того, сколько прошло времени.

В вашем решении speed - не скорость в привычном понимании, а количество пикселей, на которое смещается объект за 1 тик таймера - 1 мс. Поэтому у вас возникает проблема "не могу добиться нужной скорости": потому что вы оперируете не скоростью. Нужна скорость 500 пикс/сек? Отлично, смещайте каждый кадр объект на (500 * времени_прошло_с_прошлого_кадра_в_секундах) пикселей. Ещё замечание: не очень здорово привязывать перемещение на событие таймера, т. к. он может срабатывать либо реже, чем отрисовывается игра, либо чаще - оба случая плохи, т. к. на разных компьютерах игра будет ощущаться абсолютно по-разному, а подобная зависимость - зло.

6
  • А к чему можно привязать перемещение? (ну т.е. к какому событию или ещё к чему?)
    – 9Pasha
    12 сен 2017 в 10:27
  • 1
    Небольшое отступление. Вообще в играх уже устоявшимся шаблоном можно считать использование метода Update. Этот метод должен вызываться каждый кадр, а в нём уже происходит вся логика: проверка столкновений, свои вычисления и т. д. Утрированно, но для примера подойдёт. А касательно вашего вопроса: привязать перемещение можно, например, к событию отрисовки формы. Называться оно должно как-нибудь вроде OnDraw, OnRender, OnPaint. Точно не помню, т. к. с WinForms почти не работал. Вот в таком событии и вызывайте свой Update - ну или в вашем случае: move, draw и т. д.
    – kakeru
    12 сен 2017 в 10:43
  • 1
    П. С. Вообще могу порекомендовать книгу "Шаблоны игрового программирования": gitbook.com/book/likerrr/gameprogrammingpatterns/details
    – kakeru
    12 сен 2017 в 10:47
  • Ну у меня был вариант отрисовывать через OnPaint. Но просто если я буду вызавать фунцию Draw() внутри неё, то она собой повлечет обработку события OnPaint, что в принципе является бесконечным циклом, в следствии чего игра виснет
    – 9Pasha
    12 сен 2017 в 10:50
  • 1
    @9Pasha move() привязать к таймеру, а Draw() - к OnPaint, тогда ничего виснуть не будет. kakeru походу путает с DirectX, в winforms его поход вряд ли применим 12 сен 2017 в 10:56
1

Рекомендации по правильной реализации движущейся графики в WinForms таковы.

  1. Определиться с оптимальным периодом перерисовки. Все зависит от ситуации, но меньше 10 мс для стандартных таймеров он точно не должен быть. Затем соответственно определиться, какое расстояние в пикселях объект должен проходить за этот период для получения желаемого эффекта (назовем pix_per_tick)

  2. Вместо PictureBox рисовать в чем-то полегче, например Panel.

  3. В обработчике таймера поместить код движения и обновления panel

private void timer1_Tick(object sender, EventArgs e)
{
   p.Y -= pix_per_tick;            
   panel1.Refresh();
}
  1. В обработчике OnPaint поместить код рисования

  2. Включить двойную буферизацию на уровне ОС, добавив в код формы следующее:

protected override CreateParams CreateParams
{
    get
    {
       var cp = base.CreateParams;
       cp.ExStyle |= 0x02000000;    // WS_EX_COMPOSITED
       return cp;
    }
}
6
  • После замены PictureBox на Panel результат значительно лучше. Единственное, раньше я рисовал сначала на промежуточном Bitmap, а потом присваивал его PictureBox.Image (ну да, это в принципе и есть двойная буферизация). Но вот ваш код для двойной буферизации у меня не особо сработал (если быть точней, то стало мигать ещё сильней). Можно поинтересоваться, что такое 0x02000000? Если это, допустим, код какого-либо цвета, то у меня фон черный
    – 9Pasha
    12 сен 2017 в 11:51
  • panel1.Refresh(); - лучше собственную процедуру рисования сразу вывывать. При Refresh будет мерцание.
    – Qwertiy
    12 сен 2017 в 11:57
  • @Qwertiy Чтобы вызывать свою процедуру по таймеру, в ней нужно реализовать стирание изображения предыдущего кадра (иначе от падающего шарика шлейф будет оставаться). Да так можно сделать, но это сложнее, а мерцание можно уменьшить включением двойной буферизации через стиль окна 12 сен 2017 в 17:31
  • 1
    @9Pasha Это константа стиля окна WS_EX_COMPOSITED из заголовочных файлов Windows SDK. Этот стиль включает двойную буферизацию средствами ОС для окна и всех его дочерних окон. Не знаю почему у вас не сработало. Вы как получаете объект Graphics? Его надо брать из аргументов события Paint, чтобы это работало 12 сен 2017 в 17:35
  • @VadimTagil, вроде даже если Paint будет полностью затирать всю уобласть, это будет смотретья лучше, чем вызов Refresh. Ну и да, двойную буферизацию надо включить :)
    – Qwertiy
    12 сен 2017 в 17:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.