Тема: Урок HUD Designer

Приветствую. Хочу с вами поделится, зарубежной системой автоматизированного создания интерфейса. В чем суть? В том, что на панель мы выносим нужные нам элементы, присваиваем им определенные свойства и нажимаем сгенерировать скрипт. В итоге готовый скрипт вставляется в игру и вуаля, у нас собственный интерфейс. ссылка на онлайн программу



Введение

Вот так, выглядит генератор и уже сделанный Hud интерфейс ... у них в пример брался ReinoRPGHud

Спойлер 1:

На этом рисунке, я подписал, что делает каждый из элементов
тутор.jpg
при нажатии EXPORT HUD (сохранение) он выдаст вам набор букв и чисел, это если по простому. Его стоит скопировать в блокнот. И в случае если нужно отредактировать ваш интерфейс, просто нажимаем Импорт и вставляем этот код туда.

Делаем интерфейс:

Создадим простейший интерфейс. И проведём некоторые настройки
Первое, это просто добавлю прямоугольник(1. см. на картинке).
пример 2.jpg
Теперь добавлю текстовые окна (например имя героя, класс, количество золота и его уровень). Просто берем виджет и перетаскиваем на экран. После расставляем его как вам удобно. Это все можно делать мышью. После, раскроем дополнительные настройки текста. Там указывается размер текста, цвет, и всякие красотули. Но главное, это тип выдаваемого текста. Там есть список (первоначально стоит просто Text). Это просто текст, который вы введете. Другие же типы, относятся к определенным параметрам персонажа или местности или чего либо глобального (имя, класс, лвл). Скрипт устроен так, что он автоматически будет это все считывать!
пример3.jpg
Теперь добавлю изображения (например изображение чара, и красотульки над лвлом, классом и золотом из иконсета ). Иконки берутся из ид указанного в иконсете. Но можно и использовать к примеру, то что одето на персонаже, то и отображается. У таких при выборе из списка приставка ACTOR'S. Либо использовать ваши именные файлы графики (они будут браться из Graphics\Pictures).
пример 4.jpg

Вот что у меня получилось в итоге:
итог.jpg

Это код для вставки в игру

Спойлер скрипт для игры:

