थीम डिज़ाइन गाइड

थीमिंग बताती है कि QuizWitz थीम कैसे बनाई जाती है: Adobe Animate में, CreateJS लाइब्रेरी के रूप में एक्सपोर्ट करके. यह पेज उससे पहले वाले कदम के बारे में है - थीम को डिज़ाइन करने के बारे में.

यह एक ग्राफ़िक डिज़ाइनर के लिए लिखा गया है, और यह मानकर चलता है कि डिज़ाइन और Animate प्रोडक्शन अलग-अलग लोग करते हैं. अब कम ही डिज़ाइनर Adobe Animate में काम करते हैं, इसलिए आम तौर पर डिज़ाइनर आर्टवर्क देता है और कोई और थीम जोड़ता है. यह अच्छी तरह चलता है, बशर्ते आर्टवर्क ऐसे रूप में आए जिसे बिल्ड इस्तेमाल कर सके. यह पेज उसी रूप का वर्णन करता है, और साथ ही उन चीज़ों की सूची भी है जो आप किसी डिज़ाइनर से कोटेशन माँगते समय माँगेंगे.

इस पेज के चार हिस्से हैं:

1. आप क्या डिज़ाइन कर रहे हैं - वे स्क्रीन जो एक थीम में आती हैं.
2. आठ फ़्रेम और एलिमेंट शीट, एक-एक करके, स्क्रीनशॉट के साथ.
3. डिज़ाइन के नियम - फ़ाइल कैसे बनी होनी चाहिए ताकि इंजन उसे इस्तेमाल कर सके.
4. क्या सौंपना है - स्रोत फ़ाइल, सौंपी जाने वाली चीज़ें और काम का क्रम.

सुझाव

अगर आप सिर्फ़ रंग, फ़ॉन्ट और बैकग्राउंड बदलना चाहते हैं, तो आपको इनमें से कुछ भी नहीं चाहिए - इसके बजाय Emerald थीम को अपने हिसाब से बदलें.

इसे चलते हुए देखें

यहाँ बताई गई हर स्क्रीन को नमूना डेटा के साथ लाइव खेलकर देखा जा सकता है, थीम टेस्टर में client.quizwitz.com/test.html पर. यह एक थीम लोड करता है और टेस्ट स्क्रीनों का मेन्यू देता है: अटैचमेंट के साथ और बिना अटैचमेंट वाले सवाल, छोटे और बड़े समूह के लिए जवाबों का फैलाव, रैंकिंग, राउंड इंट्रो, क्लाइंट लोगो के साथ और बिना लोगो वाली कनेक्ट स्क्रीन, वगैरह. पते में ?theme=emerald जोड़ें ताकि Emerald थीम दिख सके. जो थीम बनाता है, वह उसे जोड़ते समय जाँचने के लिए यही पेज इस्तेमाल करता है.

---

आप क्या डिज़ाइन कर रहे हैं

QuizWitz का एक गेम पूरा हॉल एक साथ खेलता है, और हमेशा दो स्क्रीन शामिल रहती हैं:

• गेम स्क्रीन - एक प्रोजेक्टर या टीवी, 1920 × 1080. सवाल, जवाब, हॉल के जवाब कैसे बँटे, रैंकिंग. यही आप डिज़ाइन करते हैं.
• हर खिलाड़ी का फ़ोन, जिस पर वह अपना जवाब टाइप करता है. वह एक तय लेआउट वाला वेब पेज है; उसकी स्टाइल आपकी रंगों की सूची से आती है, उसका लेआउट आप नहीं बनाते.

थीम गेम स्क्रीन की पूरी दृश्य परत है: बैकग्राउंड, टाइपोग्राफ़ी, रंग, चार विकल्पों वाला सवाल जिस तरह दिखाया जाता है, रैंकिंग जिस तरह बनती है, राउंड की घोषणा जिस तरह होती है.

---

आठ फ़्रेम और एक एलिमेंट शीट

गेम में दर्जनों अलग-अलग स्क्रीन अवस्थाएँ हैं, लेकिन ज़्यादातर एक ही लेआउट के रूप हैं. आप आठ फ़्रेम और एलिमेंट की एक शीट डिज़ाइन करते हैं; बाकी सब उन्हीं से निकलता है. यह कोई शॉर्टकट नहीं है - इंजन इसी तरह काम करता है. जिस स्क्रीन का अपना आर्टवर्क नहीं होता, वह सामान्य फ़्रेम पर लौट आती है.

शीट उतनी ही मायने रखती है जितने फ़्रेम: सामान्य फ़्रेम पर लौटने वाली स्क्रीन को भी अपने कॉन्टेंट एरिया में सामान चाहिए - एक पैनल, एक रो, एक लकीर.

#	फ़्रेम	इसमें यह भी आता है
1	सामान्य फ़्रेम	तेरह स्क्रीन अवस्थाएँ जिनका अपना आर्टवर्क नहीं है
2	कनेक्ट स्क्रीन	इसे दो बार बनाएँ: क्लाइंट लोगो के साथ और उसके बिना
3	वेटिंग स्क्रीन	-
4	सवाल स्क्रीन	-
5	अटैचमेंट वाला सवाल	पूरी स्क्रीन वाला अटैचमेंट, और सवालों के बीच दिखाए जाने वाले अटैचमेंट
6	जवाब स्क्रीन	ओपन सवालों और अटैचमेंट वाले सवालों की जवाब स्क्रीन
7	रैंकिंग और विजेता	राउंड के बीच की रैंकिंग और आख़िरी विजेता
8	राउंड इंट्रो	राउंड की सभी छह कैटेगरी

