CSS или изменяем вид button, textbox, text

другие уроки, мануалы, советы по Construct 2

Сообщение CSS или изменяем вид button, textbox, text
» 17 янв 2016, 02:00

Здарова, бандиты. :hii:
В этом уроке я расскажу и покажу как изменить вид кнопки, текст-бокса и шрифта.

Кнопка

Давайте изменим цвет текста и самой кнопки, ширину и высоту(очень удобная вещь, если изменил в кнопке текст, то не надо её подгонять под текст вручную) и так же уберем обводку вокруг и оставим снизу.

Создаем кнопку и сразу же переходим в eventsheet.

Делаем такое событие: Every tick > наша кнопка > Set CSS style
Изображение

У нас открывается такое окно:
Изображение
Property name - Имя свойства(дословный перевод). Сюда мы будем писать, что хотим "изменить" в объекте(в нашем случае кнопки), а в Value значение(код цвета, ссылку на картинку или шрифт и т.п)

Давайте изменим у кнопки цвет текста, фона, размер текста, уберем обводку и оставим ее внизу и сделаем "обивку".

Первым делом изменим цвет текста:
Изображение
Теперь текст кнопки у нас будет белым цветом. Думаю все знают, что такое код-цвета, если не знаете - загуглите, хотя думаю все понятно тут.
Изображение
А теперь мы изменили размер шрифта.

Вторым делом изменим цвет фона таким образом:
Изображение
Теперь фон у нас приятный, голубой цвет. Также можно сделать задний фон картинкой. Чтобы это сделать, надо вместо кода-цвета прописать url(ссылка на картинку). ВНИМАНИЕ! Если вы хотите сделать фон картинкой, то нужно такую картинку, которая подойдет под ширину и высоту кнопки. В этом случае лучше создать спрайт, а не кнопку.

Третьим делом уберем обводку и оставим только снизу:
Изображение
Объяснять как дышать не буду, вот вам шпаргалка http://htmlbook.ru/css/border

Четвертым делом сделаем величину полей(обивка в переводе):
Изображение
Тут тоже думаю говорить нечего, все понятно.

Итого:
Изображение

Текст-бокс

Тут я просто заменю фон картинкой и все. Все манипуляции предоставленные выше можно использовать и с этим объектом.
Изображение
Вот, как говорил ранее: url(ссылка на картинку)

Итог:
Изображение
Простите за такой фон, ничего на ноутбуке годного небыло. :smile:
Так же я изменил цвет, убрал обводку и подогнал высоту под картинку. Объяснить не могу, почему с 22px пришлось сжать до 16px.

Текст

Здесь просто изменю шрифт. Все манипуляции с текстом предоставленные выше можно использовать с этим объектом.

Тут вместо Set CSS style ищем Set web font:
Изображение
Шрифт взял с Google fonts, очень удобно, юзайте. Font Family - название шрифта, если берете шрифты с сайта, обязательно посмотрите, что написать в font family. ВНИМАНИЕ! Это работает для браузерных игр, если портнете на android скорее всего работать не будет или будет, но с подключенным интернетом.

Итог:
Изображение

Вот и все. Не кидайте тапками, урок расчитан на новичков. Можно делать много чего, юзайте эти шпаргалки: http://htmlbook.ru/css/ :good:
Последний раз редактировалось PlatiMne 18 янв 2016, 19:00, всего редактировалось 4 раз(а).
Психологический рейтинг DOTA 2:
https://play.google.com/store/apps/details?id=com.nikgord.dota2test
Аватара пользователя

Участник
Сообщений: 5
Я тут с 16 янв 2016
Откуда: Dmitrov
Двиг: Блокнот, С2
VK: id360012436
Репутация 3 [ ? ]

Сообщение CSS или изменяем вид bottom, textbox, text
» 17 янв 2016, 11:46

Если что-то непонятно или хотите "сделать так, но не знаете как", то с радостью вам отвечу :ok:
Психологический рейтинг DOTA 2:
https://play.google.com/store/apps/details?id=com.nikgord.dota2test
Аватара пользователя