module HUDWidgets
#----------
class WidgetBase < Sprite
def initialize(name, x, y, z)
super()
@name = name
self.x, self.y, self.z = x, y, z
end
def z=(v)
super(v + 60)
end
def z
return super() - 60
end
end
#----------
class RectWidget < WidgetBase
def initialize(name, x, y, z, w, h, color)
super(name, x, y, z)
@color = color
bmp = Bitmap.new(w, h)
bmp.fill_rect(bmp.rect, color)
self.bitmap = bmp
end
end
#----------
class ImageWidget < WidgetBase
attr_accessor :zoom_x, :zoom_y
def initialize(name, x, y, z, w, h, a, param, text, idx)
super(name, x, y, z)
@iw, @ih = w, h
self.opacity = a
@param, @text, @idx = param, text, idx
case @param
when 1
update_char
when 3 .. 16
self.bitmap = Cache.system('Iconset')
self.src_rect = Rect.new(0, 0, 24, 24)
update_icon
end
#-----
@zoom_x_base = @iw.to_f / self.width
@zoom_y_base = @ih.to_f / self.height
self.zoom_x = 1.0
self.zoom_y = 1.0
end
def zoom_x=(v)
@zoom_x = v.to_f
super(@zoom_x_base * @zoom_x)
end
def zoom_y=(v)
@zoom_y = v.to_f
super(@zoom_y_base * @zoom_y)
end
def update_char
return unless @param == 1
actor = $game_party.leader
bmp = self.bitmap = Cache.character(actor.character_name)
sign = actor.character_name[/^[!$]./]
#-----
if sign and sign.include?('$')
cw, ch = bmp.width / 3, bmp.height / 4
else
cw, ch = bmp.width / 12, bmp.height / 8
end
n = actor.character_index
self.src_rect = Rect.new((n%4*3+1)*cw, (n/4*4)*ch, cw, ch)
self
end
def update_icon
return unless @param >= 3
actor = $game_party.leader
i_idx = 0
case @param
when 4
i_idx = ($data_weapons[@idx].icon_index rescue 0)
when 9
i_idx = ($data_skills[@idx].icon_index rescue 0)
when 10
i_idx = ($data_states[@idx].icon_index rescue 0)
else
i_idx = 0
end
self.src_rect = Rect.new(i_idx % 16 * 24, i_idx / 16 * 24, 24, 24)
end
end
#----------
class TextWidget < WidgetBase
def initialize(name, x, y, z, param, text, id, fname, fsize, fbold, fitalic, fshadow, fcolor, foutline, foutline_color, tw, th, fix_from)
super(name, x, y, z)
#-----
@fsize = fsize
@fix_from = fix_from
@initial_width = nil
#-----
@font = Font.new(fname, fsize)
@font.bold = fbold
@font.italic = fitalic
@font.shadow = fshadow
@font.outline = foutline
@font.out_color = foutline_color
@fbmp = Bitmap.new(1, 1)
@fbmp.font = @font
#-----
@param, @text, @id = param, text, id
@tw, @th = tw, th
#-----
r = @fbmp.text_size('Text')
@font.size *= (@tw.to_f / r.width)
#-----
@fbmp.font = @font
#-----
self.oy = (((r.height * (@tw.to_f / r.width)) * (1.0 - (r.width / @tw.to_f))) * 0.5).ceil
#-----
update
end
def update
actor = $game_party.leader
case @param
when 10 # LVL
str = (@text % actor.level) rescue actor.level.to_s
when 12 # Actor's Name
str = (@text % actor.name) rescue ''
when 13 # Actor's Class
str = (@text % actor.class.name) rescue ''
when 14 # Gold Amount
str = (@text % $game_party.gold) rescue '0'
else
return
end
#-----
self.bitmap.dispose if self.bitmap and not self.bitmap.disposed?
return if str.empty?
#-----
r = @fbmp.text_size(str)
bmp = self.bitmap = Bitmap.new(r.width + 32, r.height)
bmp.font = @font
bmp.draw_text(bmp.rect, str, 0)
#-----
@initial_width ||= self.width
#-----
case @fix_from
when 0
self.ox = 0
when 1
self.ox = (self.width - @initial_width) / 2
when 2
self.ox = self.width - @initial_width
end
end
end
end
class Scene_Map < Scene_Base
#----------
alias :hud_alias_start :start
alias :hud_alias_update :update
alias :hud_alias_p_term :terminate
#----------
def start
hud_alias_start
start_hud
end
#-----
def start_hud
@actor_info_cache, @var_info_cache, @hud_widgets = {}, {}, {}
@hud_widgets[5] = HUDWidgets::RectWidget.new('1 pryamougol', 167, 432, 0, 320, 48, Color.new(0, 0, 0, 159))
@hud_widgets[6] = HUDWidgets::TextWidget.new('text Name', 209, 463, 1, 12, '%s', 0, 'Arial', 10, true, false, true, Color.new(255, 215, 0, 255), false, Color.new(0, 0, 0, 255), 24, 10,0)
@hud_widgets[7] = HUDWidgets::TextWidget.new('text class', 240, 463, 2, 13, '%s', 0, 'Arial', 10, true, false, true, Color.new(0, 255, 127, 255), false, Color.new(0, 0, 0, 255), 24, 10,0)
@hud_widgets[8] = HUDWidgets::TextWidget.new('text gold', 390, 460, 3, 14, '%d', 0, 'Arial', 15, true, false, true, Color.new(255, 215, 0, 255), false, Color.new(0, 0, 0, 255), 36, 15,0)
@hud_widgets[9] = HUDWidgets::TextWidget.new('text level', 297, 457, 4, 10, '%d', 0, 'Arial', 18, true, false, true, Color.new(220, 20, 60, 255), false, Color.new(0, 0, 0, 255), 42, 18,0)
@hud_widgets[10] = HUDWidgets::ImageWidget.new('image hero', 169, 440, 5, 32, 32, 255, 1, '', 0)
@hud_widgets[11] = HUDWidgets::ImageWidget.new('image class', 257, 439, 6, 15, 15, 255, 4, '', 1)
@hud_widgets[12] = HUDWidgets::ImageWidget.new('image lvl', 292, 433, 7, 24, 24, 255, 9, '', 1)
@hud_widgets[13] = HUDWidgets::ImageWidget.new('image gold', 388, 431, 8, 24, 24, 255, 10, '', 1)
update_hud
end
#----------
def update
hud_alias_update
update_hud
end
#-----
def update_hud
actor = $game_party.leader
if @actor_info_cache[:char_name] != actor.name
@hud_widgets[6].update
@actor_info_cache[:char_name] = actor.name
end
if @actor_info_cache[:char_class] != actor.class.name
@hud_widgets[7].update
@actor_info_cache[:char_class] = actor.class.name
end
if @actor_info_cache[arty_gold] != $game_party.gold
@hud_widgets[8].update
@actor_info_cache[arty_gold] = $game_party.gold
end
if @actor_info_cache[:char_level] != actor.level
@hud_widgets[9].update
@actor_info_cache[:char_level] = actor.level
end
if @actor_info_cache[:char_name] != actor.character_name or @actor_info_cache[:char_idx] != actor.character_index
@hud_widgets[10].update_char
@actor_info_cache[:char_name] = actor.character_name
@actor_info_cache[:char_idx] = actor.character_index
end
end
#----------
def terminate
hud_alias_p_term
hud_dispose
end
#-----
def hud_dispose
@hud_widgets.each_value {|hw| hw.dispose }
end
#----------
end