स्क्रीनशॉट के बारे में

नीचे दी गई स्क्रीन एक मौजूदा थीम से हैं. ये दिखाती हैं कि हर स्क्रीन पर कौन-से एलिमेंट और कब दिखते हैं. ये न शैली की और न ही लेआउट की मिसाल हैं: यह थीम अपना सवाल, अपने विकल्प और अपना टाइमर कहाँ रखती है, यह उसका अपना फ़ैसला है, और आपका बिलकुल अलग हो सकता है.

फ़्रेम 1 - सामान्य फ़्रेम

इस पर क्या है: बैकग्राउंड, एक हेडर शीर्षक और उसके नीचे एक खाली कॉन्टेंट एरिया. यह कोई पूरी रचना नहीं, बल्कि वह फ़्रेम है जिसके अंदर बाकी सब बनता है.

इसमें क्या आता है: तेरह स्क्रीन अवस्थाएँ - राउंड की व्याख्या, रैंकिंग, खिलाड़ी परिचय, बहुविकल्पीय के रूप, लंबे सवाल, Seats की चेतावनियाँ, सेटिंग्स. हर एक कॉन्टेंट एरिया को एलिमेंट शीट के एलिमेंट से अपने तरीके से भरती है, इसलिए फ़्रेम को ऐसी चीज़ें सँभालनी होती हैं जो एक-दूसरे से बिलकुल नहीं मिलतीं. सवाल पिकर और लंबे सवाल को अपनी अलग रचना मिल सकती है, अगर आप चाहें; वरना वे यही फ़्रेम इस्तेमाल करते हैं.

एक ही फ़्रेम पर गेम के दो पल: एक सवाल पिकर और एक पॉइंट्स लैडर.

देखिए कि इनमें कितना कम एक जैसा है. पिकर अपनी तीन पंक्तियाँ किनारे वाले पैनल के अंदर रखता है; लैडर में पैनल है ही नहीं, बस पतली लकीरों से अलग की गई पंक्तियाँ. दोनों में जो साझा है वह बैकग्राउंड और उनके ऊपर की हेडर पट्टी है - उसके नीचे जो कुछ है वह अलग-अलग स्क्रीन का है और उसे गेम भरता है, आप नहीं.

वह पैनल और वे लकीरें एलिमेंट शीट से आती हैं, इस फ़्रेम से नहीं. इस फ़्रेम को बस उन्हें सँभालना है: कॉन्टेंट एरिया को एक खाली, तटस्थ, खुली जगह की तरह डिज़ाइन करें जो किनारे वाले पैनल, सादी सूची और पंक्तियों की तालिका, तीनों के साथ बराबर चले. बीच में भरा-भरा बैकग्राउंड, या ऐसा हेडर जो सिर्फ़ ठीक नीचे लगे पैनल के साथ चलता हो, वहीं यह टूटता है.

फ़्रेम 2 - कनेक्ट स्क्रीन

इस पर क्या है: वह सब कुछ जो हॉल को जुड़ने के लिए चाहिए.

• निर्देशों की पाँच पंक्तियाँ
• एक गेम कोड और एक QR कोड, दोनों इंजन बनाता है - QR कोड के लिए एक वर्ग जगह छोड़ें
• जुड़े हुए खिलाड़ियों की संख्या वाली एक पंक्ति
• एक-एक करके आते खिलाड़ियों की सूची

इसे दो बार बनाएँ: गेम कोड के पास क्लाइंट लोगो के साथ, और उसके बिना, जहाँ थीम का अपना आर्टवर्क स्क्रीन को सँभालता है.

फ़्रेम 3 - वेटिंग स्क्रीन

इस पर क्या है: लगभग कुछ नहीं - क्विज़ का अपना लोगो, या थीम का आर्टवर्क.

कनेक्ट स्क्रीन के साथ इसका सिर्फ़ बैकग्राउंड साझा है, इसलिए इसे एक अलग रचना के रूप में डिज़ाइन करें. जब क्विज़मास्टर कोई सवाल ज़ोर से पढ़ता है तब यह स्क्रीन पर रहती है, इसलिए यह गेम की लगभग किसी भी दूसरी चीज़ से ज़्यादा देर तक दिखती है. यह किसी खाली स्क्रीन को आम तौर पर मिलने वाले ध्यान से ज़्यादा ध्यान की हक़दार है.

फ़्रेम 4 - सवाल स्क्रीन

इस पर क्या है: सवाल, एक टाइमर, चार जवाब विकल्प और एक फ़ीडबैक पंक्ति. हॉल इसी स्क्रीन को सबसे ज़्यादा देर तक देखता है. ध्यान दें कि कोई विकल्प सिर्फ़ एक इमोजी भी हो सकता है:

बिना विकल्पों वाला सवाल - खिलाड़ी अपना जवाब अपने फ़ोन पर टाइप करते हैं. स्क्रीन लगभग खाली रहती है और टाइमर मुख्य एलिमेंट बन जाता है:

वह पल जब समय ख़त्म होता है. फ़ीडबैक का गुब्बारा स्क्रीन के ऊपर आ जाता है और टाइमर खाली रहता है:

फ़्रेम 5 - अटैचमेंट वाला सवाल

