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

[DeX]

Всем привет. В данном уроке расскажу как поменять стандартный сплеш скрин (экран загрузки) , который появился в версии 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 вариантов. После эту переменную указываем в место где мы должны были указать цвет фона или полоски.
Так же если эти три строчки разместить рядом с теми строками где указывается цвет фона мы получим мигающую полоску (случайно получилось сначала )

Всем спасибо за внимание

[Sir_G]

для редактирования c2runtime подойдет обычный блокнот

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

[helix]

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

prototip_c2_splash.capx

(181.15 КБ) Скачиваний: 198

beta_r214 +

[booogz]

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

[q3olegka]

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

Нет. отличная штука

[VedebellO]

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