Участник
Сообщений: 5
Я тут с 16 янв 2016
Откуда: Dmitrov
Двиг: Блокнот, С2
VK: id360012436
Репутация 3 [ ? ]

Сообщение CSS или изменяем вид bottom, textbox, text
» 17 янв 2016, 20:37

Не раз уже писалось про это.
Удивите, подцепите стили http://getbootstrap.com/ интереснее будет :hi: :hi:
Изображение
Аватара пользователя

Участник + TDS
Сообщений: 114
Я тут с 14 фев 2013
Лицензия: Personal
Репутация 6 [ ? ]

Сообщение CSS или изменяем вид bottom, textbox, text
» 18 янв 2016, 17:20

Ты там в заголовке случайно не перепутал bottom с button?
Разрабатываю мультиплеер для игр на заказ, обращайтесь в лс.
Аватара пользователя

Участник
Сообщений: 96
Я тут с 17 сен 2015
Двиг: C2
Лицензия: Personal
Репутация 30 [ ? ]

Сообщение CSS или изменяем вид bottom, textbox, text
» 18 янв 2016, 19:00

упс :shout:
Психологический рейтинг DOTA 2:
https://play.google.com/store/apps/details?id=com.nikgord.dota2test
Аватара пользователя

Участник
Сообщений: 5
Я тут с 16 янв 2016
Откуда: Dmitrov
Двиг: Блокнот, С2
VK: id360012436
Репутация 3 [ ? ]

Сообщение CSS или изменяем вид button, textbox, text
» 11 авг 2017, 21:36

Тему бы надо изменить. К сожалению использовать CSS с объектом Text нельзя. Пытаюсь сделать через TextBox, но теперь столкнулся с проблемой, что один и тот же размер шрифта, на разных расширениях смотрится то мелко, то крупно. С объектом Text таких проблем не было.
Аватара пользователя

Участник
Сообщений: 19
Я тут с 03 авг 2017
Репутация 0 [ ? ]

Сообщение CSS или изменяем вид button, textbox, text
» 11 авг 2017, 23:00

ZaToWarlock, Всё работает. Скинь исходник, может ошибка (а может подтвердишь свою правоту).
Аватара пользователя

Модератор
Сообщений: 2139
Я тут с 18 сен 2015
Откуда: Екатеринбург
Двиг: Construct 2
Лицензия: Personal
VK: id21590703
Репутация 289 [ ? ]

Сообщение CSS или изменяем вид button, textbox, text
» 11 авг 2017, 23:55

А при чём тут исходник? В настройках объекта Text нет CSS стилей.
Изображение
В TextBox'e да, есть. Но с ним другие проблемы возникают.
Аватара пользователя

Участник
Сообщений: 19
Я тут с 03 авг 2017
Репутация 0 [ ? ]

Сообщение CSS или изменяем вид button, textbox, text
» 12 авг 2017, 07:59

ZaToWarlock, у Text они разбиты на параметры в разделе Appearance (не спорю, их там мало).
Попробуй плагин от Рекса http://c2rexplugins.weebly.com/rex_tagtext.html
В нем больше параметров, чем в стандартном Text.
Аватара пользователя

Модератор
Сообщений: 2139
Я тут с 18 сен 2015
Откуда: Екатеринбург
Двиг: Construct 2
Лицензия: Personal
VK: id21590703
Репутация 289 [ ? ]

Сообщение CSS или изменяем вид button, textbox, text
» 12 авг 2017, 09:54

ReviveR200, Посмотрел плагин. Действительно даёт возможность поиграться с CSS. У меня другой плагин стоял от того же Рекса. У этого больше возможностей. Однако text-align: justify всё равно не работает(( И как я понял из обсуждения, плагин не работает при экспорте в CocoonJS. А в остальном да, крутая штука.
Аватара пользователя

Участник
Сообщений: 19
Я тут с 03 авг 2017
Репутация 0 [ ? ]



Вернуться в Другие уроки по Construct 2

Сейчас эту тему просматривают

Зарегистрированные пользователи: нет зарегистрированных пользователей

Наверх