इस पर क्या है: फ़्रेम 4 वाले ही हिस्से, किसी तस्वीर या वीडियो के इर्द-गिर्द सजे हुए. यह एक अलग रचना हो सकती है. अटैचमेंट को आपके बनाए बॉक्स में समाने के लिए स्केल किया जाता है, इसलिए उसमें चौड़ी और लंबी दोनों तरह की तस्वीरें ठीक दिखनी चाहिए.

इसमें क्या आता है: पूरी स्क्रीन वाला अटैचमेंट, और सवालों के बीच दिखाए जाने वाले अटैचमेंट.

यहाँ विकल्प अटैचमेंट के बाएँ और दाएँ हैं:

अकेला अटैचमेंट, पूरी स्क्रीन भरता हुआ:

फ़्रेम 6 - जवाब स्क्रीन

इस पर क्या है: कौन-सा जवाब सही था, हॉल के जवाब विकल्पों में कैसे बँटे, और एक फ़ीडबैक पंक्ति.

इसमें क्या आता है: ओपन सवालों और अटैचमेंट वाले सवालों की जवाब स्क्रीन.

यह स्क्रीन तीन पलों से गुज़रती है. पहले फैलाव, जिसमें अभी कुछ भी चिह्नित नहीं है:

फिर सही विकल्प पर निशान लगता है और ग़लत विकल्प काट दिए जाते हैं:

और अगर सवाल के साथ व्याख्या हो, तो आर्टवर्क के ऊपर एक गुब्बारा उतरता है. उसके लिए जगह छोड़ें - वह आपकी बनाई हर चीज़ के ऊपर आकर बैठता है:

छोटे समूह में वही पल चार्ट के बजाय स्कोर की सूची होता है:

ओपन सवाल के लिए चार्ट दिखाता है कि कितने खिलाड़ियों ने सही जवाब दिया:

फ़्रेम 7 - रैंकिंग और विजेता

इस पर क्या है: खिलाड़ियों की सूची, स्थान, अवतार, नाम और स्कोर के साथ. खिलाड़ी रो को एक अलग, दोबारा इस्तेमाल होने वाले एलिमेंट के रूप में दें: डिफ़ॉल्ट रूप से यह छह बार दोहराई जाती है, ज़्यादा से ज़्यादा दस बार.

इसमें क्या आता है: राउंड के बीच की रैंकिंग और आख़िरी विजेता.

एक राउंड के बाद की रैंकिंग, छह खिलाड़ी रो के साथ:

आख़िरी उलटी गिनती एक बार में एक खिलाड़ी का नाम लेती है, आख़िरी स्थान से पहले स्थान तक - स्थान, स्कोर और टीम का नाम रोशनी में. यहीं उड़ती इमोजी सबसे ज़्यादा होती हैं:

फ़्रेम 8 - राउंड इंट्रो

इस पर क्या है: हर राउंड कैटेगरी के लिए एक छोटी घोषणा. छह कैटेगरी हैं: विज्ञान और तकनीक, प्रकृति, मनोरंजन और संगीत, खेल, कला, इतिहास.

इसमें क्या आता है: सभी छह कैटेगरी. एक डिज़ाइन इनमें से कई के काम आ सकता है.

यहाँ एक रचना, हर कैटेगरी के लिए एक रूप के साथ:

किरदार वैकल्पिक है. मूल QuizWitz थीम में एक किरदार है जो बोलता है और प्रतिक्रिया देता है; Emerald थीम बिना किरदार के आती है, और उसे हटाने से सबसे महँगा एनिमेशन काम हट जाता है - होंठों का तालमेल, आँखें, बाँहें.

किरदार के बिना राउंड इंट्रो एक ग्राफ़िक, टाइपोग्राफ़िक या चित्रात्मक पल बन जाता है. दो तरीक़े काम को अनुपात में रखते हैं: हर कैटेगरी के लिए एक रंग या आइकॉन रूप वाली एक रचना, या एक ही सार्वभौमिक घोषणा जिसमें सिर्फ़ राउंड का नाम बदलता है. छह सचमुच अलग इंट्रो कुछ सेकंड की स्क्रीन के लिए बहुत काम हैं.

---

एलिमेंट शीट

एलिमेंट के दो समूह, एक ही शीट पर, हर एक एक बार बनाया और हर जगह दोबारा इस्तेमाल किया गया.

कॉन्टेंट की बुनियादी इकाइयाँ. ये सामान्य फ़्रेम का कॉन्टेंट एरिया भरती हैं. जो स्क्रीन उस पर लौटती हैं वे इन्हीं से जुड़ती हैं, इसलिए आप यहाँ जो बनाते हैं वही तय करता है कि वे सब कैसी दिखेंगी:

• एक पैनल: भराव, किनारा, कोनों की गोलाई - वह कंटेनर जिसमें कोई सूची या टेक्स्ट का हिस्सा बैठता है
• एक लिस्ट रो: किसी भी सूची की दोहराई जाने वाली इकाई, अपने बैकग्राउंड के साथ या बिना
• एक सेपरेटर: पंक्तियों के बीच की लकीर, जहाँ पैनल नहीं है
• एक लेबल और मान की जोड़ी: बाईं ओर छोटा लेबल, दाईं ओर मान

नियंत्रण. एक बार बनाए, हर स्क्रीन पर इस्तेमाल किए गए:

• एक बटन अपनी चार अवस्थाओं में: सामान्य, होवर, दबा हुआ, निष्क्रिय
• सही और ग़लत के चिह्न
• एक स्क्रॉलबार, एक चेकबॉक्स, एक ड्रॉपडाउन
• QuizWitz लोगो कहाँ बैठता है

