Ò»¡¢ÏëÐ޸Ĵ«ÆæÊÀ½ç H5 UI ºÍµ¥»ú´«Ææ½çÃæ£¬Ê×ÏȵÃ×¼±¸ÄÄЩ¹¤¾ß£¿²»Í¬¹¤¾ß·Ö±ðÓÃÀ´×öʲô£¿
ÐÞ¸Ä UI µÄºËÐÄÊÇ “ÕÒ¶Ô¹¤¾ß¡¢ÓöԹ¤¾ß”£¬ÐÂÊÖ²»ÓÃ̰¶à£¬±¸Æë 3 Àà»ù´¡¹¤¾ß¾ÍÄÜÓ¦¶Ô´ó²¿·ÖÐÞ¸ÄÐèÇó£¬Ã¿À๤¾ßµÄ×÷ÓúÍÑ¡Ôñ¶¼Óн²¾¿£º
µÚÒ»ÀàÊÇͼƬ´¦Àí¹¤¾ß£¬ÓÃÀ´ÐÞ¸Ä UI ÀïµÄͼ±ê¡¢±³¾°¡¢°´Å¥µÈÊÓ¾õÔªËØ¡£ÍƼöÓà Photoshop£¨¼ò³Æ PS£©»òÃâ·ÑµÄ GIMP£¬Á½Õß¶¼ÄÜ´¦Àí.png ¸ñʽͼƬ£¨H5 ºÍµ¥»ú UI µÄÖ÷ҪͼƬ¸ñʽ£©¡£±ÈÈç¸ÄµÇ¼½çÃæ±³¾°£¬Óà PS ´ò¿ª±³¾°Í¼ºó£¬¿ÉÌæ»»³É×Ô¼ºÏ²»¶µÄ·ç¾°Í¼£¬»¹Äܵ÷ÕûÁÁ¶È¡¢Ìí¼ÓÎÄ×Ö£»ÒªÊǾõµÃ PS Ì«¸´ÔÓ£¬GIMP ÍêÈ«¹»Ó㬻ù´¡²Ã¼ô¡¢µ÷É«¹¦Äܶ¼ÓУ¬ÇÒÃâ·ÑÎÞ¹ã¸æ¡£×¢Òâ±£´æÊ±ÒªÑ¡ “PNG-24” ¸ñʽ£¬±ÜÃâÍ¼Æ¬Ê§Õæµ¼Ö UI ÏÔʾģºý¡£
µÚ¶þÀàÊÇH5 ǰ¶Ë±à¼¹¤¾ß£¬Õë¶Ô H5 UI µÄ²¼¾ÖºÍ½»»¥Ð޸ġ£±Ø×°µÄÊÇ VS Code£¨Visual Studio Code£©£¬°²×°ºóÒª¼Ó “HTML”“CSS”“JSON” ²å¼þ£¨ÔÚ²å¼þÊг¡Ëѹؼü´Ê¾ÍÄÜ×°£©¡£H5 µÄ UI ²¼¾Ö¿¿ CSS ¿ØÖÆ£¬±ÈÈçÏë°Ñ½ÇɫͷÏñ´Ó×óÉϽÇÒÆµ½ÓÒÉϽǣ¬Óà VS Code ´ò¿ª¶ÔÓ¦µÄ.css Îļþ£¬ÐÞ¸Ä “position”“left”“top” ²ÎÊý¾ÍÐУ»JSON ÎļþÔò¿ØÖÆ UI ÔªËØµÄÏÔʾ¹æÔò£¬±ÈÈç°´Å¥ÊÇ·ñÒþ²Ø¡¢µã»÷ºó´¥·¢Ê²Ã´¶¯×÷£¬ÕâЩ¶¼ÐèÒªÓà VS Code ±à¼¡£ÁíÍ⣬HBuilder X Ò²ÊDz»´íµÄÑ¡Ôñ£¬¶Ô H5 ¿ª·¢¸üÓѺã¬ÐÂÊÖÄÜ¿ìËÙÕÒµ½ UI Ïà¹ØÎļþ¡£
µÚÈýÀàÊǵ¥»ú UI ×ÊÔ´ÌáÈ¡Óë´ò°ü¹¤¾ß£¬ÒòΪµ¥»ú´«ÆæµÄ UI ×ÊÔ´³£´ò°üÔÚÌØ¶¨¸ñʽÎļþÀ±ÈÈç.pak¡¢.wzl£©£¬Ö±½ÓÕÒ²»µ½Í¼Æ¬¡£ÍƼö “´«Ææ UI ÌáÈ¡Æ÷”£¨ÍøÉÏËÑ “´«Ææµ¥»ú UI ÌáÈ¡¹¤¾ß” ÄÜÕÒµ½£©ºÍ “WZL ´ò°ü¹¤¾ß”¡£Ìáȡʱ£¬´ò¿ª¹¤¾ßºóÑ¡Ôñµ¥»ú¿Í»§¶ËµÄ “Data” Îļþ¼Ð£¬ÕÒµ½ “UI.wzl” »ò “Interface.pak” Îļþ£¬µã»÷ “ÌáÈ¡” ¾ÍÄܰÑÀïÃæµÄͼƬ¡¢ÅäÖÃÎļþµ¼³öµ½Ö¸¶¨Îļþ¼Ð£»ÐÞ¸ÄÍêͼƬºó£¬ÔÙÓôò°ü¹¤¾ß°ÑÎļþµ¼»ØÔ¸ñʽ£¬²»È»µ¥»ú¿Í»§¶Ëʶ±ð²»ÁË¡£
»¹Óиö¸¨Öú¹¤¾ßÊÇ “ä¯ÀÀÆ÷¿ª·¢Õß¹¤¾ß”£¨±ÈÈç Chrome µÄ F12 ¼ü£©£¬¸Ä H5 UI ʱ³¬ÊµÓà —— ´ò¿ª H5 ÓÎÏ·ºó°´ F12£¬Êó±êµã “ÔªËØ” ±êÇ©£¬ÔÙÓÃ×óÉÏ½Ç “Ñ¡ÔñÔªËØ” °´Å¥µãÒª¸ÄµÄ UI£¨±ÈÈç±³°ü°´Å¥£©£¬ÓÒ²à»áÖ±½ÓÏÔʾ¿ØÖÆÕâ¸ö UI µÄ CSS ´úÂ룬ʵʱÐ޸IJÎÊýÄÜ¿´µ½Ð§¹û£¬È·¶¨ºóÔÙ¸´ÖƵ½±¾µØÎļþÀ±ÜÃâ·´¸´ÊÔ´í¡£
¶þ¡¢´«ÆæÊÀ½ç H5 UI µÄºËÐÄÎļþÔÚÄĸö·¾¶£¿±ÈÈçÏë¸ÄµÇ¼½çÃæ¡¢½ÇÉ«Ãæ°å£¬¸ÃÕÒÄÄЩÎļþ£¿
H5 UI µÄÎļþ·¾¶ºÜ¹Ì¶¨£¬Ö»ÒªÕÒµ½ H5 ·þÎñ¶ËµÄ “ǰ¶Ë×ÊÔ´Îļþ¼Ð”£¬¾ÍÄܶ¨Î»µ½ËùÓÐ UI Ïà¹ØÎļþ£¬²»Í¬½çÃæ¶ÔÓ¦²»Í¬µÄ×ÓÎļþ¼Ð£¬ÐÂÊÖ°´Â·¾¶ÕÒ¾ÍÐУ¬²»ÓÃϹ·£º
Ê×ÏÈÈ·¶¨ H5 ǰ¶Ë×ÊÔ´µÄ¸ù·¾¶£¬Í¨³£ÔÚ H5 ·þÎñ¶ËµÄ “res” »ò “static” Îļþ¼ÐÀ±ÈÈçÍêÕû·¾¶ÊÇ “D:\ ´«ÊÀ H5 ·þÎñ¶Ë \web\res”£¨²»Í¬·þÎñ¶Ë¿ÉÄÜÂÔÓвîÒ죬µ«ºËÐÄÊÇ “res” Îļþ¼Ð£©¡£Õâ¸öÎļþ¼ÐÀïÓÐ 3 ¸ö¹Ø¼ü×ÓÎļþ¼Ð£¬·Ö±ð¶ÔÓ¦²»Í¬ UI ×ÊÔ´£º
µÚÒ»¸öÊÇ “ui” Îļþ¼Ð£¬×¨ÃŷŵǼ½çÃæ¡¢Ö÷½çÃæ¡¢±³°ü¡¢½ÇÉ«Ãæ°åµÈºËÐĽçÃæµÄÎļþ£¬ÊÇÐÞ¸Ä×î¶àµÄµØ·½¡£±ÈÈçÏë¸ÄµÇ¼½çÃæ£º
ÏȽøÈë “ui/login” ×ÓÎļþ¼Ð£¬ÀïÃæµÄ “bg.png” ¾ÍÊǵǼ±³¾°Í¼£¬Ö±½ÓÓÃÐ޸ĺõÄÍ¼Æ¬Ìæ»»Í¬ÃûÎļþ£¬×¢Òâ³ß´çÒªºÍÔÎļþÒ»Ö£¨±ÈÈçÔÎļþÊÇ 1920×1080 ÏñËØ£¬ÐÂͼҲҪ±£³ÖÕâ¸ö³ß´ç£¬²»È»»áÀÉì±äÐΣ©£»
µÇ¼°´Å¥µÄͼƬÔÚ “ui/login/btn” À“login_btn.png” ÊÇÕý³£×´Ì¬£¬“login_btn_hover.png” ÊÇÊó±ê·ÅÉÏÈ¥µÄ״̬£¬Á½¸ö¶¼Òª¸ÄµÄ»°µÃ·Ö±ðÌæ»»£»
ÒªÊÇÏëµ÷ÕûµÇ¼°´Å¥µÄλÖ㬾ÍÕÒ “ui/login/login.json” Îļþ£¬Óà VS Code ´ò¿ª£¬ÕÒµ½ “btn_login” ¶ÔÓ¦µÄ “x”“y” ²ÎÊý£¨x ÊÇË®Æ½×ø±ê£¬y ÊÇ´¹Ö±×ø±ê£©£¬±ÈÈçÔ “x:800” ¸Ä³É “x:900”£¬°´Å¥¾Í»áÓÒÒÆ¡£
µÚ¶þ¸öÊÇ “icon” Îļþ¼Ð£¬·Å¼¼ÄÜͼ±ê¡¢ÎïÆ·Í¼±ê¡¢¹ÖÎïÍ·ÏñµÈСͼ±ê¡£±ÈÈç¸ÄսʿµÄ “Áһ𽣷¨” ͼ±ê£¬½øÈë “icon/skill” ×ÓÎļþ¼Ð£¬ÕÒµ½ “liehuo.png”£¨²»Í¬ H5 ¿ÉÄÜÃüÃû²»Í¬£¬¿É°´Í¼±êÔ¤ÀÀÕÒ£©£¬Ìæ»»³É×Ô¼ºÉè¼ÆµÄͼ±ê£¬³ß´çͨ³£ÊÇ 64×64 ÏñËØ£¬Ì«´ó»ò̫С»áµ¼ÖÂÔÚ¼¼ÄÜÀ¸ÀïÏÔʾÒì³£¡£
µÚÈý¸öÊÇ “font” Îļþ¼Ð£¬¿ØÖÆ UI ÀïµÄÎÄ×ÖÑùʽ£¬±ÈÈçµÇ¼½çÃæµÄ “´«ÊÀ H5” ±êÌâ×ÖÌå¡¢½ÇÉ«µÈ¼¶µÄ×ÖÌå¡£ÀïÃæµÄ “font.css” ÎļþÄܸÄ×ÖÌåÀàÐͺʹóС£¬±ÈÈçÔ´úÂë “font-family: "SimSun";”£¨ËÎÌ壩¸Ä³É “font-family: "Microsoft YaHei";”£¨Î¢ÈíÑźڣ©£¬±êÌâ¾Í»á±ä×ÖÌ壻ÏëÈõȼ¶Êý×Ö¸ü´ó£¬°Ñ “font-size: 16px;” ¸Ä³É “font-size: 18px;” ¾ÍÐС£
ÐèҪעÒ⣬ÓÐЩ H5 ·þÎñ¶Ë»á°Ñ UI Îļþ¼ÓÃÜ£¨ºó׺ÊÇ “.dat”£©£¬ÕâÖÖÇé¿öµÃÏÈÕÒ “½âÃܹ¤¾ß”£¨±ÈÈç “H5 ×ÊÔ´½âÃÜÆ÷”£©°ÑÎļþ½âÃܳÉ.png ºÍ.json£¬Ð޸ĺóÔÙ¼ÓÃÜ»ØÈ¥£¬²»È»Ìæ»»ºó H5 ¿Í»§¶Ë»á±¨´í¡£½âÃܹ¤¾ßÒ»°ãÔÚ H5 ·þÎñ¶ËµÄ “tools” Îļþ¼ÐÀûÓеϰ¿ÉÒÔÈ¥´«ÊÀ H5 ¼ÜÉèÉçÇøÕÒ¡£
Èý¡¢µ¥»ú´«ÆæµÄ UI ×ÊÔ´²ØÔÚ¿Í»§¶ËÄĸöµØ·½£¿Ôõô°ÑÕâЩ×ÊÔ´ÌáÈ¡³öÀ´Ð޸ģ¿
µ¥»ú´«ÆæµÄ UI ×ÊÔ´²»Ïñ H5 ÄÇÑùÊǵ¥¶ÀµÄͼƬÎļþ£¬´ó¶à´ò°üÔÚ “.wzl” »ò “.pak” ¸ñʽµÄѹËõÎļþÀ±ØÐëÏÈÌáÈ¡²ÅÄÜÐ޸쬲½Öè²»¸´ÔÓ£¬¸ú×Å×ö¾ÍÄܳɹ¦£º
µÚÒ»²½£ºÕÒµ½µ¥»ú¿Í»§¶ËµÄ “×ÊÔ´´ò°üÎļþ”¡£´ò¿ªµ¥»ú´«Ææ¿Í»§¶ËµÄ¸ùĿ¼£¨±ÈÈç “D:\ ´«ÆæÊÀ½çµ¥»ú°æ”£©£¬½øÈë “Data” Îļþ¼Ð£¬ÕâÀïÃæÓм¸¸ö¹Ø¼üµÄ´ò°üÎļþ£º
“UI.wzl”£º·ÅÖ÷½çÃæ¡¢±³°ü¡¢¼¼ÄÜÀ¸µÈ»ù´¡ UI ×ÊÔ´£»
“Interface.pak”£º²¿·Öµ¥»ú°æ±¾ÓÃÕâ¸öÎļþ£¬ÄÚÈÝºÍ UI.wzl ÀàËÆ£¬Ö»ÊǸñʽ²»Í¬£»
“Item.wzl”£º·ÅÎïÆ·Í¼±ê£¬±ÈÈçÒ©Ë®¡¢×°±¸µÄͼ±ê£»
“Skill.wzl”£º·Å¼¼ÄÜͼ±ê£¬±ÈÈ編ʦµÄ “±ùÅØÏø”¡¢µÀÊ¿µÄ “ÖÎÓúÊõ” ͼ±ê¡£
µÚ¶þ²½£ºÓà “´«Ææ UI ÌáÈ¡Æ÷” ÌáÈ¡×ÊÔ´¡£´ò¿ªÌáÈ¡¹¤¾ß£¨ÒÔ “WZL ÌáÈ¡Æ÷” ΪÀý£©£¬µã»÷ “Ñ¡ÔñÎļþ” °´Å¥£¬ÕÒµ½ “Data” Îļþ¼ÐÀïµÄ “UI.wzl”£¬ÔÙµã»÷ “Ñ¡ÔñÊä³öĿ¼”£¨±ÈÈçн¨Ò»¸ö “UI Ð޸Ĕ Îļþ¼Ð£¬Â·¾¶ÉèΪ “D:\ ´«ÆæÊÀ½çµ¥»ú°æ \UI Ð޸Ĕ£©£¬×îºóµã»÷ “¿ªÊ¼ÌáÈ¡”¡£µÈ´ý 1-2 ·ÖÖÓ£¬¹¤¾ß»á°Ñ UI.wzl ÀïµÄËùÓÐ×ÊÔ´£¨°üÀ¨.png ͼƬºÍ.cfg ÅäÖÃÎļþ£©µ¼³öµ½ “UI Ð޸Ĕ Îļþ¼ÐÀ´ò¿ª¾ÍÄÜ¿´µ½µÇ¼½çÃæ¡¢½ÇÉ«Ãæ°åµÈ¶ÔÓ¦µÄͼƬ¡£
µÚÈý²½£ºÊ¶±ðÒªÐ޸ĵÄ×ÊÔ´Îļþ¡£ÌáÈ¡ºóµÄͼƬ»á°´½çÃæ·ÖÀàÃüÃû£¬±ÈÈç “login_bg.png” ÊǵǼ±³¾°£¬“bag_panel.png” ÊDZ³°üÃæ°å±³¾°£¬“skill_btn.png” ÊǼ¼Äܰ´Å¥¡£ÒªÊÇ·Ö²»ÇåÄĸöÊÇÄĸö£¬¿ÉÒÔ°´ “Ô¤ÀÀͼ” ÕÒ —— ÔÚÌáÈ¡¹¤¾ßÀï¹´Ñ¡ “ÏÔʾԤÀÀ”£¬¾ÍÄÜ¿´µ½Ã¿¸öͼƬ¶ÔÓ¦µÄ UI Ч¹û£¬È·¶¨ºóÔÙ¸´ÖƵ½ PS ÀïÐ޸ġ£
µÚËIJ½£ºÐ޸ĺóÖØÐ´ò°ü»ØÔ¸ñʽ¡£¸ÄÍêͼƬºó£¨±ÈÈç°Ñ “login_bg.png” »»³Éб³¾°£©£¬´ò¿ª “WZL ´ò°ü¹¤¾ß”£¬µã»÷ “Ìí¼ÓÎļþ”£¬°Ñ “UI Ð޸Ĕ Îļþ¼ÐÀïËùÓÐÎļþÑ¡ÖУ¨°üÀ¨Ð޸ĺóµÄͼƬºÍÔ.cfg Îļþ£©£¬“Êä³öÎļþ·¾¶” ÉèΪ “D:\ ´«ÆæÊÀ½çµ¥»ú°æ \Data\UI.wzl”£¨¸²¸ÇÔÎļþ£¬½¨ÒéÏȰÑÔ UI.wzl ±¸·Ýµ½×ÀÃæ£¬·ÀÖ¹¸Ä»µ£©£¬È»ºóµã»÷ “¿ªÊ¼´ò°ü”¡£´ò°üÍê³Éºó£¬Æô¶¯µ¥»ú´«Ææ£¬¾ÍÄÜ¿´µ½Ð޸ĺóµÄ UI Ч¹ûÁË¡£
ÒªÊÇÄãµÄµ¥»ú°æ±¾ÓõÄÊÇ “.pak” ¸ñʽÎļþ£¨±ÈÈç Interface.pak£©£¬²½ÖèÀàËÆ£¬Ö»ÊÇÒª»» “PAK ÌáÈ¡ / ´ò°ü¹¤¾ß”£¬²Ù×÷Âß¼ºÍ WZL ¹¤¾ßÒ»Ñù£¬ÏÈÌáÈ¡¡¢ÔÙÐ޸ġ¢×îºó´ò°ü£¬¹¤¾ßÔÚ´«Ææµ¥»ú×ÊÔ´Õ¾Àï¶¼ÄÜÕÒµ½Ãâ·Ñ°æ¡£
ËÄ¡¢ÐÞ¸Ä UI ʱ×îÈÝÒ×Óöµ½ “¸ÄÍê²»ÉúЧ”“ÏÔʾ´í딣¬ÕâЩÎÊÌâÔõô½â¾ö£¿
ÐÂÊÖ¸Ä UI ³£²ÈÕâÁ½¸ö¿Ó£¬¿´ËƸ´ÔÓÆäʵ¶¼ÊÇϸ½ÚûעÒ⣬Õë¶ÔÐÔ½â¾ö¾ÍÐУ¬²»Ó÷´¸´ÖØÐ°²×°¿Í»§¶Ë£º
ÏȽâ¾ö “¸ÄÍê²»ÉúЧ” µÄÎÊÌ⣬³£¼ûÔÒòÓÐ 3 ¸ö£º
Îļþ·¾¶´í»òÎļþÃû²»¶Ô£º±ÈÈç H5 ¸ÄµÇ¼±³¾°£¬°ÑÐÂͼ·Åµ½ “ui/main” Îļþ¼Ð£¨Ö÷½çÃæÎļþ¼Ð£©£¬¶ø²»ÊÇ “ui/login”£¬×ÔÈ»²»ÉúЧ£»»òÕßµ¥»ú¸Ä¼¼ÄÜͼ±êʱ£¬°Ñ “liehuo.png” ¸Ä³É “liehuo1.png”£¬¿Í»§¶Ë»¹ÊÇÕÒÔÎļþÃû£¬ËùÒÔû±ä»¯¡£½â¾ö·½·¨£ººË¶ÔÎļþ·¾¶ÊÇ·ñºÍÔÎļþÒ»Ö£¬ÎļþÃû£¨°üÀ¨ºó׺£©ÍêÈ«Ïàͬ£¬±ÈÈçÔÎļþÊÇ “login_bg.png”£¬ÐÂÎļþÒ²±ØÐëÊÇÕâ¸öÃû×Ö£¬²»Äܶà¿Õ¸ñ»ò¸Ä×Öĸ´óСд£¨ÓÐЩ¿Í»§¶ËÇø·Ö´óСд£¬“Login_Bg.png” ºÍ “login_bg.png” ËãÁ½¸öÎļþ£©¡£
H5 »º´æÃ»Ç壺H5 ÓÎÏ·»á»º´æÖ®Ç°µÄ UI ×ÊÔ´£¬¸ÄÍêÎļþºóÖ±½ÓË¢ÐÂÒ³Ãæ£¬ä¯ÀÀÆ÷»¹ÊÇÓûº´æµÄ¾Éͼ¡£½â¾ö·½·¨£º´ò¿ª H5 ÓÎÏ·Ò³Ãæ£¬°´ “Ctrl+Shift+Del” µ÷³öä¯ÀÀÆ÷ÇåÀí½çÃæ£¬¹´Ñ¡ “»º´æµÄͼƬºÍÎļþ”£¬µã»÷ “Çå³ýÊý¾Ý”£¬È»ºó¹Ø±Õä¯ÀÀÆ÷ÖØÐ´ò¿ª£¬ÔÙ½øÓÎÏ·¾ÍÄÜ¿´µ½Ð UI£»ÒªÊÇÓõÄÊÇ H5 ±¾µØ·þÎñ¶Ë£¬»¹ÒªÖØÆô·þÎñ¶Ë£¨Ë«»÷ “Æô¶¯ H5.bat”£©£¬È·±£·þÎñ¶Ë¼ÓÔØÐÂÎļþ¡£
µ¥»ú´ò°üû¸²¸ÇÔÎļþ£ºÐ޸ĺó´ò°üʱ£¬Êä³ö·¾¶Éè³ÉÁËн¨Îļþ¼Ð£¬Ã»¸²¸Ç “Data” ÀïµÄÔ WZL/PAK Îļþ£¬¿Í»§¶Ë»¹ÊǶÁ¾ÉÎļþ¡£½â¾ö·½·¨£º´ò°üʱȷÈÏ “Êä³öÎļþ·¾¶” Êǿͻ§¶Ë “Data” Îļþ¼ÐÀïµÄÔÎļþ£¬±ÈÈç “D:\ ´«ÆæÊÀ½çµ¥»ú°æ \Data\UI.wzl”£¬´ò°üʱ¹¤¾ß»áÌáʾ “ÎļþÒÑ´æÔÚ£¬ÊÇ·ñ¸²¸Ç”£¬Ñ¡ “ÊÇ” ¾ÍÐС£
ÔÙ½â¾ö “ÏÔʾ´íλ” µÄÎÊÌ⣬Ö÷ÒªÔÒòÊÇ “ͼƬ³ß´çºÍÅäÖòÎÊý²»Æ¥Å䔣º
H5 UI ´íλ£º±ÈÈç¸ÄÁ˵Ǽ°´Å¥µÄͼƬ£¬ÔͼƬÊÇ 150×50 ÏñËØ£¬ÐÂͼ¸Ä³É 200×50 ÏñËØ£¬µ«Ã»¸Ä.json ÀïµÄ “width” ²ÎÊý£¨»¹ÊÇ 150£©£¬°´Å¥¾Í»áÖ»ÏÔʾһ°ë£¬»ò¼·Ñ¹ÆäËûÔªËØ¡£½â¾ö·½·¨£ºÓà VS Code ´ò¿ª¶ÔÓ¦µÄ.json Îļþ£¬ÕÒµ½¸Ã UI ÔªËØµÄ “width”“height” ²ÎÊý£¬¸Ä³ÉºÍÐÂͼƬһÖµijߴ磬±ÈÈçÐÂͼ 200×50£¬¾Í°Ñ “width:150” ¸Ä³É “width:200”£¬“height:50” ±£³Ö²»±ä£¬±£´æºóÇ建´æÔÙÔ¤ÀÀ¡£
µ¥»ú UI ´íλ£º±ÈÈç¸Ä±³°üÃæ°å±³¾°£¬ÔͼƬÊÇ 800×600 ÏñËØ£¬ÐÂͼ¸Ä³É 850×600 ÏñËØ£¬´ò°üºó±³°üÀïµÄÎïÆ·¸ñ×Ó»áÆ«ÒÆ¡£½â¾ö·½·¨£ºÕÒµ½ÌáÈ¡³öÀ´µÄ “bag.cfg” ÅäÖÃÎļþ£¨±³°üµÄ²¼¾ÖÅäÖã©£¬ÓüÇʱ¾´ò¿ª£¬ÕÒµ½ “panel_width”“panel_height” ²ÎÊý£¬¸Ä³ÉÐÂͼƬµÄ³ß´ç£¨850×600£©£¬È»ºóÔÙ´ò°ü»Ø WZL Îļþ£¬ÕâÑù¸ñ×Ӿͻá¸ú×ÅÃæ°å³ß´çµ÷ÕûλÖá£
ÒªÊÇ´íλÑÏÖØ£¬±ÈÈç H5 Ö÷½çÃæµÄͼ±êÈ«ÂÒÁË£¬¿ÉÄÜÊDz»Ð¡ÐÄɾÁË.json ÀïµÄ´úÂ룬Õâʱ±ð»Å£¬°Ñ֮ǰ±¸·ÝµÄÔÎļþ¸´ÖÆ»ØÀ´£¬ÖØÐÂÐ޸쬱ÜÃâÔ½¸ÄÔ½ÂÒ¡£
Îå¡¢Ïë×Ô¶¨Òåµ¥»ú´«ÆæµÄ “¼¼ÄÜÀäÈ´¶¯»”“±³°üÎïÆ·±ß¿ò”£¬ÕâЩϸ½ÚÔõô¸Ä£¿
ÕâЩϸ½ÚÐ޸ıȻù´¡ UI ÉÔ¸´ÔÓ£¬µ«Ö»ÒªÕÒµ½¶ÔÓ¦µÄ×ÊÔ´ºÍÅäÖÃÎļþ£¬Ò²ÄÜʵÏÖ£¬ÐÂÊÖ¿ÉÒÔ´Ó¼òµ¥µÄ “ÎïÆ·±ß¿ò” ¿ªÊ¼Á·ÊÖ£º
ÏÈ¸Ä “±³°üÎïÆ·±ß¿ò”£¬²½ÖèºÜ¼òµ¥£º
ÌáÈ¡µ¥»ú¿Í»§¶Ë “Data” ÀïµÄ “Item.wzl” Îļþ£¬ÕÒµ½ “border.png”£¨ÎïÆ·±ß¿òͼƬ£¬ÒªÊÇûÓоÍÕÒ “item_border.png”£¬²»Í¬°æ±¾ÃüÃûÂÔÓвîÒ죩£»
Óà PS ´ò¿ª “border.png”£¬Ô±ß¿ò¿ÉÄÜÊÇ»ÒÉ«£¬Ïë¸Ä³É½ðÉ«£¬¾ÍÓà “»±Ê¹¤¾ß” °Ñ±ß¿òÑÕÉ«»»³É½ðÉ«£¬»òÖ±½ÓÌæ»»³É×Ô¼ºÕҵĽðÉ«±ß¿òͼƬ£¬×¢Òâ³ß´çÒªºÍÔÎļþÒ»Ö£¨±ÈÈçԱ߿òÊÇ 32×32 ÏñËØ£¬ÐÂͼҲҪһÑù£¬²»È»ÎïÆ·ÏÔʾʱ±ß¿ò»áÍᣩ£»
°ÑÐ޸ĺóµÄ “border.png” ·Å»ØÌáÈ¡Îļþ¼Ð£¬ÖØÐ´ò°ü³É “Item.wzl”£¬¸²¸ÇÔÎļþ£¬Æô¶¯ÓÎÏ·ºó´ò¿ª±³°ü£¬ÎïÆ·±ß¿ò¾Í±ä³É½ðÉ«ÁË¡£
ÔÙ¸Ä “¼¼ÄÜÀäÈ´¶¯»”£¬Õâ¸öÐèÒª¸ÄͼƬºÍÅäÖÃÎļþ£¬²½ÖèÈçÏ£º
ÌáÈ¡ “Skill.wzl” Îļþ£¬ÕÒµ½ “cooling.png”£¨ÀäÈ´¶¯»µÄ»ù´¡Í¼Æ¬£¬Í¨³£Êǰë͸Ã÷µÄ»ÒÉ«ÕÚÕÖ£©ºÍ “cooling.cfg”£¨ÀäÈ´¶¯»µÄÅäÖÃÎļþ£©£»
¸Ä¶¯»Í¼Æ¬£ºÓà PS ¸ø “cooling.png” ¼Ó¶¯Ì¬Ð§¹û£¬±ÈÈçÌí¼Ó½ø¶ÈÌõÑùʽ£¨´ÓÓÒµ½×ó½¥±ä͸Ã÷£©£¬±£´æÎª “cooling_1.png”“cooling_2.png”…“cooling_10.png”£¨10 ÕÅͼƬ×é³É¶¯»Ö¡£©£»
¸ÄÅäÖÃÎļþ£ºÓüÇʱ¾´ò¿ª “cooling.cfg”£¬Ô´úÂë¿ÉÄÜÊÇ “frame:1”£¨1 Ö¡¾²Ì¬Í¼£©£¬¸Ä³É “frame:10”£¨10 Ö¡¶¯»£©£¬ÔÙÌí¼Óÿ֡µÄÏÔʾʱ¼ä “time:100”£¨Ã¿Ö¡ÏÔʾ 100 ºÁÃ룬1 Ãë 10 Ö¡£¬¶¯»¸üÁ÷³©£©£¬±£´æÎļþ£»
°ÑËùÓÐÀäÈ´¶¯»Í¼Æ¬ºÍÐ޸ĺóµÄ “cooling.cfg” ·Å»ØÌáÈ¡Îļþ¼Ð£¬´ò°ü³É “Skill.wzl” ¸²¸ÇÔÎļþ£¬Æô¶¯ÓÎÏ·ºó·Å¼¼ÄÜ£¬¾ÍÄÜ¿´µ½ÐµÄÀäÈ´¶¯»ÁË¡£
ÐèҪעÒ⣬ÓÐЩµ¥»ú°æ±¾µÄ¼¼ÄÜÀäÈ´¶¯»ÊÇÓà “½Å±¾¿ØÖÆ” µÄ£¬±ÈÈçÔÚ “Envir/Script” Îļþ¼ÐÀïµÄ “SkillScript.txt” Îļþ£¬ÀïÃæÓÐÀäÈ´¶¯»µÄ´¥·¢´úÂ룬ҪÊǸÄÁËͼƬûЧ¹û£¬¾Í´ò¿ªÕâ¸ö½Å±¾£¬È·È϶¯»Í¼Æ¬µÄ·¾¶ºÍÎļþÃûÊÇ·ñÕýÈ·£¬±ÈÈç “CoolingPic = D:\ ´«ÆæÊÀ½çµ¥»ú°æ \Data\Skill.wzl\cooling”£¬È·±£ºÍÄãÐ޸ĵÄÎļþÒ»Ö¡£
ÕâЩϸ½ÚÐÞ¸ÄÄÜÈõ¥»ú´«ÆæµÄ UI ¸üÓÐÌØÉ«£¬ÐÂÊÖ²»ÓÃ×·ÇóÒ»²½µ½Î»£¬Ïȸı߿ò¡¢±³¾°£¬ÊìÁ·ºóÔÙ³¢ÊÔ¶¯»¡¢ÎÄ×ÖÑùʽ£¬ÂýÂý»ýÀÛ¾Ñé¡£
ÐÞ¸Ä UI µÄºËÐÄÊÇ “ÕÒ¶Ô¹¤¾ß¡¢ÓöԹ¤¾ß”£¬ÐÂÊÖ²»ÓÃ̰¶à£¬±¸Æë 3 Àà»ù´¡¹¤¾ß¾ÍÄÜÓ¦¶Ô´ó²¿·ÖÐÞ¸ÄÐèÇó£¬Ã¿À๤¾ßµÄ×÷ÓúÍÑ¡Ôñ¶¼Óн²¾¿£º
µÚÒ»ÀàÊÇͼƬ´¦Àí¹¤¾ß£¬ÓÃÀ´ÐÞ¸Ä UI ÀïµÄͼ±ê¡¢±³¾°¡¢°´Å¥µÈÊÓ¾õÔªËØ¡£ÍƼöÓà Photoshop£¨¼ò³Æ PS£©»òÃâ·ÑµÄ GIMP£¬Á½Õß¶¼ÄÜ´¦Àí.png ¸ñʽͼƬ£¨H5 ºÍµ¥»ú UI µÄÖ÷ҪͼƬ¸ñʽ£©¡£±ÈÈç¸ÄµÇ¼½çÃæ±³¾°£¬Óà PS ´ò¿ª±³¾°Í¼ºó£¬¿ÉÌæ»»³É×Ô¼ºÏ²»¶µÄ·ç¾°Í¼£¬»¹Äܵ÷ÕûÁÁ¶È¡¢Ìí¼ÓÎÄ×Ö£»ÒªÊǾõµÃ PS Ì«¸´ÔÓ£¬GIMP ÍêÈ«¹»Ó㬻ù´¡²Ã¼ô¡¢µ÷É«¹¦Äܶ¼ÓУ¬ÇÒÃâ·ÑÎÞ¹ã¸æ¡£×¢Òâ±£´æÊ±ÒªÑ¡ “PNG-24” ¸ñʽ£¬±ÜÃâÍ¼Æ¬Ê§Õæµ¼Ö UI ÏÔʾģºý¡£
µÚ¶þÀàÊÇH5 ǰ¶Ë±à¼¹¤¾ß£¬Õë¶Ô H5 UI µÄ²¼¾ÖºÍ½»»¥Ð޸ġ£±Ø×°µÄÊÇ VS Code£¨Visual Studio Code£©£¬°²×°ºóÒª¼Ó “HTML”“CSS”“JSON” ²å¼þ£¨ÔÚ²å¼þÊг¡Ëѹؼü´Ê¾ÍÄÜ×°£©¡£H5 µÄ UI ²¼¾Ö¿¿ CSS ¿ØÖÆ£¬±ÈÈçÏë°Ñ½ÇɫͷÏñ´Ó×óÉϽÇÒÆµ½ÓÒÉϽǣ¬Óà VS Code ´ò¿ª¶ÔÓ¦µÄ.css Îļþ£¬ÐÞ¸Ä “position”“left”“top” ²ÎÊý¾ÍÐУ»JSON ÎļþÔò¿ØÖÆ UI ÔªËØµÄÏÔʾ¹æÔò£¬±ÈÈç°´Å¥ÊÇ·ñÒþ²Ø¡¢µã»÷ºó´¥·¢Ê²Ã´¶¯×÷£¬ÕâЩ¶¼ÐèÒªÓà VS Code ±à¼¡£ÁíÍ⣬HBuilder X Ò²ÊDz»´íµÄÑ¡Ôñ£¬¶Ô H5 ¿ª·¢¸üÓѺã¬ÐÂÊÖÄÜ¿ìËÙÕÒµ½ UI Ïà¹ØÎļþ¡£
µÚÈýÀàÊǵ¥»ú UI ×ÊÔ´ÌáÈ¡Óë´ò°ü¹¤¾ß£¬ÒòΪµ¥»ú´«ÆæµÄ UI ×ÊÔ´³£´ò°üÔÚÌØ¶¨¸ñʽÎļþÀ±ÈÈç.pak¡¢.wzl£©£¬Ö±½ÓÕÒ²»µ½Í¼Æ¬¡£ÍƼö “´«Ææ UI ÌáÈ¡Æ÷”£¨ÍøÉÏËÑ “´«Ææµ¥»ú UI ÌáÈ¡¹¤¾ß” ÄÜÕÒµ½£©ºÍ “WZL ´ò°ü¹¤¾ß”¡£Ìáȡʱ£¬´ò¿ª¹¤¾ßºóÑ¡Ôñµ¥»ú¿Í»§¶ËµÄ “Data” Îļþ¼Ð£¬ÕÒµ½ “UI.wzl” »ò “Interface.pak” Îļþ£¬µã»÷ “ÌáÈ¡” ¾ÍÄܰÑÀïÃæµÄͼƬ¡¢ÅäÖÃÎļþµ¼³öµ½Ö¸¶¨Îļþ¼Ð£»ÐÞ¸ÄÍêͼƬºó£¬ÔÙÓôò°ü¹¤¾ß°ÑÎļþµ¼»ØÔ¸ñʽ£¬²»È»µ¥»ú¿Í»§¶Ëʶ±ð²»ÁË¡£
»¹Óиö¸¨Öú¹¤¾ßÊÇ “ä¯ÀÀÆ÷¿ª·¢Õß¹¤¾ß”£¨±ÈÈç Chrome µÄ F12 ¼ü£©£¬¸Ä H5 UI ʱ³¬ÊµÓà —— ´ò¿ª H5 ÓÎÏ·ºó°´ F12£¬Êó±êµã “ÔªËØ” ±êÇ©£¬ÔÙÓÃ×óÉÏ½Ç “Ñ¡ÔñÔªËØ” °´Å¥µãÒª¸ÄµÄ UI£¨±ÈÈç±³°ü°´Å¥£©£¬ÓÒ²à»áÖ±½ÓÏÔʾ¿ØÖÆÕâ¸ö UI µÄ CSS ´úÂ룬ʵʱÐ޸IJÎÊýÄÜ¿´µ½Ð§¹û£¬È·¶¨ºóÔÙ¸´ÖƵ½±¾µØÎļþÀ±ÜÃâ·´¸´ÊÔ´í¡£
¶þ¡¢´«ÆæÊÀ½ç H5 UI µÄºËÐÄÎļþÔÚÄĸö·¾¶£¿±ÈÈçÏë¸ÄµÇ¼½çÃæ¡¢½ÇÉ«Ãæ°å£¬¸ÃÕÒÄÄЩÎļþ£¿
H5 UI µÄÎļþ·¾¶ºÜ¹Ì¶¨£¬Ö»ÒªÕÒµ½ H5 ·þÎñ¶ËµÄ “ǰ¶Ë×ÊÔ´Îļþ¼Ð”£¬¾ÍÄܶ¨Î»µ½ËùÓÐ UI Ïà¹ØÎļþ£¬²»Í¬½çÃæ¶ÔÓ¦²»Í¬µÄ×ÓÎļþ¼Ð£¬ÐÂÊÖ°´Â·¾¶ÕÒ¾ÍÐУ¬²»ÓÃϹ·£º
Ê×ÏÈÈ·¶¨ H5 ǰ¶Ë×ÊÔ´µÄ¸ù·¾¶£¬Í¨³£ÔÚ H5 ·þÎñ¶ËµÄ “res” »ò “static” Îļþ¼ÐÀ±ÈÈçÍêÕû·¾¶ÊÇ “D:\ ´«ÊÀ H5 ·þÎñ¶Ë \web\res”£¨²»Í¬·þÎñ¶Ë¿ÉÄÜÂÔÓвîÒ죬µ«ºËÐÄÊÇ “res” Îļþ¼Ð£©¡£Õâ¸öÎļþ¼ÐÀïÓÐ 3 ¸ö¹Ø¼ü×ÓÎļþ¼Ð£¬·Ö±ð¶ÔÓ¦²»Í¬ UI ×ÊÔ´£º
µÚÒ»¸öÊÇ “ui” Îļþ¼Ð£¬×¨ÃŷŵǼ½çÃæ¡¢Ö÷½çÃæ¡¢±³°ü¡¢½ÇÉ«Ãæ°åµÈºËÐĽçÃæµÄÎļþ£¬ÊÇÐÞ¸Ä×î¶àµÄµØ·½¡£±ÈÈçÏë¸ÄµÇ¼½çÃæ£º
ÏȽøÈë “ui/login” ×ÓÎļþ¼Ð£¬ÀïÃæµÄ “bg.png” ¾ÍÊǵǼ±³¾°Í¼£¬Ö±½ÓÓÃÐ޸ĺõÄÍ¼Æ¬Ìæ»»Í¬ÃûÎļþ£¬×¢Òâ³ß´çÒªºÍÔÎļþÒ»Ö£¨±ÈÈçÔÎļþÊÇ 1920×1080 ÏñËØ£¬ÐÂͼҲҪ±£³ÖÕâ¸ö³ß´ç£¬²»È»»áÀÉì±äÐΣ©£»
µÇ¼°´Å¥µÄͼƬÔÚ “ui/login/btn” À“login_btn.png” ÊÇÕý³£×´Ì¬£¬“login_btn_hover.png” ÊÇÊó±ê·ÅÉÏÈ¥µÄ״̬£¬Á½¸ö¶¼Òª¸ÄµÄ»°µÃ·Ö±ðÌæ»»£»
ÒªÊÇÏëµ÷ÕûµÇ¼°´Å¥µÄλÖ㬾ÍÕÒ “ui/login/login.json” Îļþ£¬Óà VS Code ´ò¿ª£¬ÕÒµ½ “btn_login” ¶ÔÓ¦µÄ “x”“y” ²ÎÊý£¨x ÊÇË®Æ½×ø±ê£¬y ÊÇ´¹Ö±×ø±ê£©£¬±ÈÈçÔ “x:800” ¸Ä³É “x:900”£¬°´Å¥¾Í»áÓÒÒÆ¡£
µÚ¶þ¸öÊÇ “icon” Îļþ¼Ð£¬·Å¼¼ÄÜͼ±ê¡¢ÎïÆ·Í¼±ê¡¢¹ÖÎïÍ·ÏñµÈСͼ±ê¡£±ÈÈç¸ÄսʿµÄ “Áһ𽣷¨” ͼ±ê£¬½øÈë “icon/skill” ×ÓÎļþ¼Ð£¬ÕÒµ½ “liehuo.png”£¨²»Í¬ H5 ¿ÉÄÜÃüÃû²»Í¬£¬¿É°´Í¼±êÔ¤ÀÀÕÒ£©£¬Ìæ»»³É×Ô¼ºÉè¼ÆµÄͼ±ê£¬³ß´çͨ³£ÊÇ 64×64 ÏñËØ£¬Ì«´ó»ò̫С»áµ¼ÖÂÔÚ¼¼ÄÜÀ¸ÀïÏÔʾÒì³£¡£
µÚÈý¸öÊÇ “font” Îļþ¼Ð£¬¿ØÖÆ UI ÀïµÄÎÄ×ÖÑùʽ£¬±ÈÈçµÇ¼½çÃæµÄ “´«ÊÀ H5” ±êÌâ×ÖÌå¡¢½ÇÉ«µÈ¼¶µÄ×ÖÌå¡£ÀïÃæµÄ “font.css” ÎļþÄܸÄ×ÖÌåÀàÐͺʹóС£¬±ÈÈçÔ´úÂë “font-family: "SimSun";”£¨ËÎÌ壩¸Ä³É “font-family: "Microsoft YaHei";”£¨Î¢ÈíÑźڣ©£¬±êÌâ¾Í»á±ä×ÖÌ壻ÏëÈõȼ¶Êý×Ö¸ü´ó£¬°Ñ “font-size: 16px;” ¸Ä³É “font-size: 18px;” ¾ÍÐС£
ÐèҪעÒ⣬ÓÐЩ H5 ·þÎñ¶Ë»á°Ñ UI Îļþ¼ÓÃÜ£¨ºó׺ÊÇ “.dat”£©£¬ÕâÖÖÇé¿öµÃÏÈÕÒ “½âÃܹ¤¾ß”£¨±ÈÈç “H5 ×ÊÔ´½âÃÜÆ÷”£©°ÑÎļþ½âÃܳÉ.png ºÍ.json£¬Ð޸ĺóÔÙ¼ÓÃÜ»ØÈ¥£¬²»È»Ìæ»»ºó H5 ¿Í»§¶Ë»á±¨´í¡£½âÃܹ¤¾ßÒ»°ãÔÚ H5 ·þÎñ¶ËµÄ “tools” Îļþ¼ÐÀûÓеϰ¿ÉÒÔÈ¥´«ÊÀ H5 ¼ÜÉèÉçÇøÕÒ¡£
Èý¡¢µ¥»ú´«ÆæµÄ UI ×ÊÔ´²ØÔÚ¿Í»§¶ËÄĸöµØ·½£¿Ôõô°ÑÕâЩ×ÊÔ´ÌáÈ¡³öÀ´Ð޸ģ¿
µ¥»ú´«ÆæµÄ UI ×ÊÔ´²»Ïñ H5 ÄÇÑùÊǵ¥¶ÀµÄͼƬÎļþ£¬´ó¶à´ò°üÔÚ “.wzl” »ò “.pak” ¸ñʽµÄѹËõÎļþÀ±ØÐëÏÈÌáÈ¡²ÅÄÜÐ޸쬲½Öè²»¸´ÔÓ£¬¸ú×Å×ö¾ÍÄܳɹ¦£º
µÚÒ»²½£ºÕÒµ½µ¥»ú¿Í»§¶ËµÄ “×ÊÔ´´ò°üÎļþ”¡£´ò¿ªµ¥»ú´«Ææ¿Í»§¶ËµÄ¸ùĿ¼£¨±ÈÈç “D:\ ´«ÆæÊÀ½çµ¥»ú°æ”£©£¬½øÈë “Data” Îļþ¼Ð£¬ÕâÀïÃæÓм¸¸ö¹Ø¼üµÄ´ò°üÎļþ£º
“UI.wzl”£º·ÅÖ÷½çÃæ¡¢±³°ü¡¢¼¼ÄÜÀ¸µÈ»ù´¡ UI ×ÊÔ´£»
“Interface.pak”£º²¿·Öµ¥»ú°æ±¾ÓÃÕâ¸öÎļþ£¬ÄÚÈÝºÍ UI.wzl ÀàËÆ£¬Ö»ÊǸñʽ²»Í¬£»
“Item.wzl”£º·ÅÎïÆ·Í¼±ê£¬±ÈÈçÒ©Ë®¡¢×°±¸µÄͼ±ê£»
“Skill.wzl”£º·Å¼¼ÄÜͼ±ê£¬±ÈÈ編ʦµÄ “±ùÅØÏø”¡¢µÀÊ¿µÄ “ÖÎÓúÊõ” ͼ±ê¡£
µÚ¶þ²½£ºÓà “´«Ææ UI ÌáÈ¡Æ÷” ÌáÈ¡×ÊÔ´¡£´ò¿ªÌáÈ¡¹¤¾ß£¨ÒÔ “WZL ÌáÈ¡Æ÷” ΪÀý£©£¬µã»÷ “Ñ¡ÔñÎļþ” °´Å¥£¬ÕÒµ½ “Data” Îļþ¼ÐÀïµÄ “UI.wzl”£¬ÔÙµã»÷ “Ñ¡ÔñÊä³öĿ¼”£¨±ÈÈçн¨Ò»¸ö “UI Ð޸Ĕ Îļþ¼Ð£¬Â·¾¶ÉèΪ “D:\ ´«ÆæÊÀ½çµ¥»ú°æ \UI Ð޸Ĕ£©£¬×îºóµã»÷ “¿ªÊ¼ÌáÈ¡”¡£µÈ´ý 1-2 ·ÖÖÓ£¬¹¤¾ß»á°Ñ UI.wzl ÀïµÄËùÓÐ×ÊÔ´£¨°üÀ¨.png ͼƬºÍ.cfg ÅäÖÃÎļþ£©µ¼³öµ½ “UI Ð޸Ĕ Îļþ¼ÐÀ´ò¿ª¾ÍÄÜ¿´µ½µÇ¼½çÃæ¡¢½ÇÉ«Ãæ°åµÈ¶ÔÓ¦µÄͼƬ¡£
µÚÈý²½£ºÊ¶±ðÒªÐ޸ĵÄ×ÊÔ´Îļþ¡£ÌáÈ¡ºóµÄͼƬ»á°´½çÃæ·ÖÀàÃüÃû£¬±ÈÈç “login_bg.png” ÊǵǼ±³¾°£¬“bag_panel.png” ÊDZ³°üÃæ°å±³¾°£¬“skill_btn.png” ÊǼ¼Äܰ´Å¥¡£ÒªÊÇ·Ö²»ÇåÄĸöÊÇÄĸö£¬¿ÉÒÔ°´ “Ô¤ÀÀͼ” ÕÒ —— ÔÚÌáÈ¡¹¤¾ßÀï¹´Ñ¡ “ÏÔʾԤÀÀ”£¬¾ÍÄÜ¿´µ½Ã¿¸öͼƬ¶ÔÓ¦µÄ UI Ч¹û£¬È·¶¨ºóÔÙ¸´ÖƵ½ PS ÀïÐ޸ġ£
µÚËIJ½£ºÐ޸ĺóÖØÐ´ò°ü»ØÔ¸ñʽ¡£¸ÄÍêͼƬºó£¨±ÈÈç°Ñ “login_bg.png” »»³Éб³¾°£©£¬´ò¿ª “WZL ´ò°ü¹¤¾ß”£¬µã»÷ “Ìí¼ÓÎļþ”£¬°Ñ “UI Ð޸Ĕ Îļþ¼ÐÀïËùÓÐÎļþÑ¡ÖУ¨°üÀ¨Ð޸ĺóµÄͼƬºÍÔ.cfg Îļþ£©£¬“Êä³öÎļþ·¾¶” ÉèΪ “D:\ ´«ÆæÊÀ½çµ¥»ú°æ \Data\UI.wzl”£¨¸²¸ÇÔÎļþ£¬½¨ÒéÏȰÑÔ UI.wzl ±¸·Ýµ½×ÀÃæ£¬·ÀÖ¹¸Ä»µ£©£¬È»ºóµã»÷ “¿ªÊ¼´ò°ü”¡£´ò°üÍê³Éºó£¬Æô¶¯µ¥»ú´«Ææ£¬¾ÍÄÜ¿´µ½Ð޸ĺóµÄ UI Ч¹ûÁË¡£
ÒªÊÇÄãµÄµ¥»ú°æ±¾ÓõÄÊÇ “.pak” ¸ñʽÎļþ£¨±ÈÈç Interface.pak£©£¬²½ÖèÀàËÆ£¬Ö»ÊÇÒª»» “PAK ÌáÈ¡ / ´ò°ü¹¤¾ß”£¬²Ù×÷Âß¼ºÍ WZL ¹¤¾ßÒ»Ñù£¬ÏÈÌáÈ¡¡¢ÔÙÐ޸ġ¢×îºó´ò°ü£¬¹¤¾ßÔÚ´«Ææµ¥»ú×ÊÔ´Õ¾Àï¶¼ÄÜÕÒµ½Ãâ·Ñ°æ¡£
ËÄ¡¢ÐÞ¸Ä UI ʱ×îÈÝÒ×Óöµ½ “¸ÄÍê²»ÉúЧ”“ÏÔʾ´í딣¬ÕâЩÎÊÌâÔõô½â¾ö£¿
ÐÂÊÖ¸Ä UI ³£²ÈÕâÁ½¸ö¿Ó£¬¿´ËƸ´ÔÓÆäʵ¶¼ÊÇϸ½ÚûעÒ⣬Õë¶ÔÐÔ½â¾ö¾ÍÐУ¬²»Ó÷´¸´ÖØÐ°²×°¿Í»§¶Ë£º
ÏȽâ¾ö “¸ÄÍê²»ÉúЧ” µÄÎÊÌ⣬³£¼ûÔÒòÓÐ 3 ¸ö£º
Îļþ·¾¶´í»òÎļþÃû²»¶Ô£º±ÈÈç H5 ¸ÄµÇ¼±³¾°£¬°ÑÐÂͼ·Åµ½ “ui/main” Îļþ¼Ð£¨Ö÷½çÃæÎļþ¼Ð£©£¬¶ø²»ÊÇ “ui/login”£¬×ÔÈ»²»ÉúЧ£»»òÕßµ¥»ú¸Ä¼¼ÄÜͼ±êʱ£¬°Ñ “liehuo.png” ¸Ä³É “liehuo1.png”£¬¿Í»§¶Ë»¹ÊÇÕÒÔÎļþÃû£¬ËùÒÔû±ä»¯¡£½â¾ö·½·¨£ººË¶ÔÎļþ·¾¶ÊÇ·ñºÍÔÎļþÒ»Ö£¬ÎļþÃû£¨°üÀ¨ºó׺£©ÍêÈ«Ïàͬ£¬±ÈÈçÔÎļþÊÇ “login_bg.png”£¬ÐÂÎļþÒ²±ØÐëÊÇÕâ¸öÃû×Ö£¬²»Äܶà¿Õ¸ñ»ò¸Ä×Öĸ´óСд£¨ÓÐЩ¿Í»§¶ËÇø·Ö´óСд£¬“Login_Bg.png” ºÍ “login_bg.png” ËãÁ½¸öÎļþ£©¡£
H5 »º´æÃ»Ç壺H5 ÓÎÏ·»á»º´æÖ®Ç°µÄ UI ×ÊÔ´£¬¸ÄÍêÎļþºóÖ±½ÓË¢ÐÂÒ³Ãæ£¬ä¯ÀÀÆ÷»¹ÊÇÓûº´æµÄ¾Éͼ¡£½â¾ö·½·¨£º´ò¿ª H5 ÓÎÏ·Ò³Ãæ£¬°´ “Ctrl+Shift+Del” µ÷³öä¯ÀÀÆ÷ÇåÀí½çÃæ£¬¹´Ñ¡ “»º´æµÄͼƬºÍÎļþ”£¬µã»÷ “Çå³ýÊý¾Ý”£¬È»ºó¹Ø±Õä¯ÀÀÆ÷ÖØÐ´ò¿ª£¬ÔÙ½øÓÎÏ·¾ÍÄÜ¿´µ½Ð UI£»ÒªÊÇÓõÄÊÇ H5 ±¾µØ·þÎñ¶Ë£¬»¹ÒªÖØÆô·þÎñ¶Ë£¨Ë«»÷ “Æô¶¯ H5.bat”£©£¬È·±£·þÎñ¶Ë¼ÓÔØÐÂÎļþ¡£
µ¥»ú´ò°üû¸²¸ÇÔÎļþ£ºÐ޸ĺó´ò°üʱ£¬Êä³ö·¾¶Éè³ÉÁËн¨Îļþ¼Ð£¬Ã»¸²¸Ç “Data” ÀïµÄÔ WZL/PAK Îļþ£¬¿Í»§¶Ë»¹ÊǶÁ¾ÉÎļþ¡£½â¾ö·½·¨£º´ò°üʱȷÈÏ “Êä³öÎļþ·¾¶” Êǿͻ§¶Ë “Data” Îļþ¼ÐÀïµÄÔÎļþ£¬±ÈÈç “D:\ ´«ÆæÊÀ½çµ¥»ú°æ \Data\UI.wzl”£¬´ò°üʱ¹¤¾ß»áÌáʾ “ÎļþÒÑ´æÔÚ£¬ÊÇ·ñ¸²¸Ç”£¬Ñ¡ “ÊÇ” ¾ÍÐС£
ÔÙ½â¾ö “ÏÔʾ´íλ” µÄÎÊÌ⣬Ö÷ÒªÔÒòÊÇ “ͼƬ³ß´çºÍÅäÖòÎÊý²»Æ¥Å䔣º
H5 UI ´íλ£º±ÈÈç¸ÄÁ˵Ǽ°´Å¥µÄͼƬ£¬ÔͼƬÊÇ 150×50 ÏñËØ£¬ÐÂͼ¸Ä³É 200×50 ÏñËØ£¬µ«Ã»¸Ä.json ÀïµÄ “width” ²ÎÊý£¨»¹ÊÇ 150£©£¬°´Å¥¾Í»áÖ»ÏÔʾһ°ë£¬»ò¼·Ñ¹ÆäËûÔªËØ¡£½â¾ö·½·¨£ºÓà VS Code ´ò¿ª¶ÔÓ¦µÄ.json Îļþ£¬ÕÒµ½¸Ã UI ÔªËØµÄ “width”“height” ²ÎÊý£¬¸Ä³ÉºÍÐÂͼƬһÖµijߴ磬±ÈÈçÐÂͼ 200×50£¬¾Í°Ñ “width:150” ¸Ä³É “width:200”£¬“height:50” ±£³Ö²»±ä£¬±£´æºóÇ建´æÔÙÔ¤ÀÀ¡£
µ¥»ú UI ´íλ£º±ÈÈç¸Ä±³°üÃæ°å±³¾°£¬ÔͼƬÊÇ 800×600 ÏñËØ£¬ÐÂͼ¸Ä³É 850×600 ÏñËØ£¬´ò°üºó±³°üÀïµÄÎïÆ·¸ñ×Ó»áÆ«ÒÆ¡£½â¾ö·½·¨£ºÕÒµ½ÌáÈ¡³öÀ´µÄ “bag.cfg” ÅäÖÃÎļþ£¨±³°üµÄ²¼¾ÖÅäÖã©£¬ÓüÇʱ¾´ò¿ª£¬ÕÒµ½ “panel_width”“panel_height” ²ÎÊý£¬¸Ä³ÉÐÂͼƬµÄ³ß´ç£¨850×600£©£¬È»ºóÔÙ´ò°ü»Ø WZL Îļþ£¬ÕâÑù¸ñ×Ӿͻá¸ú×ÅÃæ°å³ß´çµ÷ÕûλÖá£
ÒªÊÇ´íλÑÏÖØ£¬±ÈÈç H5 Ö÷½çÃæµÄͼ±êÈ«ÂÒÁË£¬¿ÉÄÜÊDz»Ð¡ÐÄɾÁË.json ÀïµÄ´úÂ룬Õâʱ±ð»Å£¬°Ñ֮ǰ±¸·ÝµÄÔÎļþ¸´ÖÆ»ØÀ´£¬ÖØÐÂÐ޸쬱ÜÃâÔ½¸ÄÔ½ÂÒ¡£
Îå¡¢Ïë×Ô¶¨Òåµ¥»ú´«ÆæµÄ “¼¼ÄÜÀäÈ´¶¯»”“±³°üÎïÆ·±ß¿ò”£¬ÕâЩϸ½ÚÔõô¸Ä£¿
ÕâЩϸ½ÚÐ޸ıȻù´¡ UI ÉÔ¸´ÔÓ£¬µ«Ö»ÒªÕÒµ½¶ÔÓ¦µÄ×ÊÔ´ºÍÅäÖÃÎļþ£¬Ò²ÄÜʵÏÖ£¬ÐÂÊÖ¿ÉÒÔ´Ó¼òµ¥µÄ “ÎïÆ·±ß¿ò” ¿ªÊ¼Á·ÊÖ£º
ÏÈ¸Ä “±³°üÎïÆ·±ß¿ò”£¬²½ÖèºÜ¼òµ¥£º
ÌáÈ¡µ¥»ú¿Í»§¶Ë “Data” ÀïµÄ “Item.wzl” Îļþ£¬ÕÒµ½ “border.png”£¨ÎïÆ·±ß¿òͼƬ£¬ÒªÊÇûÓоÍÕÒ “item_border.png”£¬²»Í¬°æ±¾ÃüÃûÂÔÓвîÒ죩£»
Óà PS ´ò¿ª “border.png”£¬Ô±ß¿ò¿ÉÄÜÊÇ»ÒÉ«£¬Ïë¸Ä³É½ðÉ«£¬¾ÍÓà “»±Ê¹¤¾ß” °Ñ±ß¿òÑÕÉ«»»³É½ðÉ«£¬»òÖ±½ÓÌæ»»³É×Ô¼ºÕҵĽðÉ«±ß¿òͼƬ£¬×¢Òâ³ß´çÒªºÍÔÎļþÒ»Ö£¨±ÈÈçԱ߿òÊÇ 32×32 ÏñËØ£¬ÐÂͼҲҪһÑù£¬²»È»ÎïÆ·ÏÔʾʱ±ß¿ò»áÍᣩ£»
°ÑÐ޸ĺóµÄ “border.png” ·Å»ØÌáÈ¡Îļþ¼Ð£¬ÖØÐ´ò°ü³É “Item.wzl”£¬¸²¸ÇÔÎļþ£¬Æô¶¯ÓÎÏ·ºó´ò¿ª±³°ü£¬ÎïÆ·±ß¿ò¾Í±ä³É½ðÉ«ÁË¡£
ÔÙ¸Ä “¼¼ÄÜÀäÈ´¶¯»”£¬Õâ¸öÐèÒª¸ÄͼƬºÍÅäÖÃÎļþ£¬²½ÖèÈçÏ£º
ÌáÈ¡ “Skill.wzl” Îļþ£¬ÕÒµ½ “cooling.png”£¨ÀäÈ´¶¯»µÄ»ù´¡Í¼Æ¬£¬Í¨³£Êǰë͸Ã÷µÄ»ÒÉ«ÕÚÕÖ£©ºÍ “cooling.cfg”£¨ÀäÈ´¶¯»µÄÅäÖÃÎļþ£©£»
¸Ä¶¯»Í¼Æ¬£ºÓà PS ¸ø “cooling.png” ¼Ó¶¯Ì¬Ð§¹û£¬±ÈÈçÌí¼Ó½ø¶ÈÌõÑùʽ£¨´ÓÓÒµ½×ó½¥±ä͸Ã÷£©£¬±£´æÎª “cooling_1.png”“cooling_2.png”…“cooling_10.png”£¨10 ÕÅͼƬ×é³É¶¯»Ö¡£©£»
¸ÄÅäÖÃÎļþ£ºÓüÇʱ¾´ò¿ª “cooling.cfg”£¬Ô´úÂë¿ÉÄÜÊÇ “frame:1”£¨1 Ö¡¾²Ì¬Í¼£©£¬¸Ä³É “frame:10”£¨10 Ö¡¶¯»£©£¬ÔÙÌí¼Óÿ֡µÄÏÔʾʱ¼ä “time:100”£¨Ã¿Ö¡ÏÔʾ 100 ºÁÃ룬1 Ãë 10 Ö¡£¬¶¯»¸üÁ÷³©£©£¬±£´æÎļþ£»
°ÑËùÓÐÀäÈ´¶¯»Í¼Æ¬ºÍÐ޸ĺóµÄ “cooling.cfg” ·Å»ØÌáÈ¡Îļþ¼Ð£¬´ò°ü³É “Skill.wzl” ¸²¸ÇÔÎļþ£¬Æô¶¯ÓÎÏ·ºó·Å¼¼ÄÜ£¬¾ÍÄÜ¿´µ½ÐµÄÀäÈ´¶¯»ÁË¡£
ÐèҪעÒ⣬ÓÐЩµ¥»ú°æ±¾µÄ¼¼ÄÜÀäÈ´¶¯»ÊÇÓà “½Å±¾¿ØÖÆ” µÄ£¬±ÈÈçÔÚ “Envir/Script” Îļþ¼ÐÀïµÄ “SkillScript.txt” Îļþ£¬ÀïÃæÓÐÀäÈ´¶¯»µÄ´¥·¢´úÂ룬ҪÊǸÄÁËͼƬûЧ¹û£¬¾Í´ò¿ªÕâ¸ö½Å±¾£¬È·È϶¯»Í¼Æ¬µÄ·¾¶ºÍÎļþÃûÊÇ·ñÕýÈ·£¬±ÈÈç “CoolingPic = D:\ ´«ÆæÊÀ½çµ¥»ú°æ \Data\Skill.wzl\cooling”£¬È·±£ºÍÄãÐ޸ĵÄÎļþÒ»Ö¡£
ÕâЩϸ½ÚÐÞ¸ÄÄÜÈõ¥»ú´«ÆæµÄ UI ¸üÓÐÌØÉ«£¬ÐÂÊÖ²»ÓÃ×·ÇóÒ»²½µ½Î»£¬Ïȸı߿ò¡¢±³¾°£¬ÊìÁ·ºóÔÙ³¢ÊÔ¶¯»¡¢ÎÄ×ÖÑùʽ£¬ÂýÂý»ýÀÛ¾Ñé¡£