код для сайта, чтобы импортировать и поглядеть мою демку :

Спойлер код демки для импорта:

eNrNlU9vmzAYh79KZGnSKqHJ/wDDbbftssM0acfIAQesmDgCkqat+t332jGU
NZXqddJWJYeX18H4eWx+eUApKh/QTu9rVKLvqhp/6rpRI0rQXnYKemR16O9k
Z4+NNdA9o5JkeYLuUMkZTdA9KnGCjK12CmbYSjOoBJ30oDcG7h 77I1ze6nps
Ucko/LJVumlHuFmE/tro/Q6eg9E0uOxU1tge6r7ZyI848Z9PGc2xYCwjhAvB
OL1BjwnKFhw/1PmKY4Te6purPQTFxQUiYx6CvAZxkL3snA8KE7jJoP4wQK3r
sNat3bvm515LZ2rQ997fFQZN04SSFFDIDYxtrKmnh+hRGl3NSx haWdvbadAe
RzCj5tFwvX7BkZ94q8/rbW+7sDxnxG0D5VB/CdtAMKjLY9RVRg5DcMfxb+5o
tDv2t+5w4uwRmr8XdyLGXeOW6dWxYlKHvToWrY4v1NUR6tJ3du xYtlSXgroi
Rp1RJxVyhxYhd9Lcu+PR7vAfuhNX7iC64Jv9J3ecLt0JcAdIT/K+drJRz+1p
11y1qrdTaofA45eTl0an9lNouzoitKU5tBL2Cw7ctAdk3oCg37 07hMRBLKMn
nf57Ck+RRVLAuZ8pXP02Cv6cgjgKGkdhTvM5poHhEp95JIMLn4 nB1W9jKF5k
YHEMiyATIkAQDyH+KQTB1xSPvwBufZ/P

ВНИМАНИЕ ЧТОБЫ ОТОБРАЗИЛОСЬ В ОКНЕ ПРЕД ПРОСМОТРА проделанная работа, просто измените разрешение проекта на любое другое, а потом верните обратно 640 на 480 как у меня. Не знаю с чем связана, эта досадная ошибка. (возможно проблема в браузере)


p.s. Этот урок обобщенный. И предполагает, что у интересующегося человека, есть смекалка и маленькие знания англ. языка. Там интуитивно понятный интерфейс. Просто стоит немного с ним поиграться и посмотреть результат у себя в проекте. Всем удачи и ждем первых интерфейсов от наших соотечественников.

зы2 Можно изучать как работает скрипт, добавляя, удаляя определенные виджеты. Использовать свои изображения, включая оснастку самого интерфейса как в рейнор худ. Добавлять шкалу здоровья, имя карты и так далее.

Вообще не работает, ничего не перетаскивается.

Ребят, ручки тренируйте. У меня все работает.

жмакаю, тяну на экран - ничего, тяну вниз - ничего

UPD: пашет только в эксплорере, ущербный сайт