---

आपके लिए क्या तय है

• खिलाड़ियों के फ़ोन. एक तय HTML लेआउट.
• वे गिनी-चुनी चीज़ें जो इंजन ख़ुद बनाता है - पॉइंट्स लैडर पर पंक्तियों के बीच की लकीरें, सवाल पिकर में हाइलाइट की गई पंक्ति, QR कोड. उनके रंग रंग एक सूची के रूप में से आते हैं.
• कौन-सी स्क्रीन सामान्य फ़्रेम पर लौटती हैं, और कैसे.
• छह कैटेगरी राउंड इंट्रो के आर्टवर्क से किस तरह जुड़ती हैं. यह जोड़ एक कॉन्फ़िगरेशन सेटिंग है, इसलिए एक इंट्रो कई कैटेगरी के लिए दोबारा इस्तेमाल हो सकता है.
• सारा समय-निर्धारण और सभी एनिमेशन अवधियाँ.
• ध्वनि. थीम अपना संगीत और ध्वनि प्रभाव रख सकती है, लेकिन वह अलग से दी जाने वाली चीज़ है और डिज़ाइन के काम का हिस्सा नहीं है.

---

डिज़ाइन के नियम

इनमें से कोई भी आपके दृश्य डिज़ाइन को सीमित नहीं करता. ये इस बारे में हैं कि फ़ाइल कैसे बनी है.

फ़ॉर्मैट

• 1920 × 1080 पिक्सल, ठीक इतना ही. हर स्क्रीन के लिए एक फ़्रेम.
• जहाँ हो सके वेक्टर में काम करें. जहाँ रैस्टर इस्तेमाल करें (तस्वीरें, टेक्सचर): कम से कम दिखाई देने वाले आकार का 2×.
• Animate का दस्तावेज़ 24 फ़्रेम प्रति सेकंड पर चलता है. यह तब मायने रखता है जब आप गति के सुझाव दें.
• किनारों पर 5% हाशिया ज़रूरी जानकारी से खाली रखें. प्रोजेक्टर किनारे काट देते हैं.

लेयर संरचना - सबसे ज़्यादा मायने रखने वाला नियम

जो कुछ भी हिल सकता है, दिख सकता है या जिसका मान बदल सकता है, वह अपनी अलग नाम वाली लेयर पर होता है. कुछ भी मिलाया हुआ नहीं, कुछ भी चपटा किया हुआ नहीं.

व्यवहार में:

• चार जवाब विकल्प चार अलग लेयर हैं, एक नहीं
• टाइमर बैकग्राउंड से अलग है
• एक बटन और उसका लेबल दो एलिमेंट हैं
• एक खिलाड़ी रो एक समूह है जिसकी नक़ल बनाई जा सकती है

क्या मिलाया जा सकता है: विशुद्ध सजावटी बैकग्राउंड आर्टवर्क जो एक स्थिर तस्वीर की तरह काम करे.

यही वह अकेला नियम है जिसका पालन न होने पर सचमुच तकलीफ़ होती है - तब आर्टवर्क को अलग-अलग करना या दोबारा बनाना पड़ता है, और यही वह ख़र्च है जिससे बचने के लिए यह पूरी व्यवस्था बनी है.

वे प्रभाव जो टिक नहीं पाते

इंजन HTML5 कैनवस पर बनाता है. इन्हें तस्वीर में पका देना पड़ता है या छोड़ देना पड़ता है:

प्रभाव	इसके बजाय क्या करें
फ़िल्टर के रूप में लाइव ब्लर, ड्रॉप शैडो और ग्लो	इन्हें आर्टवर्क के रूप में दें
ब्लेंड मोड (multiply, screen, overlay)	इन्हें सपाट रंग में बदल दें
लेयर प्रभाव और समायोजन लेयर	इन्हें तस्वीर में पका दें
टेक्स्ट के अंदर ग्रेडिएंट, या हर अक्षर पर अलग किनारे वाला टेक्स्ट	इन्हें छोड़ दें
हर फ़्रेम पर बदलने वाले मास्क	इन्हें छोड़ दें

आकृतियों में ग्रेडिएंट ठीक हैं. पारदर्शिता ठीक है. तय आर्टवर्क के रूप में परछाइयाँ ठीक हैं.

टेक्स्ट कैसा बर्ताव करता है

यहीं QuizWitz के लिए डिज़ाइन करना आम डिज़ाइन काम से सबसे ज़्यादा अलग है.

आप फ़ॉन्ट का आकार तय नहीं करते. आप एक बॉक्स बनाते हैं.

सारा टेक्स्ट एक कंपोनेंट लाइव बनाता है, जिसे दो चीज़ें मिलती हैं: एक टेक्स्ट, और वह आयत जो आपने बनाई. फिर वह वह सबसे बड़ा फ़ॉन्ट आकार खोजता है जिस पर वह टेक्स्ट, पंक्तियों में बँटकर, बॉक्स के भीतर समा जाए. लंबा टेक्स्ट समाने के लिए छोटा हो जाता है; छोटा टेक्स्ट तब तक बड़ा होता है जब तक बॉक्स भर न जाए.

तीन पंक्तियाँ, तीन एक जैसे बॉक्स - और तीन बिलकुल अलग फ़ॉन्ट आकार, सिर्फ़ इसलिए कि टेक्स्ट छोटा या लंबा है. "Where is love" को पूरी ऊँचाई मिलती है; उसके ऊपर वाले सवाल को दो छोटी पंक्तियों से काम चलाना पड़ता है. बाईं ओर के लेबल भी ऐसा ही बर्ताव करते हैं.

