Красивый SplashScreen (r209+)

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

Сообщение Красивый SplashScreen (r209+)
» 12 июл 2015, 01:10

Изображение

Всем привет. В данном уроке расскажу как поменять стандартный сплеш скрин (экран загрузки) , который появился в версии r209, на свой.

После экспорта он дописывается в c2runtime.js. Откуда он берет начальную информацию я пока не нашел.

 Для начала надо понимать из чего он состоит
Изображение


А состоит он из:
  • Одно квадратное лого с размерами (1024*1024, 512*512, 256/256, 128*128)
  • И две надписи с размерами (1024*256, 512*128, 256*64, 128*32)
  • Полоса загрузки цвет которой указан в RGB
  • Фон цвет которого так же в RGB

Все картинки закодированы в Base64. Я использовал онлайн кодировщик для кодирования своих картинок. Заранее делать не обязательно. Процесс кодирования моментальный.

Для редактирования c2runtime подойдет обычный блокнот, но я бы посоветовал Notepad++

Приступим.
Открываем наш экспортированный c2runtime.js и находим в нем вот эти строки
 
Забиваем в поиск c2 splashИзображение

Это и есть наши картинки. Начинаются они после ...base64, и заканчиваются перед =";
Заменяем их на свои картинки и идем дальше.

Ищем строки отвечающие за фон и полосу загрузки.
 
Забиваем в поиск renderToCtx.fillStyleИзображение


  • Строка renderToCtx.fillStyle = "#333333"; отвечает за цвет фона.
  • Строка renderToCtx.fillStyle = "#3C3C3C"; отвечает за цвет фона под полоской.
  • И строка renderToCtx.fillStyle = anyImageHadError ? "red" : "#E0FF65"; отвечает за цвет полосы загрузки.

Рекомендую воспользоваться Яндексом для подбора цвета.
И еще одна строчка drawH = Math.max(h * 0.005, 2);. Она отвечает за высоту полосы загрузки.

Вот и все. Этого достаточно чтобы полностью поменять SplashScreen.
Конечно при знании JS можно сделать и выбор рандомного цвета фона, полосы загрузки.
 К примеру
Код: Выделить всё
   var splashStartTime = -1;
   var splashFadeInDuration = 300;
   var splashFadeOutDuration = 300;
   var splashAfterFadeOutWait = (typeof cr_is_preview === "undefined" ? 200 : 0);
   var splashIsFadeIn = true;
   var splashIsFadeOut = false;
   var splashFadeInFinish = 0;
   var splashFadeOutStart = 0;
   var splashMinDisplayTime = (typeof cr_is_preview === "undefined" ? 3000 : 300);
   var renderViaCanvas = null;
   var renderViaCtx = null;
   var splashFrameNumber = 0;
   var chooseColor = [ '#d7df23', '#f68520', '#ed1c24', '#ee2a85', '#9e1f64', '#662d91', '#27aae1', '#27aae1', '#006838' ];
   var randomColor = Math.floor(Math.random() * ((chooseColor.length - 1) + 1));
   var currentColor = chooseColor[randomColor];

Последние три строчки дописаны мной и отвечают за выбор цвета из 9 вариантов. При старте игры в переменную currentColor записывается случайный из 9 вариантов. После эту переменную указываем в место где мы должны были указать цвет фона или полоски.
Так же если эти три строчки разместить рядом с теми строками где указывается цвет фона мы получим мигающую полоску (случайно получилось сначала :biggrin: )


Всем спасибо за внимание :cool:
Последний раз редактировалось DeX 18 авг 2015, 09:38, всего редактировалось 1 раз.
По всем вопросам писать в скайп DeXVinogradov
Аватара пользователя
DeX

Игродел
Сообщений: 2417
Я тут с 13 дек 2014
Откуда: Краснодар
Skype: DeXVinogradov
Репутация 478 [ ? ]

Сообщение Красивый SplashScreen (r209+)
» 12 июл 2015, 20:34

DeX писал(а):для редактирования c2runtime подойдет обычный блокнот

крайне не рекомендую использовать, может вызывать ошибки.
Аватара пользователя

Администратор
Сообщений: 2393
Я тут с 06 сен 2012
Откуда: Санкт-Петербург, Южно-Сахалинск
Skype: sirg1987
Репутация 261 [ ? ]

Сообщение Красивый SplashScreen (r209+)
» 11 окт 2015, 09:15

А можно и свой сделать) (кстати, всего один ивент wink:: )

prototip_c2_splash.capx
(181.15 КБ) Скачиваний: 128
beta_r214 +
Для того, чтобы создавать свои игры в Construct 2, нужны лишь базовые знания работы за компьютером и хорошее настроение :) maxim3003
Возможности Construct 2 в сфере 2D-игр безграничны, всё завесит от Вас. Не получается что-то сделать стандартным способом, делайте нестандартным :) maxim3003
Аватара пользователя

Участник
Сообщений: 366
Я тут с 09 июн 2015
Откуда: Россия
Двиг: Construct 2
Лицензия: Personal
Репутация 36 [ ? ]

Сообщение Красивый SplashScreen (r209+)
» 12 июл 2017, 18:10

Ошибки не появлялись после таких манипуляций?
Аватара пользователя

Участник
Сообщений: 46
Я тут с 09 дек 2014
Skype: booogz
Репутация 3 [ ? ]

Сообщение Красивый SplashScreen (r209+)
» 13 июл 2017, 00:55

booogz писал(а):Ошибки не появлялись после таких манипуляций?

Нет. отличная штука
Изображение
Аватара пользователя

Участник + TDS
Сообщений: 1048
Я тут с 31 авг 2015
Откуда: Нижний Новгород
Двиг: C2
Лицензия: Personal
Репутация 106 [ ? ]

Сообщение Красивый SplashScreen (r209+)
» 13 авг 2017, 17:38

Изначально встроенные картинки он берет из Construct 2\exporters\html5\preview.js
Когда меня достало каждый раз при пробных экспортах переделывать c2runtime, я правки внес прямо в preview
Можно указывать путь к файлам, можно сразу закодировать картинки в encode64 (например тут https://www.base64-image.de/ и вставить эти кракозябры в код, как это сделали авторы проги.
Если проектов несколько, сделать несколько копий этого файла, чтобы потом ручной работой не заниматься...
Аватара пользователя

Участник
Сообщений: 5
Я тут с 13 мар 2017
Репутация 0 [ ? ]



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

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

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

Наверх