इससे यह निकलता है:

• वही सवाल किसी दूसरे गेम में अलग दिखता है. छह शब्दों का सवाल बड़ा और स्क्रीन भरता हुआ दिखता है; पैंतीस शब्दों वाला उसी बॉक्स में पाँच पंक्तियों में छोटा दिखता है. दोनों को ठीक दिखना चाहिए.
• हर टेक्स्ट बॉक्स को दो बार डिज़ाइन करें. उसे एक बार बहुत छोटे नमूने से और एक बार बहुत लंबे नमूने से भरें, और जाँचें कि रचना दोनों हालात में टिकती है. मोटे तौर पर: एक जवाब विकल्प एक से लगभग आठ शब्दों तक होता है, एक सवाल पाँच से चालीस तक, एक खिलाड़ी का नाम दो से बीस अक्षरों तक.
• पंक्तियों की तय संख्या पर भरोसा न करें. ऐसा शीर्षक जो "हमेशा एक ही पंक्ति में" हो, यहाँ होता ही नहीं.
• टेक्स्ट को किसी और चीज़ से आँख से मिलाकर न सजाएँ. जिस टेक्स्ट को किसी लकीर या आकृति से मिलना है, वह छोटा या लंबा होते ही खिसक जाएगा. सटीक जगहों के बजाय ऐसे बॉक्स इस्तेमाल करें जो काफ़ी खुले हों, और एक संरेखण (बाएँ, बीच में, दाएँ).
• बारह भाषाएँ. जर्मन के जोड़ शब्द लंबे होते हैं, और हंगेरियन भी कम दयालु नहीं है. जो बॉक्स अंग्रेज़ी में तंग है, वह जर्मन में न पढ़े जा सकने वाले छोटे आकार पर आ जाता है.
• टेक्स्ट के अंदर इमोजी आ सकती हैं. खिलाड़ी अपनी टीम के नाम के पास एक चुनते हैं, और किसी सवाल या विकल्प में भी एक हो सकती है - कभी-कभी विकल्प सिर्फ़ एक इमोजी ही होता है. वे रंग में बनती हैं और अपने आसपास के अक्षरों से ऊँची होती हैं.

बिल्ड को हर टेक्स्ट बॉक्स के बारे में क्या जानना है: वह कहाँ है, कितना बड़ा है, कैसे संरेखित है, कौन-सा रंग और कौन-सा फ़ॉन्ट. यह नहीं: किस पॉइंट आकार पर.

आप इसका इस्तेमाल कर सकते हैं. छोटे टेक्स्ट वाला बड़ा बॉक्स अपने आप में एक दमदार टाइपोग्राफ़िक रचना बन जाता है, और जिस बॉक्स को आप जान-बूझकर पतला और ऊँचा बनाते हैं वह टेक्स्ट को एक कॉलम में ढाल देता है. इस फ़िटिंग को डिज़ाइन के एक औज़ार की तरह इस्तेमाल करें; बस इसके ख़िलाफ़ डिज़ाइन न करें.

टाइमर - अनिवार्य, और यह एक एनिमेशन है

हर सवाल स्क्रीन पर एक टाइमर होता है; हॉल को दिखना चाहिए कि कितना समय बचा है.

टाइमर कोई गिनती करता हुआ अंक नहीं है, बल्कि एक एनिमेशन है जिसका प्लेहेड इंजन चलाता है. आप "भरे" से "खाली" तक की एक प्रगति डिज़ाइन करते हैं - खाली होती पट्टी, बंद होता छल्ला, रेत घड़ी, सिकुड़ती लकीर. इंजन उस एनिमेशन को ठीक उसी रफ़्तार से चलाता है जिससे आख़िरी फ़्रेम सवाल के अंत के साथ मिले.

इससे यह निकलता है:

• सवाल की अवधि तय नहीं होती. वह हर क्विज़ के लिए सेट होती है - अक्सर बीस से तीस सेकंड, लेकिन कम या ज़्यादा भी हो सकती है. आपका एनिमेशन उसमें बैठने के लिए खींचा या दबाया जाता है.
• कोई अंक नहीं, हर सेकंड की टिक भी नहीं. जो टाइमर "20, 19, 18…" गिनता है, वह अवधि बदलते ही सही नहीं रह जाता.
• आख़िरी सेकंड गेम के सबसे तनाव वाले पल होते हैं. अच्छा हो अगर प्रगति अंत की ओर ज़्यादा साफ़ या ज़्यादा ज़रूरी लगने लगे.
• हॉल के पिछले हिस्से से भी पढ़ी जा सके, एक नज़र में.
• कई टाइमर रखे जा सकते हैं. ऊपर एक पट्टी और सवाल के पास एक छल्ला, दोनों चलाए जाते हैं, बशर्ते हर एक का नाम timer हो.

टाइमर को कीफ़्रेम की एक श्रृंखला के रूप में दें या प्रगति के विवरण के रूप में - "पट्टी दाएँ से बाएँ खाली होती है और हरे से लाल हो जाती है" काफ़ी है.

उड़ती इमोजी हर चीज़ के ऊपर आकर गिरती हैं

हर खिलाड़ी जुड़ते समय एक इमोजी चुनता है, और गेम उन इमोजी को स्क्रीन पर उछालता है. इन्हें इंजन थीम के ऊपर की एक लेयर पर बनाता है. यहाँ आपके लिए डिज़ाइन करने को कुछ नहीं है - लेकिन इनके इर्द-गिर्द डिज़ाइन करने को ज़रूर कुछ है, क्योंकि ये कोई विरली सजावट नहीं हैं.

ये तीन पलों पर दिखती हैं:

• जब कोई खिलाड़ी जवाब देता है. उस खिलाड़ी की इमोजी किसी भी क्षैतिज जगह से नीचे के किनारे से ऊपर उठती है, एक चाप बनाती है और वापस फ़्रेम से बाहर गिर जाती है.
• जब कोई खिलाड़ी उसे उछालता है. खिलाड़ी अपनी इमोजी अपने फ़ोन से उछाल सकते हैं; कोण और रफ़्तार उँगली फेरने से आते हैं, और वह नीचे बीच से घूमती हुई निकलती है.
• जब आख़िरी उलटी गिनती में कोई स्थान खुलता है. नामित खिलाड़ी की इमोजी की बौछार: सामान्य स्थान के लिए बीस, तीसरे के लिए पचास, दूसरे के लिए पचहत्तर, और विजेता के लिए एक सौ पचास.

डिज़ाइन के लिए इसका मतलब यह है:

• रैंकिंग और विजेता स्क्रीन के निचले तिहाई हिस्से को छोटी या ज़रूरी हर चीज़ से ख़ाली रखें. उलटी गिनती के दौरान वहाँ नीचे सचमुच भीड़ हो जाती है.
• मान लें कि ये आपके रंग-संयोजन से टकराएँगी. ये Unicode तालिका के हर कोने से आई पूरे रंगों वाली इमोजी हैं, और कोई थीम इन पर काबू नहीं रखती. जो डिज़ाइन सिर्फ़ तंग रंग दायरे में टिकता है, वह उन सेकंडों में बेतरतीब लगेगा.
• जब तक कोई तस्वीर या वीडियो दिख रहा हो तब तक उछालना रोक दिया जाता है, इसलिए अटैचमेंट वाली स्क्रीन साफ़ रहती हैं.
• पूरी लेयर हर गेम के लिए बंद की जा सकती है, इसलिए ऐसी रचना भी न बनाएँ जो इनके मौजूद होने पर निर्भर हो.

फ़ॉन्ट

• फ़ॉन्ट एम्बेड किए जा सकने चाहिए. .ttf या .otf फ़ाइल चाहिए, और साथ में ऐसा लाइसेंस जो किसी एप्लिकेशन में एम्बेड करने की इजाज़त दे. जिस फ़ॉन्ट का लाइसेंस सिर्फ़ वेबफ़ॉन्ट के लिए है, या सिर्फ़ छपाई के लिए, उसे इस्तेमाल नहीं किया जा सकता. उससे डिज़ाइन करने से पहले यह जाँच लें; बाद में यह महँगा सुधार होता है.
• असामान्य रूप से बड़ी ऊपरी या निचली लंबाई वाले फ़ॉन्ट की भरपाई की जा सकती है, लेकिन अगर आप ऐसा कोई इस्तेमाल करें तो बता दें.

रंग एक सूची के रूप में

थीम एक कॉन्फ़िगरेशन फ़ाइल से रंगों की सूची पढ़ती है, और खिलाड़ियों के फ़ोन की स्टाइल भी उसी सूची से आती है. अपना रंग-संयोजन एक नाम वाली सूची के रूप में दें, सिर्फ़ आर्टवर्क में रंगों के रूप में नहीं:

कहाँ	रंग
गेम स्क्रीन	मुख्य रंग, एक्सेंट रंग, बैकग्राउंड, पैनल या कंटेनर का रंग, टाइमर का बैकग्राउंड, डिफ़ॉल्ट टेक्स्ट रंग, हेडर टेक्स्ट रंग, सवाल टेक्स्ट रंग, बटन टेक्स्ट, डायलॉग और व्याख्या का टेक्स्ट, खिलाड़ी के नाम और स्कोर का टेक्स्ट, सही के लिए रंग, ग़लत के लिए रंग
चार जवाब विकल्प	हर विकल्प के लिए: एक बैकग्राउंड रंग, एक किनारे का रंग, और फ़ोन और चार्ट के लिए एक सपाट रंग
खिलाड़ियों के फ़ोन	बैकग्राउंड, टेक्स्ट रंग, आउटलाइन रंग, विकल्प आउटलाइन रंग, और जवाब कंटेनर का बैकग्राउंड और टेक्स्ट रंग

गेम स्क्रीन पर ग्रेडिएंट चल सकते हैं: उन्हें दो हेक्स मानों के रूप में दें.

कुछ रंग उन हिस्सों पर आपका अकेला नियंत्रण हैं जिन्हें इंजन ख़ुद बनाता है, इसलिए इन्हें डिफ़ॉल्ट पर छोड़ने के बजाय सोच-समझकर तय करना चाहिए:

• सेपरेटर - पंक्तियों के बीच की लकीरें जहाँ पैनल नहीं है, और पॉइंट्स लैडर पर
• सवाल पिकर में किसी पंक्ति की सक्रिय, निष्क्रिय और चुनी गई अवस्थाएँ
• डायलॉग टेक्स्ट
• QR कोड का आगे और पीछे का रंग

अगर आप इन्हें छोड़ देते हैं तो ये अंदर से तय डिफ़ॉल्ट पर लौट जाते हैं - सफ़ेद, धूसर, लाल, काला और सफ़ेद - जो किसी डिज़ाइन से कम ही मेल खाते हैं.

QuizWitz लोगो

ख़ास डिज़ाइनों में QuizWitz लोगो शामिल होता है. उसके लिए ऐसी जगह रखें जहाँ वह डिज़ाइन के आड़े न आए.

---

क्या सौंपना है

स्रोत फ़ाइल - Illustrator बेहतर

थीम Adobe Animate में बनती है, और Animate क्या इम्पोर्ट कर सकता है, यही तय करता है कि आपका कितना काम सौंपे जाने के बाद भी सही-सलामत बचता है:

टूल	इम्पोर्ट पर क्या होता है	इसका इस्तेमाल किसके लिए करें
Adobe Illustrator (.ai)	Animate इसे सीधे इम्पोर्ट करता है और आपकी लेयर को Animate लेयर या अलग सिंबल में बदल देता है, लेयर के नाम बनाए रखता है और वेक्टर को संपादन योग्य छोड़ता है. यही वह क़दम है जो आर्टवर्क को हाथ से दोबारा बनाए जाने से बचाता है.	आख़िरी सौंपी जाने वाली फ़ाइल के लिए बेहतर
Adobe Photoshop	Illustrator की तरह अपनी लेयर सही-सलामत रखते हुए इम्पोर्ट होता है, लेकिन वेक्टर के बजाय रैस्टर देता है.	संभव
Figma	सब कुछ SVG और PNG एक्सपोर्ट से होकर जाता है, और ठीक वहीं यहाँ ज़रूरी लेयर संरचना खो जाती है. अगर आप फिर भी Figma इस्तेमाल करें, तो हर एलिमेंट अलग से SVG के रूप में दें, फ़ाइल के नाम लेयर के नामों से मिलते हुए, ताकि संरचना हाथ से दोबारा बनाई जा सके.	कॉन्सेप्ट का चरण, अगर आप उसमें तेज़ हैं

फ़ाइल की संरचना:

• हर स्क्रीन के लिए एक आर्टबोर्ड, ऊपर दिए फ़्रेमों के नाम पर.
• दोबारा इस्तेमाल होने वाले हिस्से (बटन, खिलाड़ी रो, जवाब विकल्प, टाइमर) सिंबल या कंपोनेंट के रूप में, अलग-अलग नक़लों के रूप में नहीं.
• लेयर के नाम अंग्रेज़ी में, बिना स्पेस के: question, option1 से option4 तक, timer, feedback, header, background, playerScore.
• रंग नाम वाले स्वैच के रूप में और टेक्स्ट नाम वाली स्टाइल के रूप में, हर वस्तु पर अलग से सेट करने के बजाय.

सौंपी जाने वाली चीज़ों की सूची

1. स्रोत फ़ाइल, ऊपर बताए ढंग से बनी हुई.
2. हर फ़्रेम PNG के रूप में, 1920 × 1080 - इस बात की मिसाल कि वह कैसा दिखना चाहिए. फ़्रेम 2 के लिए क्लाइंट लोगो वाला और बिना लोगो वाला, दोनों संस्करण.
3. एलिमेंट शीट एक आर्टबोर्ड के रूप में: कॉन्टेंट की बुनियादी इकाइयाँ और नियंत्रण.
4. हर अलग ग्राफ़िक एलिमेंट पारदर्शी PNG के रूप में 2× पर, एक ही फ़ोल्डर में, फ़ाइल का नाम लेयर के नाम से मिलता हुआ.
5. टाइमर कीफ़्रेम के रूप में या प्रगति के लिखित विवरण के रूप में.
6. फ़ॉन्ट .ttf या .otf के रूप में, लाइसेंस के प्रमाण के साथ.
7. रंग एक सूची के रूप में वाली रंगों की सूची, हेक्स मानों के रूप में.
8. आधे पन्ने के नोट्स: विचार क्या है, विकल्प कैसे दिखने चाहिए, क्या हिलता है और क्या स्थिर रहता है. दस पन्नों की डिज़ाइन व्याख्या नहीं - जो थीम बनाता है उसे यह जानना है कि क्या बनाना है. गति के सुझाव लिखकर बताए जा सकते हैं या मोटे एनिमैटिक के रूप में दिए जा सकते हैं.

काम का क्रम

1. फ़्रेम 4, सवाल स्क्रीन, एलिमेंट शीट के साथ. बाकी से पहले दोनों को मंज़ूर करवाएँ. इन दोनों में टाइमर, विकल्प, पैनल और हर नियंत्रण आ जाता है, इसलिए यही पूरी थीम की शैली तय करते हैं.
2. फ़्रेम 1 से 3. ये पहले दो से स्वाभाविक रूप से निकलते हैं.
3. फ़्रेम 6 से 8 सबसे आख़िर में आते हैं.

---

परिशिष्ट - सिंबल के नाम

पूर्णता के लिए, और उनके लिए जो ठीक-ठीक जानना चाहते हैं कि उनका आर्टवर्क कहाँ जाता है. काम करने के लिए आपको इसे पढ़ने की ज़रूरत नहीं है; ऊपर दिए आठ फ़्रेम और एलिमेंट शीट काफ़ी हैं. इन नामों को लेयर के नाम के रूप में इस्तेमाल करने से एक अनुवाद का क़दम बच जाता है.

फ़्रेम	सिंबल का नाम	ज़रूरी हिस्से
1. सामान्य फ़्रेम	GeneralPurposeScreen; GeneralPurposeScreenWithHeader वैकल्पिक	placeholder (कॉन्टेंट एरिया); title टेक्स्ट बॉक्स वैकल्पिक
1b. सवाल पिकर, लंबा सवाल	MultiQuestionScreen, LongQuestionScreen; दोनों वैकल्पिक, सामान्य फ़्रेम पर लौटते हैं	पिकर: questions प्लेसहोल्डर, timer; लंबा सवाल: question प्लेसहोल्डर
2. कनेक्ट स्क्रीन	PresentationConnectScreen; PresentationConnectScreenWithLogo वैकल्पिक, एक logo प्लेसहोल्डर के साथ	instructions.line1 से line5 तक, connectedPlayers; qrCode प्लेसहोल्डर के साथ फ़्रेम लेबल showQrCode वैकल्पिक
3. वेटिंग स्क्रीन	PendingScreen; PendingScreenWithLogo वैकल्पिक	header.text
4. सवाल स्क्रीन	QuestionScreen	question.text, timer, feedback.text, option1 से option4 तक, फ़्रेम लेबल showOptions और showFeedback
5. अटैचमेंट वाला सवाल	QuestionScreenAttachment	ऊपर की तरह, साथ में attachment.placeholder
5b. पूरी स्क्रीन वाला अटैचमेंट	AttachmentScreen	placeholder
6. जवाब स्क्रीन	AnswerPieScreen; AnswerPieScreenAttachment वैकल्पिक	option1 से option4 तक, answer.text, feedback.text
6b. ओपन सवाल का जवाब	AnswerScreen, AnswerOpenQuestionPieScreen; …Attachment रूप वैकल्पिक	answer.text, feedback.text, players, piechart
7. रैंकिंग	WinnerScreen + PlayerScore; WinnerScreen_round, WinnerScreen_game और PlayerScoreNoImage वैकल्पिक	header.text, players, feedback.text (playAgain.text वैकल्पिक); पंक्ति में: position, name, score, avatar वैकल्पिक
8. राउंड इंट्रो	किसी भी नाम के एक या अधिक सिंबल; कॉन्फ़िगरेशन फ़ाइल छहों कैटेगरी में से हर एक को एक सिंबल से जोड़ती है	-
-	LoadingScreen	text, progress
-	Button, Checkbox, Slider, QuestionSelect, Scrollbar, SettingsScreenScrollarea, SymbolCorrect, SymbolWrong, PackListItem	इनके लिए अपना आर्टवर्क नहीं चाहिए - ये उसी से बनते हैं जो आपके फ़्रेमों में दिखता है
-	IntroScreen, IntroScreenBranded, MenuScreen, SettingsScreen, AlertScreen, ActivityScreen, ActivityVotePieScreen	ये सिर्फ़ डेस्कटॉप ऐप में दिखते हैं, लाइव क्विज़ में नहीं. ये काम का हिस्सा नहीं हैं: इन्हें थीम टेम्प्लेट से लिया जाता है और आपके बैकग्राउंड और बटनों से नए सिरे से सजाया जाता है

मूल थीम के राउंड इंट्रो सिंबल के नाम RoundIntroScienceAndTech, RoundIntroFloraAndFauna, RoundIntroTedMusic, RoundIntroTedSport और RoundIntroTedCultHist हैं; कला और इतिहास आख़िरी वाला साझा करते हैं. इन नामों में आया "Ted" मूल थीम के किरदार का बचा हुआ अंश है और इसका मतलब यह नहीं कि उनमें कोई किरदार होना चाहिए.

जिस भी एलिमेंट के बाद .text लिखा है, वह एक फ़िट होने वाला टेक्स्ट बॉक्स है, जैसा टेक्स्ट कैसा बर्ताव करता है में बताया गया है: एक आयत जिसे इंजन ख़ुद भरता है. timer एलिमेंट अपनी टाइमलाइन वाला एक मूवी क्लिप है; इंजन उसके फ़्रेमों की गिनती पढ़ता है और बीते समय के अनुपात में प्लेहेड को चलाता है, सेकंड में ज़्यादा से ज़्यादा 24 बार.

कॉन्फ़िगरेशन फ़ाइल आपके डिज़ाइन से क्या लेती है

{
  "fontFiles": { "<body font>": "fonts/body.ttf", "<heading font>": "fonts/heading.ttf" },
  "fonts":  { "default": "<body font>", "header": "<heading font>" },
  "colors": {
    "_accent_": "#…", "_main_": "#…", "_background_": "#…-#…",
    "_container_": "#…", "_timerBackground_": "#…",
    "default": "#…", "header": "#…", "question": "#…",
    "buttons": "#…", "dialog": "#…", "player": "#…",
    "_optionColors_": [ { "background": "#…-#…", "border": "#…" } ]
  },
  "optionColors": [ "#…", "#…", "#…", "#…" ],
  "booleanResultColors": { "correct": "#…", "wrong": "#…" },
  "remoteColors": {
    "background": "#…", "text": "#…", "outline": "#…",
    "options-outline": "#…", "container-background": "#…", "container-text": "#…"
  },
  "roundIntros": { "science": "<symbol>", "nature": "<symbol>", "entertainment": "<symbol>",
                   "sports": "<symbol>", "art": "<symbol>", "history": "<symbol>" },
  "overlay": "light | dark"
}