Renderen van teksten in moderne browsers met behulp van HTML5

Maat: px
Weergave met pagina beginnen:

Download "Renderen van teksten in moderne browsers met behulp van HTML5"

Transcriptie

1 Renderen van teksten in moderne browsers met behulp van HTML5 Afstudeeronderzoek van Simon Karman bij Tingly Games Student Simon Karman Hogeschool van Amsterdam Alexander Mulder Tingly Games Mark Overmars

2 Renderen van teksten in moderne browsers met behulp van HTML5 Afstudeeronderzoek van Simon Karman bij Tingly Games Student Simon Karman S. J. Karman Student nr.: Telefoon nr.: Website: Hogeschool van Amsterdam Opleiding Informatica - richting Game Technologie Begeleidende docent: Alexander Mulder Tingly Games Westersingel 18-I 3014GP Rotterdam Begeleider: Mark Overmars Website: Periode 2 februari juni 2014, Studiejaar , Semester 2

3 Voorwoord Mijn naam is Simon Karman, vierdejaars student Technische Informatica, Game Technologie, aan de Hogeschool van Amsterdam. Dit onderzoeksrapport heb ik geschreven naar aanleiding van mijn onderzoek tijdens de afstudeerstage. In dit onderzoeksrapport beschrijf ik hoe ik het onderzoek heb aangepakt en wat mijn bevindingen hierbij zijn geweest. Ik heb de afstudeerstage uitgevoerd bij en in opdracht van Tingly Games. Ik wil de medewerkers van Tingly Games hartelijk bedanken voor de plezierige werksfeer tijdens mijn stageperiode. Daarnaast hoop ik dat mijn onderzoek bijdraagt aan een verdere ontwikkeling van het bedrijf. Veel plezier met het lezen van mijn verslag. Simon Karman zondag 1 juni

4 Inhoudsopgave RENDEREN VAN TEKSTEN IN MODERNE BROWSERS MET BEHULP VAN HTML5 2 AFSTUDEERONDERZOEK VAN SIMON KARMAN BIJ TINGLY GAMES 2 VOORWOORD 3 INHOUDSOPGAVE 4 SAMENVATTING 7 TERMEN 8 INLEIDING 10 RENDEREN VAN TEKSTEN IN MODERNE BROWSERS MET BEHULP VAN HTML DE CONTEXT VAN DE OPDRACHT TINGLY GAMES OPDRACHTAANLEIDING OPDRACHTOMSCHRIJVING OPDRACHTANALYSE PROBLEEMVRAAG DEELVRAGEN WERKWIJZE 12 2 ONDERZOEKSMETHODE KWALITEITSCRITERIA BESTAANDE IMPLEMENTATIE 15 3 VERKENNING VAN DE AANPAKKEN 16 4 ONDERZOEK VAN DE AANPAKKEN BITMAP FONT VECTOR FONT 17 5 DE KEUZE VOOR EEN AANPAK 19 6 ONTWERPFASE STRUCTUUR COMPTABILITEIT MET BESTAANDE VERSIES INLADEN BROWSER SPECIFIEKE EISEN VECTOR FONT EIGENSCHAPPEN TEKST BREEDTE CONTEXT WIJZIGINGEN TERUGDRAAIEN 25 7 REALISATIEFASE IMPLEMENTATIE DOCUMENTATIE GEBRUIK LETTERTYPEN 28 4

5 8 EFFICIËNTIE VECTOR FONT EFFECT SNELHEID VECTOR FONT VERSUS BITMAP FONT EN LOSSE CANVAS SNELHEDEN 33 9 WORD ART EFFECTEN API DEMO SITE GEBRUIK NIET-WESTERSE KARAKTERS 40 CONCLUDEREND OVERZICHT 41 BRONNENLIJST 42 BIJLAGEN 43 BIJLAGE A: TINGLY GAMES 43 BIJLAGE B: WEBSITE ARTIKEL SIMON KARMAN BIJ TINGLY GAMES 44 ACHTERGRONDINFORMATIE 44 WEBARTIKEL 44 BIJLAGE C: DE MEETWAARDEN VOOR DE KWALITEITSCRITERIA 45 1-BRUIKBARE TEKENSET 45 2-RENDERTIJD 45 3-BROWSER COMPATIBILITEIT 46 4-LAADTIJD 46 5-TOEPASSINGSMOGELIJKHEDEN 47 BIJLAGE D: MEETWAARDEN BITMAP FONT 48 BRUIKBARE TEKENSET 48 RENDERTIJD 48 BROWSER COMPATIBILITEIT 48 LAADTIJD 48 TOEPASSINGSMOGELIJKHEDEN 49 LEESBAARHEID 49 BIJLAGE E: MEETWAARDEN VECTOR FONTS 50 BRUIKBARE TEKENSET 50 RENDERTIJD 50 BROWSER COMPATIBILITEIT 50 LAADTIJD 50 TOEPASSINGSMOGELIJKHEDEN 51 LEESBAARHEID 51 BIJLAGE F: HET TBVECTORFONT PROTOTYPE 53 LOSSE PROTOTYPE 53 PROTOTYPE IN DE TINGLY BUILDER 55 BIJLAGE G: RENDERTIJD IN DE TESTOMGEVINGEN 58 TESTOMGEVING 1: TIJD PER CONFIG 58 TEST OMGEVING 2: FRAMES PER SECONDE 60 5

6 BIJLAGE H: CONTEXT SAVE/RESTORE EN TRANSFORMATIES SNELHEDEN 62 BIJLAGE I: VECTOR FONT LIBRARY DOCUMENTATIE 64 VECTOR FONT RESOURCE 64 TBVECTORFONT API 67 BIJLAGE J: TEKSTBREEDTE BIJ HET GEBRUIK VAN SPATIES 72 BIJLAGE K: VECTOR FONT EFFECT SNELHEID 73 DE PROFIELEN 73 DE STIJLEN 73 RESULTATEN 74 EXTRA 1: EXTERN ARIAL VS BUILD-IN ARIAL 78 EXTRA 2: FILLTYPEN 79 GLOBALE WAARNEMINGEN 80 BIJLAGE L: VECTOR FONT VERSUS BITMAP FONT EN LOSSE CANVAS SNELHEDEN 81 DE PROFIELEN EN STIJLEN 81 RESULTATEN 81 WAARNEMINGEN 83 BIJLAGE M: ANTI-ALIASING IN VERSCHILLENDE BROWSERS 84 WAARNEMINGEN 84 CONSLUSIE 85 BIJLAGE N: GECOMBINEERDE LETTERTYPEN 86 INLADEN 86 FALLBACK MECHANISME 86 TOEPASBAARHEID 87 BIJLAGE O: SKEW TRANSFORMATIES OP DE CANVAS 88 BIJLAGE P: WORDART DOCUMENTATIE 90 WORDART 90 TBWORDART NAMESPACE 90 KIND 90 CHARINFO OBJECT 92 PRESETS 92 CHANGERS 93 BIJLAGE Q: STROKE ARTIFACTS 94 DE OPLOSSING 94 SNELHEIDSTEST 94 BIJLAGE R: NIET-WESTERSE KARAKTERS 96 LOKALISATIE TOOL 96 TINGLY BUILDER 96 BROWSERS 96 6

7 Samenvatting Tingly Games is een bedrijf dat spellen ontwikkelt. De spellen worden ontwikkeld in een relatieve nieuwe omgeving: HTML5. Tingly Games wil graag meer controle over het gebruik van teksten in deze omgeving. Het doel van dit onderzoek is om hiervoor de beste aanpak te vinden. De volgende onderzoeksvraag is opgesteld naar aanleiding van de vraag van Tingly Games: Wat is, volgens de samen met Tingly Games op te stellen kwaliteitscriteria, de beste aanpak om teksten te renderen voor het gebruik in de HTML5 engine van Tingly Games? Op basis van de resultaten en conclusies van dit onderzoek kan worden gesteld dat vector fonts het best aan de kwaliteitscriteria van Tingly Games voldoen. Mark Overmars (de CTO) heeft hiermee ingestemd. Andere werknemers, waaronder developers en artists waren ook erg enthousiast over de mogelijkheden met het gebruik van vector fonts. Nadat duidelijk was dat vector fonts gebruikt moeten kunnen worden, was het zaak te beginnen aan een ontwerp voor een vector font library. De API van deze library heeft een eenvoudig te gebruiken structuur gekregen en is consistent gehouden met eerdere versies van de font library. Daarnaast laadt de library voor de browser onbekende lettertype in en ondersteunt de library alle vector font eigenschappen die standaard door HTML5 worden ondersteund. Deze library is vervolgens gerealiseerd en door Tingly Games in gebruik genomen. Na gebruik zijn nog enkele kleine aanpassingen gemaakt naar aanleiding van feedback. Deze feedback ging over de werking en het gebruiksgemak voor andere developers. Ook is er documentatie geschreven op basis van de API en het gebruik van lettertypen in browsers. Na de implementatie is er gekeken naar de snelheid van het gebruik van vector fonts. Onderzocht is de snelheid van het tekenen van de tekst bij verschillende eigenschappen. Ook is de library vergeleken met de vorige font implementatie die door Tingly Games werd gebruikt. Op basis van deze resultaten is een bedrijfspresentatie gegeven en zijn tips opgesteld voor het gebruik van de library. Naast dat de standaard HTML5 eigenschappen worden ondersteund is het ook erg interessant om handmatig effecten mogelijk te maken. Hiervoor zijn de mogelijkheden binnen HTML5 onderzocht. Vervolgens is een losse library geschreven waarmee deze mogelijkheden door middel van een eenvoudige API kunnen worden toegepast. Hierbij is een demo website ontwikkeld. Een van de aanleidingen voor dit onderzoek was dat Tingly Games graag ziet dat de engine waarmee de games ontwikkeld worden het gebruik van niet-westerse karakters kan ondersteunen. Om nietwesterse karakters te ondersteunen zijn alle stappen in het ontwikkelingsproces binnen Tingly Games doorgelopen zodat elke stap ondersteuning biedt aan het gebruik van niet-westerse karakters. Het eindresultaat voldoet uitstekend aan de wensen van Tingly Games. Mijn product is direct en enthousiast in gebruik genomen. In alle lopende projecten is mijn product toegevoegd. Ook in projecten die in de toekomst gemaakt zullen worden, zal mijn product verwerkt zitten. Een erg mooi, leerzaam en bruikbaar eindresultaat van een geslaagd afstudeeronderzoek. 7

8 Termen In dit onderzoekrapport zal worden onderstaande termen veel gebruikt. Om mijn onderzoek te goed kunnen volgen is het van belang dat deze termen voor de lezer duidelijk zijn. Wanneer een term niet duidelijk is, staat hieronder de betekenis binnen de context van mijn onderzoek. Tingly Games Tingly Games is het bedrijf waar ik mijn onderzoek heb uitvoerd. Er werken ongeveer acht mensen en het bedrijf is gevestigd in Rotterdam. Meer informatie is te vinden op Greeting Games Greeting Games is (op het moment van schrijven) de enige dienst die Tingly Games levert. Eenvoudig gezegd is een Greeting Game een combinatie van een wenskaart en een leuk spelletje. Greeting Games wenskaarten zijn er voor iedere gelegenheid. Je kunt ze bijvoorbeeld verzenden als kaart voor Valentijnsdag. Je kunt ze versturen als verjaardagskaart of beterschapkaart. Je kunt ze gebruiken als bedankje, felicitatie, of uitnodiging. Je kunt er bijvoorbeeld je vrienden mee uitnodigen voor een feest, een verjaardag, of een date. De Greeting Games bevatten populaire spellen. Denk hierbij aan bubbleshooters, matchers, slicers, mahjong, sudoku, woordzoekers, legpuzzels en nog veel meer. Meer informatie is te vinden op Tingly Builder Tingly Builder is het door Tingly Games ontwikkelde programma waarin HTML5 spellen kunnen worden opgebouwd en geconfigureerd. De Greeting Games worden met gebruik van de Tingly Builder ontwikkeld. De Tingly Builder is opgezet door Mark Overmars en hij onderhoud deze ook. De Tingly Builder bevat uitgebreide documentatie en de game programmeurs hebben een eigen framework opgezet in de Tingly Builder. Framework De werkomgeving in de Tingly Builder waarbinnen de Greeting Games worden ontwikkeld. Het framework is gebouwd op de functionaliteit van de engine en voegt hier Greeting Games specifieke functionaliteit aan toe. Engine De engine is de javascript code die wordt gebruikt door de Tingly Builder en waarmee de HTML5 spellen worden gegenereerd. Mijn code zal worden opgenomen als onderdeel van de engine. HTML5 HTML5 (HyperText Markup Language 5) is de nieuwste, nog onafgewerkte versie van de HTMLstandaard 1. In HTML5 zitten een aantal nieuwe functionaliteiten. Deze nieuwe functionaliteiten worden door Tingly Games gebruikt om games te kunnen maken die draaien op een webpagina in de verschillende browsers. 1 8

9 Het feit dat HTML5 werkt via de browser, garandeert brede ondersteuning voor pc, tablet en telefoon. Canvas De canvas is een nieuwe feature die HTML5 aanbiedt. De canvas is voor dit onderzoek de belangrijkste nieuwe feature van HTML5. De canvas wordt gebruikt voor het maken van interactieve omgevingen op een webpagina. De engine gebruikt het canvas element om de games in een webpagina te kunnen renderen. Renderen (van tekst) Renderen is het proces waarin een datamodel wordt omgezet in een afbeelding 2. In de context van deze opdracht kan het renderen worden gezien als het tekenen van tekst op het scherm. Karakter Een letter of letterteken. Voorbeelden van karakters zijn letters, cijfers, leestekens, chinese karakters en symbolen. Font Een font (Engels voor schrift) beschrijft een tekenset door middel van een visuele representatie van een groep karakters 3. Er zijn drie soorten fonts: Bitmap font; Vector font (ook wel Outline font); Stroke font. Deze types verschillen in de manier waarop de karakters door de computer worden gerenderd. Bitmap: De karakters zijn gedefinieerd als pixel plaatjes. Deze kunnen direct naar het scherm worden gerenderd, maar kunnen bijvoorbeeld niet mooi worden geschaald of geroteerd. Vector: De karakters zijn gedefinieerd als een mathematische formule voor de omlijning van het karakter. De karakters kunnen op elke grote worden geschaald maar moeten wel eerst worden omgezet naar een pixel plaatje voordat ze kunnen worden gerenderd op het scherm. Stroke: De karakters zijn gedefinieerd als een collectie van lijnen en een penprofiel. Deze lijnen worden vervolgens gerenderd door middel van het penprofiel. Library Een library (Engels voor bibliotheek) is een verzameling code (functies en routines). API Een API (application programming interface) is een interface die door programmeurs wordt gebruikt om met een library te kunnen werken. Een library is een verzameling van functionaliteit en code. De API is de manier waarop de programmeur deze library kan gebruiken. Een API is een abstracte laag op de library waardoor gebruikers makkelijk van de library gebruik kunnen maken

10 Inleiding HTML5 is in opkomst. Er is vanuit de industrie steeds meer interesse in het gebruik van deze technologie bij het maken van games. Op deze interesse is adequaat ingespeeld door Tingly Games. Tingly Games is een game ontwikkeling bedrijf dat december 2012 is opgericht. Sindsdien heeft het bedrijf zich gespecialiseerd in het maken van games in HTML5. Ik zocht een uitdagende en vernieuwende onderzoeksopdracht voor mijn afstudeerscriptie. De onderzoeksopdracht die Tingly Games me aanbood voldeed hieraan. Het gebruik van deze nieuwe technologie in combinatie met het leren van de voor mij onbekende taal JavaScript sprak me erg aan. Tingly Games ziet meer mogelijkheden met het gebruik van teksten in de games die ze maken. Daarnaast ziet Tingly Games graag dat de engine in de toekomst het gebruik van niet-westerse karakters ondersteunt. Dit geeft aanleiding tot het vinden van een nieuwe manier om teksten te renderen in HTML5 en die toe te passen in de engine van Tingly Games. De onderzoeksvraag die hieruit kan worden opgesteld is de volgende: Wat is, volgens de samen met Tingly Games op te stellen kwaliteitscriteria, de beste aanpak om teksten te renderen voor het gebruik in de HTML5 engine van Tingly Games? Om deze onderzoeksvraag te beantwoorden moeten eerst de mogelijke aanpakken op een rijtje worden gezet. Vervolgens moet op basis van de met Tingly Games op te stellen kwaliteitscriteria een keuze gemaakt voor de beste aanpak. Deze aanpak moet vervolgens uitgewerkt worden tot een product dat binnen Tingly Games inzetbaar is. Dit onderzoeksrapport laat zien hoe de kwaliteitscriteria tot stand komen, welke aanpakken er worden geanalyseerd en welke keuzes er tijdens de ontwerp- en realisatiefase van het product gemaakt worden. 10

11 Renderen van teksten in moderne browsers met behulp van HTML5 1 De context van de opdracht 1.1 Tingly Games Dit onderzoek is uitgevoerd bij Tingly Games. Tingly Games opereert internationaal. Het bedrijf heeft momenteel acht medewerkers in dienst. Daarnaast werken er ook een aantal stagiaires en een aantal freelancers. Zie Bijlage A: Tingly Games voor de bedrijfsstructuur. Tingly Games biedt een dienst aan genaamd Greeting Games (www.greetinggames.com). Greeting Games zijn een blend van elektronische wenskaarten en digitale games. Het geeft mensen de mogelijkheid om gepersonaliseerde games met een geïntegreerde wens naar hun vrienden te verzenden. Alle games worden ontwikkeld in HTML5 zodat ze ook op mobiele apparaten goed te spelen zijn. 1.2 Opdrachtaanleiding In de toekomst wil Tingly Games haar games ook in Aziatische talen aan gaan bieden. Momenteel maken alle producten die Tingly Games ontwikkelt gebruik van het Westerse schrift. De games kunnen eenvoudig gelokaliseerd worden in verschillende talen. Het gebruik van niet westerse karakters wordt met de huidige technologie die Tingly Games gebruikt niet ondersteund. Tingly Games wil dat de engine waarmee de games ontwikkeld worden het gebruik van niet-westerse karakters in de toekomst wel zal ondersteunen. Daarnaast ziet Tingly Games graag meer mogelijkheden met de te weergeven tekst. 1.3 Opdrachtomschrijving Er moeten geschikte aanpakken gevonden worden voor het renderen van teksten binnen HTML5 voor het gebruik in de engine van Tingly Games. Dit bekent dat er samen met Tingly Games kwaliteitscriteria moeten worden opgesteld. Uit de gevonden aanpakken moet op basis van deze kwaliteitscriteria de beste aanpak worden gekozen. De gekozen aanpak moet vervolgens uitgewerkt en geïmplementeerd worden. 1.4 Opdrachtanalyse De opdracht is een onderzoek gericht op een onderbouwde keuze van een aanpak. Dit onderzoek zal uit twee delen bestaan. Deel een is het in kaart brengen van mogelijke aanpakken. Deel twee is de beoordeling welke aanpak het beste voldoet aan de kwaliteitscriteria van Tingly Games. Na het uitvoeren van het onderzoek zal de beste aanpak worden uitgewerkt en geïmplementeerd. Het product dat dit oplevert zal worden opgenomen in de engine. 1.5 Probleemvraag Wat is, volgens de samen met Tingly Games op te stellen kwaliteitscriteria, de beste aanpak om teksten te renderen voor het gebruik in de HTML5 engine van Tingly Games? 11

12 1.6 Deelvragen Wat zijn de kwaliteitscriteria voor de keuze van een aanpak? Hoe is het renderen van teksten op dit moment binnen de engine geïmplementeerd? Wat zijn de mogelijke aanpakken voor het renderen van teksten binnen HTML5? Wat is op basis van de opgestelde kwaliteitscriteria de beste aanpak? 1.7 Werkwijze De developers bij Tingly Games hebben hun eigen werkwijze ontwikkelt. Bij deze werkwijze horen tools en is gekozen voor een bepaalde software ontwikkelmethode. Hieronder is weergegeven hoe het bij Tingly Games in z n werk gaat Tools Bij Tingly Games worden de volgende tools gebruikt: BitBucket Notepad++ JIRA FileZilla Tingly Builder Voor versie beheer van de code Voor het schrijven van code Voor het bijhouden van taken en bugs Voor het uploaden van games naar het web Tool voor het maken van HTML5 games. Deze tool is door Tingly Games ontwikkeld Software ontwikkelmethode Bij Tingly Games wordt gewerkt met een agile sofware ontwikkelmethode. Deze methode heeft veel raakvlakken met de SCRUM methode. Bij Tingly Games wordt niet geheel volgens SCRUM gewerkt, maar met een variatie hierop. Ik werk bij Tingly Games aan een losstaande opdracht. Het ontwikkelteam waar ik deel van uit maak bestaat daardoor alleen uit mijzelf. Mark is de SCRUM master van dit team. Het is niet nodig om dagelijkse standups te houden. Aangezien dit een eenmansteam is, weet iedereen binnen het team waar de rest van het team mee bezig is. Wel is er elke maandag ochtend een standup met het hele bedrijf. Ook vindt er om de twee a drie weken een retrospective plaats met het team en de SCRUM master. Hierin wordt het functioneren van het team in de afgelopen sprint besproken. Direct na elke retrospective wordt een sprintplanning gehouden. Tijdens de sprintplanning worden de werkzaamheden op basis van de productbacklog ingepland. Aangezien dit een eenmansteam is, is er voor gekozen om bij elke sprint maar één nieuwe user story op te pakken. Daarnaast is er tijdens elke sprint tijd om aan mijn scriptie te werken. Verder vindt er uiteraard communicatie plaats binnen het bedrijf. Deze communicatie met andere programmeurs en artists vindt plaats wanneer ik informatie nodig heb van anderen of anderen van mij. 12

13 2 Onderzoeksmethode In de onderzoeksmethode worden de deelvragen concreet gemaakt. Dit gebeurt door het opstellen van de kwaliteitscriteria, het beoordelen van de huidige implementatie en het documenteren en beoordelen van mogelijke aanpakken. 2.1 Kwaliteitscriteria Om goed te kunnen beoordelen welke aanpak de beste aanpak is, is het van belang dat de aanpakken op basis van duidelijke kwaliteitscriteria worden beoordeeld. Deze kwaliteitscriteria moeten uiteraard gebaseerd zijn op de visie van Tingly Games. De aanpakken zullen op basis van de volgende criteria worden beoordeeld: 1- Bruikbare tekenset; 2- Rendertijd; 3- Browser compatibiliteit; 4- Laadtijd; 5- Toepassingsmogelijkheden; 6- Leesbaarheid. De criteria zijn geprioriteerd op mate van belang voor het eindproduct. De prioritering loopt van meest belangrijk (bovenaan) tot minst belangrijk (onderaan). Een hogere prioriteit betekend echter niet dat een eventueel slecht scorend criterium met een lagere prioriteit niet mee weegt. De prioritering kan meer gezien worden als een richtlijn bij het kiezen tussen vergelijkbare aanpakken. Hieronder staat per criterium een toelichting. De toelichting bevat de betekenis van het criterium, hoe het criterium de algehele kwaliteit van de aanpak beïnvloedt en de aspecten van het criterium waar aan getoetst moet worden bij de beoordeling. De meetwaarden per criterium zijn te vinden in Bijlage C: De meetwaarden voor de kwaliteitscriteria. Hierbij staat ook de scoringstabel beschreven. 1-Bruikbare tekenset De bruikbare tekenset is de hoeveelheid karakters die wordt ondersteund wanneer deze aanpak wordt toegepast. Elk font heeft een bruikbare tekenset. Daarnaast zal elke aanpak toegang geven tot de gehele of tot een deel van een bruikbare tekenset van een font. Hoe meer karakters de tekenset bevat hoe beter dit is voor de kwaliteit van de aanpak. Dit criterium staat boven aan de prioriteitenlijst, omdat het toegankelijk maken van niet-westerse karakters de aanleiding is van dit onderzoek. 2-Rendertijd De tekst zal bij de gebruiker gerenderd moeten worden op het scherm. Welke aanpak er ook wordt gebruikt, bij elke aanpak is er sprake van het renderen op de HTML5 canvas. En dit kost tijd. Hoe sneller de tekst gerenderd kan worden hoe beter dit is voor de kwaliteit van de aanpak. Dit criterium staat als tweede in de prioriteitenlijst, omdat het erg belangrijk is dat de producten niet te traag worden. De producten moeten snel genoeg zijn om te draaien in browsers op bijvoorbeeld een trage mobiele telefoon. 13

14 3-Browser compatibiliteit De HTML5 games draaien op veel verschillende apparaten. Het is belangrijk dat de aanpak op zoveel mogelijk van deze apparaten en bijbehorende browsers compatibel is. Hoe meer browsers er zijn waarop de aanpak werkt, hoe beter dit is voor de kwaliteit van de aanpak. Daarnaast moet er op gelet worden dat de browsers die de aanpak niet ondersteunen wel een logische en duidelijke terugvalmethode hebben. Op deze terugvalmethode kan de engine terugvallen wanneer de aanpak niet werkt. Aangezien we met HTML5 werken, hoeven we alleen versies van browsers te testen vanaf het moment dat ze het canvas element van HTML5 ondersteunen. Ondersteunt de browser het gebruik van de canvas niet, dan kunnen we deze browser buiten beschouwing laten. 4-Laadtijd De laadtijd is de tijd die de aanpak nodigt heeft voordat er gebruik van kan worden gemaakt. Deze tijd kan uit meerdere onderdelen bestaan. Een van de onderdelen is de downloadtijd. De downloadtijd is de tijd die het kost om de benodigde bestanden bij de gebruiker te krijgen. Hoe groter de benodigde bestanden hoe langer dit duurt. Daarnaast kan het zijn dat de browser of server verwerkingstijd heeft. Deze verwerkingstijd is ook onderdeel van de laadtijd. Hoe korter de laadtijd hoe beter dit is voor kwaliteit van de aanpak. 5-Toepassingsmogelijkheden De gerenderde tekst moet goed toepasbaar zijn binnen een game. Dit criteria definieert extra features die handig zijn als ze werken. Elke feature is een pluspunt. Hoe meer features haalbaar zijn, hoe beter dit is voor de kwaliteit van de aanpak. Features waar naar gekeken wordt zijn: Het schalen van tekst, het verkleuren van tekst en het renderen van schaduwen achter de tekst. 6-Leesbaarheid De leesbaarheid van de tekst is de mate waarin de tekst op lagere resoluties leesbaar blijft. De gebruiker kan de tekst bijvoorbeeld via mobiele apparaten op kleine beeldschermen bekijken. Het is belangrijk dat de tekst in deze situaties leesbaar blijft. 14

15 2.2 Bestaande implementatie Op dit moment is er al een implementatie van een Font systeem in de engine aanwezig. Om van dit systeem te kunnen leren, en om ook de tekortkomingen van dit systeem te kennen, is het belangrijk om de bestaande implementatie in kaart te brengen. Figuur 1: Bestaande implementatie In Figuur 1 is te zien hoe de bestaande implementatie eruit ziet. In de bestaande implementatie geef je aan welk font je wilt gebruiken en welke karakters je nodig hebt. Vervolgens worden alle karakters op een grote afbeelding geplaatst. De rode rechthoeken geven de randen van de karakters aan. De rode lijn onder in deze rechthoek geeft de baseline van de tekst weer. Wanneer je een karakter op het scherm wilt renderen wordt simpelweg het bijbehorende gedeelte van deze afbeelding op het scherm gerenderd. Bij het renderen van een stuk tekst wordt steeds een los karakter naast het vorige gerenderd. Via deze vorm zijn ook breedtemetingen, kerning, spacing en alignment geïmplementeerd. Daarnaast is het ook mogelijk om de tekst te schalen en te roteren. Dit gebeurt doormiddel van het aanpassen van de canvas matrix. De bestaande implementatie is een toepassing van bitmap fonts. 15

16 3 Verkenning van de aanpakken Het is nu duidelijk op basis van de welke kwaliteitscriteria de aanpak wordt beoordeeld. Ook is de huidige situatie bekend. De volgende stap is het opsommen van de mogelijke aanpakken. In HTML5 zijn er twee mogelijke aanpakken. Namelijk de bitmap font aanpak en de vector font aanpak. Bij de bitmap font aanpak zijn afbeeldingen van de verschillende karakters opgeslagen. Bij het renderen van een stuk tekst wordt steeds een losse karakterafbeelding naast de vorige karakterafbeelding gerenderd door de browsers. De huidige implementatie maakt gebruik deze aanpak. Bij de vector font aanpak wordt het renderen van de tekens gedaan vanuit een mathematische formule voor de omlijning van de karakters. De browsers maken hierbij gebruik van lettertypebestanden waarin deze omlijning staat gedefinieerd. Deze definitie is grootte onafhankelijk. 16

17 4 Onderzoek van de aanpakken Nu de mogelijke aanpakken bekend zijn zullen de kwaliteitscriteria hieronder per aanpak doorlopen worden. 4.1 Bitmap font De bruikbare tekenset van deze implementatie is beperkt tot een (relatief) kleine selectie die in de Tingly Builder moet worden gespecificeerd. Ook kunnen de karakters alleen in de kleur en grootte op het scherm worden weergeven zoals aangegeven in de Tingly Builder. Hoe meer karakters hoe groter de gegenereerde bitmap van het font en dus hoe langer het duurt om het font te downloaden. Daarnaast moet voor elke tekstkleur een aparte bitmap worden gegenereerd. Dit geldt ook voor elke tekstgrootte. Niet-westerse schriften bevatten veel karakters en vergt dus veel karakterafbeeldingen. Wanneer een niet-westers schrift in deze implementatie wordt opgenomen, zal het bitmap font daarom vele malen groter worden. Bij het renderen van tekst wordt (een gedeelte van) een afbeelding op het scherm getekend. Alle browsers die HTML5 en de canvas ondersteunen kunnen hiermee omgaan. Ook kunnen alle browsers zien wanneer een afbeelding geladen is. Hierdoor is er een consistente terugvalmethode te maken. Zie Bijlage D: Meetwaarden bitmap font voor de meetwaarden. Bruikbare tekenset Latin-only, karakters - Rendertijd 0,205ms + Browser compatibiliteit 82,5% ++ Laadtijd 0,6s +/- Toepassingsmogelijkheden 1 punt +/- Leesbaarheid + Eindoordeel +/- 4.2 Vector font Bij het gebruik van vector fonts worden de karakters beschreven door het uiterlijk van de randen van de karakters. De randen worden op het moment van renderen omgezet naar pixels. Deze pixels worden vervolgens op het scherm weergeven. Wanneer een font een karakter niet bevat zal worden terug gevallen op een fallback font waarin het karakter wel is opgenomen. Hierdoor kunnen alle karakters worden gerenderd. Het renderen van een vector font gaat erg snel. Het renderen van een woord gaat ongeveer drie keer zo snel met een vector font dan wanneer dit met een bitmap font wordt gedaan. De vector font bestanden waar het vector font in beschreven staat zijn.woff bestanden. Deze bestanden worden door alle moderne browsers ondersteund. De.WOFF bestanden zijn vrij klein en er is zeer weinig fontspecifieke code nodig. Daardoor gaat het laden snel. Ook zijn er veel toepassingsmogelijkheden bij het gebruik van vector fonts. Zo is het makkelijk om de tekst te schalen, te kleuren en er effecten op toe te passen. 17

18 Zie Bijlage E: Meetwaarden vector fonts voor de meetwaarden. Bruikbare tekenset Alle UNICODE karakters, karakters Rendertijd 0,065ms ++ Browser compatibiliteit 77,0% + Laadtijd 0,18s ++ Toepassingsmogelijkheden 3 punten ++ Leesbaarheid + Eindoordeel ++ Er zijn meerdere aspecten die moeten worden uitgezocht wanneer de vector fonts worden uitgewerkt. Hieronder licht ik drie aspecten kort toe: Elk font heeft een fallback font. Het is goed om te weten welke fonts op praktisch elke browser zijn geïmplementeerd. Deze fonts noemen we websafe fonts. De websafe fonts worden verderop in dit onderzoek op een rijtje gezet. Voor het gebruik van de.woff bestanden van een font moet duidelijk zijn dat deze bestanden legaal gebruikt en gedistribueerd. Wanneer de vector font aanpak wordt gekozen vergt dit verder onderzoek. Lettertypebestanden die binnen Tingly Games worden gebruikt zijn.ttf en.otf bestanden. Wanneer de vector font aanpak wordt gekozen, moeten deze bestanden door de engine worden omgezet naar.woff bestanden. Binnen de engine is voor deze conversie een tool nodig. 18

19 5 De keuze voor een aanpak De aanpakken zijn onderzocht. Er zijn nu meetresultaten op basis van de kwaliteitscriteria beschikbaar. Met deze informatie kan er een keuze worden gemaakt voor de aanpak die gebruikt moet gaan worden. De meetresultaten zijn vrij overweldigend in het voordeel van de vector fonts. De belangrijkste reden is dat er een grotere tekenset bruikbaar is. Daarnaast is de rendertijd een factor drie korter en de laadtijd is ook een factor drie korter. Ook zijn er een veel verschillende toepassingsmogelijkheden. Deze uitgebreidere mogelijkheden voor het renderen van tekst bieden nieuwe uitdagingen en mogelijkheden voor de artists en de developers. Er zijn vanzelfsprekend ook een aantal nadelen aan het gebruik van vector fonts. Zo kunnen vector fonts niet met de hand worden aangepast en opgemaakt. Ook is de browser compatibiliteit minder volledig. Dit houdt in dat er voor een aantal browsers uitzonderingen gemaakt moeten worden. Zo zijn er meerdere bestanden nodig om voor verschillende browsers de fonts te kunnen ondersteunen. Ook hangt de kwaliteit van de tekst af van de browser die wordt gebruikt. Kijkend naar deze voor en nadelen en naar de onderzochte kwaliteitscriteria concludeer ik dat de vector font aanpak de beste is. Vanwege deze conclusie is in overleg met Mark Overmars afgesproken dat vector font aanpak uitgewerkt zal worden. Er zitten nog wel enkele voordelen aan het gebruik van bitmap fonts. Ook maakt de huidige implementatie gebruik van deze techniek. Om van deze voordelen gebruik te kunnen blijven maken en oude projecten die de huidige techniek gebruik te blijven ondersteunen wordt de huidige bitmap font implementatie ook in stand te houden. 19

20 6 Ontwerpfase De keuze is gevallen op een vector font aanpak. In dit deel van het onderzoek staan de ontwerpeisen en bijbehorende ontwerpkeuzes uitgelegd en beargumenteerd. Dit laat zien hoe de aanpak moet worden ontworpen. Het product dat moet wordt ontworpen is een codebibliotheek die het gebruik van vector fonts mogelijk maakt voor de developers bij Tingly Games. De codebibliotheek wordt vector font library of simpelweg library genoemd. De belangrijkste eis aan het ontwerpen van de library is dat de developers binnen Tingly Games de library moeten kunnen gebruiken. Om hiervoor te zorgen is het belangrijk dat de structuur van de library overeenkomt met de structuur van andere delen van de engine. Daarnaast moet de library de standaard functionaliteit die de HTML5 canvas aan teksten biedt ondersteunen. De ontwerpkeuzes die gemaakt zijn om deze eisen te bereiken worden in onderstaande paragrafen uitgelegd. Tijdens het uitwerken van de ontwerpkeuzes zijn twee prototypen ontstaan. Deze staan beschreven in Bijlage F: Het tbvectorfont Prototype. 6.1 Structuur De twee objecten die de library bevat zijn het tbvectorfont object en het tbvectorfontloader object. De namen van de objecten in de engine hebben allemaal de tb prefix. Dit staat voor Tingly Builder. De naam van de resource in de Tingly Builder is VectorFont resource. tbvectorfont object Het tbvectorfont object is het object waarmee teksten op het scherm gerenderd kunnen worden. Vaak wil je eigenschappen hergebruiken bij het renderen van meerdere stukken tekst. Zo wil je misschien met hetzelfde lettertype titels en teksten renderen. Hiervoor gebruik je meerdere tbvectorfont objecten. Deze objecten gebruiken hetzelfde lettertype, maar overige eigenschappen kunnen verschillen. Een tbvectorfont is dus iets anders dan een lettertype. Een tbvectorfont is een staat van eigenschappen (waaronder het lettertype) en een collectie render-routines. 20

21 tbvectorfontloader object Het tbvectorfontloader object is een object dat het inladen van een lettertype voor z n rekening neemt. De tbvectorfontloader zorgt ervoor dat een lettertype door de browsers wordt ingeladen voor het gebruik in de HTML5 canvas. Dit object wordt door de engine aangemaakt en door de developer niet gebruikt. Een tbvectorfontloader object heeft een naam. Deze naam is de naam van het lettertype. Meerdere tbvectorfont objecten kunnen hetzelfde tbvectorfontloader lettertype gebruiken door de zelfde naam te gebruiken. Er kunnen dus meerdere tbvectorfont objecten worden gemaakt op basis van een enkel tbvectorfontloader object. Het gebruik van een tbvectorfontloader is optioneel. Een tbvectorfont kan als lettertype de naam van een websafe font bevatten. Voorbeelden zijn Arial en Helvetica. Ook de standaard browserwaarden sans-serif, serif, monospace, script en fantasy kunnen hier worden gebruikt. De naam van het lettertype van een tbvectorfont wordt in de code het fontface genoemd. VectorFont resource Een developer kan een nieuwe VectorFont resource aanmaken in de Tingly Builder. Een VectorFont resource kan een van de volgende opbouwen hebben: Een combinatie van een tbvectorfont en een tbvectorfontloader object. Deze opbouw wordt gebruikt wanneer een nieuw lettertype wordt toegevoegd en er van dit lettertype meteen een tbvectorfont object aanwezig moet zijn. Het tbvectorfontloader object zorgt dat het nieuwe lettertype wordt geladen. Het tbvectorfont object is een instantie die van dit lettertype gebruikt maakt. Alleen een tbvectorfont object. Deze opbouw wordt gebruikt wanneer je een bestaand lettertype wilt gebruiken en hiervan een nieuwe tbvectorfont instantie wilt maken. Een bestaand lettertype is vaak een websafe font (zoals Arial), maar kan ook de naam zijn van een andere VectorFont Resource. Alleen een tbvectorfontloader object. Deze opbouw gebruik je wanneer je een lettertype wilt inladen, maar hierbij geen tbvectorfont object wilt maken. 6.2 Comptabiliteit met bestaande versies Het moet mogelijk zijn om in bestaande projecten een bitmap font te kunnen verwisselen door een vector font. Hiervoor is het van belang dat de eigenschappen en routines van een bitmap font het zelfde werken in de vector font implementatie. Een bitmap font heeft de volgende eigenschappen: Align Baseline Spacing Tracking De functionaliteit van deze eigenschappen moet binnen een vector font hetzelfde werken. Voor Align, Baseline en Spacing is dit geen probleem. Het toepassen van Tracking is echter niet mogelijk met de standaard HTML5 canvas. In overleg met Mark Overmars is besloten de Tracking functionaliteit niet meer te ondersteunen voor vector fonts. 21

22 6.3 Inladen Alle resources in de engine die externe gegevens moeten inladen, of vanwege een andere oorzaak meer laadtijd hebben, maken gebruik van het tbloader object. Dit tbloader object houdt bij welke resources klaar zijn met laden. Dit kan succesvol zijn afgerond of niet succesvol zijn afgerond. De tbloader houdt daarnaast bij op welk moment de resources geladen moeten worden. Een vector font moet externe gegevens downloaden en deze gegevens vervolgens in de browser inladen. Om deze reden gaat een vector font gebruik maken van de tbloader. Van een vector font is niet bekend wanneer het succesvol geladen is. Om te checken of een font is geladen is wordt gekeken of de breedte van een getekende tekst in een standaard font verschilt van de breedte van het zelfde stukje tekst getekend met het te laden font. Is het font geladen dan heeft het stukje tekst een andere breedte dan het standaard font. De lengte van de tekst kan toevallig even lang zijn bij het gebruik van het standaard font en het ingeladen font. Om dit te omzeilen wordt de tekstbreedte vergeleken met twee verschillende fonts. Hierdoor moet minimaal een van de twee lengtes veranderen wanneer het font ingeladen is. Daarnaast moet de browser weten dat we het font willen gebruiken. De browsers moet worden verteld dat hij het font moet inladen. Het gebruiken van het font op een canvas is helaas geen rede voor de browser om het font te downloaden. Om de browser toch te vertellen dat we dit font graag willen gebruiken moet er een DOM element worden toegevoegd aan de webpagina waarin het font wordt gebruikt. Door het gebruiken van het font in een element om de webpagina zal het font wel geprobeerd worden in te laden. Zolang het vector font niet succesvol geladen is kan het betekenen dat het laden nog bezig is, of dat het laden van het vector font is mislukt. De tbloader kan niet op te hoogte worden gebracht wanneer het laden is mislukt. Dit kan resulteren in een tbloader die voor eeuwig wacht op een vector font. De gebruiker van de library moet deze mogelijke eeuwige wachttijd zelf opvangen. 6.4 Browser specifieke eisen Voor verschillende browsers bestaan specifieke eisen waaraan moet worden voldaan: Op Android apparaten die gebruik maken van Android versie 4.3 of eerder wordt het WOFF formaat niet ondersteund. Voor deze apparaten moet er naast een WOFF formaat ook een TTF formaat worden aangeboden. Dit TTF formaat krijgt een lagere prioriteit dan het WOFF formaat. Hierdoor maken browsers die WOFF wel ondersteuren gebruik van het WOFF formaat. De naam van een fontface moet in sommige browsers beginnen met een hoofdletter of een kleine letter (A-Za-z). Developers zijn vaak geneigd zijn om namen te beginnen met een laagstreepje ( _ ). In deze gevallen werkt het fontface niet. De developer zal zelf rekening moeten houden met deze restrictie. De Tingly Builder zal dit niet afvangen, om dezelfde reden dat de Tingly Builder JavaScript gereserveerde namen zoals: console, window en function ook niet afvangt. Er treden foutjes op bij schaduw- en kwaliteitsinstellingen binnen webkit. Webkit is de technologie die gebruikt wordt door bijvoorbeeld Google Chrome en Safari. Voorbeelden van foutjes zijn dat de tekst niet goed wordt geanti-aliased of dat de tekst onverwachte effecten geeft. Er is geen omschrijving bekend wanneer deze foutjes plaatsvinden. Uit tests blijkt dat bij 22

23 het gebruik van zeer grootte fonts (190px en meer) foutjes optreden in de gerenderde tekst. Het zelfde geldt voor wanneer er een zeer grote waardes voor shadow-blur worden toegepast. Bij dit soort extreme instellingen is het van belang dat je de tekst in verschillende browsers test. Deze browserspecifieke eisen zijn in het product toegepast. 6.5 Vector font eigenschappen Nu is duidelijk hoe de structuur van de library eruitziet. De volgende stap is uitvinden hoe de structuur van het tbvectorfont object eruit komt te zien. Een belangrijke vraag is: Welke eigenschappen ondersteunt de HTML5 canvas voor het gebruik van vector fonts? Hieronder staan een lijst van vector font eigenschappen. Deze vector font eigenschappen zijn via de HTML5 standaard gedocumenteerd. Het tbvectorfont object ondersteunt deze eigenschappen. Font fontface De naam van het fontface fontstyle De stijl van het font ( normal, oblique of italic ) fontweight De weight van het font ( , bold, lighter of bolder ) fontsize De grootte van het font in pixels De fontvariant eigenschap mist in deze lijst. De fontvariant eigenschap geeft de mogelijkheid om de tekst in small-caps te renderen. De small-caps eigenschap wordt door weinig lettertypen ondersteund. Ook wordt deze eigenschap niet gebruikt door Tingly Games. Deze eigenschap is daarom weggelaten in de library. Wanneer de developer deze eigenschap toch wilt gebruiken kan hij er handmatig bij. Fill style De stijl waarmee wordt gerenderd. Door setcolor(), setpattern() of setgradient() fill Of de tekst moet worden gevuld met een stijl Stroke style De stijl waarmee wordt gerenderd. Door setcolor() stroke Of de tekst moet worden omlijnd met een stijl linewidth De dikte van de omlijning van de tekst Shadow shadow De schaduw van de tekst. Bevat color, offsetx, offsety en blur. Via setshadow() 23

24 Alignment textalign De horizontale uitlijning van de tekst ( start, end, left, center, right ) textbaseline De verticale uitlijning van de tekst ( alphabetic, top, hanging, middle, ideographic of bottom ) linespacing De ruimte tussen lijnen van de tekst De baseline eigenschap zal alleen top, middle en bottom ondersteunen. 24

25 6.6 Tekst breedte Een andere belangrijke eigenschap van een vector font is dat het gerenderd kan worden met een vooraf bepaalde maximum breedte. Wanneer de tekst buiten deze breedte valt wordt de tekst opgesplitst in meerder lijnen. Voor het opsplitsen van de tekst wordt het volgende algoritme gebruikt. 1 for each line in the text: 2 split the text up in words at each space character 3 create a new outputline 4 for each word in the line: 5 calculate the length of the word 6 calculate the length of a space 7 sum these lengths, does this length fit within the maximum width when 8 appended to the width of current outputline: 9 add a space and the word to the current outputline and go to the 10 next word 11 otherwise: 12 end the current outputline and create a new outputline starting 13 with the word 14 end the current outputline In regel 7 is te zien dat dit algoritme uitgaat van de waarheid van de volgende bewering: Lengte(woord) + Lengte(spatie) = Lengte(woord + spatie) Om er zeker van te zijn dat het algoritme naar behoren werkt is het belangrijk dat bovenstaande bewering waar is. De bewering is bewezen in Bijlage J: Tekstbreedte bij het gebruik van spaties en blijkt waar te zijn. 6.7 Context wijzigingen terugdraaien Voor het renderen van tekst op het scherm wordt de context aangepast. Deze aanpassingen wil je na het renderen van de tekst weer terugdraaien. Zodat de context wordt teruggezet in de oorspronkelijk staat. Er zijn twee manieren waarop de aanpassingen kunnen worden teruggedraaid. De aanpassingen van de context bijhouden en handmatig terugdraaien. De save() en restore() routines van de HTML5 canvas gebruiken om de aanpassingen via bestaande routines terug te draaien. 25

26 Het gebruiken van de save() en restore() routines heeft de voorkeur. Dit omdat deze routines: door de browsers zijn gedefinieerd en dus ook worden onderhouden, altijd alle eigenschappen terugdraaien, geen JavaScript code zijn, maar geoptimaliseerd zijn door de browsers. Een voordeel dat waarschijnlijk behaald kan worden door het handmatig bijhouden en terugdraaien van de aanpassingen is de snelheid. Door het handmatig bijhouden van aanpassingen kan er voor worden gezorgd dat alleen de aangepaste eigenschappen worden teruggedraaid. Om te testen of dit snelheidsvoordeel daadwerkelijk te behalen valt, is er een onderzoek gedaan. Dit onderzoek staat beschreven in Bijlage H: Context Save/Restore en Transformaties snelheden. Uit dit onderzoek blijkt dat het gebruik van de save() en restore() routines sneller is dan het handmatig bijhouden en terugdraaien van de aanpassingen. Om deze reden worden de save() en restore() routines gebruikt. De context bevat een transformatie matrix. Deze transformatie matrix kan niet worden opgevraagd. Wanneer deze matrix wordt aangepast zijn de save() en restore() routines vereist. Nu deze routines altijd worden gebruikt zou de transformatie matrix ook altijd kunnen worden aangepast. Uit hetzelfde onderzoek blijkt echter dat sommige browsers tekst trager renderen bij het gebruik van matrixtransformaties. In de betreffende browsers zal waarschijnlijk een optimalisatie plaatsvinden. Deze optimalisatie zorgt ervoor dat wanneer er geen wijzigingen in de matrix zijn, hier geen berekeningen voor gedaan hoeven te worden. Om van deze optimalisatie gebruik te maken moeten de transformaties alleen worden toegepast wanneer nodig. De code is geoptimaliseerd zodat bij het renderen van tekst, waarbij de transformaties niet noodzakelijk zijn, ook geen transformaties worden toegepast. 26

27 7 Realisatiefase Nu de library is ontworpen kan worden begonnen aan de realisatie. Door al het voorbereidende werk is de realisatie niet veel meer dan het uitwerken van de gemaakte keuzes en de gevonden oplossingen. 7.1 Implementatie Een eerste implementatie van het tbvectorfontloader object en het tbvectorfont object zijn geschreven. Deze twee objecten zijn samen ongeveer achthonderd regels code. Beide objecten zijn gevalideerd en volledig opgeschoond met behulp van de code kwaliteitstool JSLint 4. Vervolgens is deze library opgestuurd naar Mark Overmars voor een code review en een verwerking in de Tingly Builder. Na deze review heeft hij de library toegevoegd aan de engine. Mark Overmars heeft in de Tingly Builder een resource VectorFont toegevoegd. Een vector font resource is in de Tingly Builder te bekijken en aan te passen. Het bekijken gaat via een scherm waarin een HTML5 canvas draait. De vector font library wordt daarin toegepast. In het onderstaande plaatje is te zien hoe het vector font scherm er in de Tingly Builder uitziet. In dit scherm kan een vector font ontworpen worden. Ook kunnen nieuwe lettertypen worden toegevoegd. 7.2 Documentatie Na de implementatie is het belangrijk dat het de andere developers binnen Tingly Games duidelijk wordt hoe de library in elkaar zit en hoe deze gebruikt moet worden. Om deze reden is er een stuk documentatie geschreven over het gebruik van de vector fonts. Deze documentatie is te lezen in Bijlage I: Vector font library documentatie

28 7.3 Gebruik De library is na de realisatiefase door de developers in gebruik genomen. Het is voor de developers interessant om in een bestaand project een bitmap font te vervangen door een vector font, omdat deze nieuwe mogelijkheden biedt. Door de opbouw van de library kan een bitmap font zonder aanpassingen aan de code worden vervangen door een vector font. Dit is in een project succesvol uitgeprobeerd. Een attentiepunt voor de developer is dat het schalen van een vector font andere resultaten geeft dan het schalen van een bitmap font. Bij een vector font verandert de tekengrootte. Hierdoor blijven de karakters mooi wanneer ze opgeschaald worden. De tekengrootte is helaas een geheel getal. Deze afrondingen leiden tot merkbare haperingen wanneer de schaal van de tekst wordt geanimeerd. Deze haperingen zijn te omzeilen door de tekst eerst op een losse canvas te renderen en deze canvas vervolgens te schalen tbvectorfont objecten instantiëren Voor het gebruik van de tbvectorfont objecten is het belangrijk om te weten hoe je een tbvectorfont aan kunt maken. Je kan dit op twee verschillende manieren doen. Je kan de Tingly Builder het tbvectorfont object voor je laten maken of je kan handmatig in code het tbvectorfont object maken. Wanneer de Tingly Builder een tbvectorfont object voor het Kahlesv2 lettertype aanmaakt worden de volgende regels code gebruikt: Hierna is het tbvectorfont object met de naam Font1 te gebruiken. Wanneer je zelf via code het tbvectorfont object aan maakt, dan doe je dat op de volgende manier: Ook hier is vervolgens het tbvectorfont object met de naam Font1 te gebruiken. 7.4 Lettertypen In de Tingly Builder kunnen verschillende lettertypen worden gespecificeerd. Je hebt de mogelijkheid tot het importeren van een eigen lettertype en het gebruiken van build-in lettertype Importeren Als je een eigen lettertype wilt importeren, dan moet je een.ttf formaat aanleveren. Dit bestand wordt door de Tingly Builder omgezet naar de benodigde andere formaten. Het kan voorkomen dat je het lettertype dat je graag wilt gebruiken niet in het.ttf formaat beschikbaar is. Toch verwacht de Tingly Builder een.ttf formaat. Op het internet bestaan een hoop online-tools waarmee het lettertype omgezet kan worden dit.ttf formaat. Zo bestaat er de website: Via deze website kunnen vrijwel alle lettertype formaten naar het.ttf formaat worden omgezet. 28

29 In de Tingly Builder wordt een tool gebruikt om de.ttf formaten om te zetten naar.woff formaten. Hierdoor kunnen de browsers die.woff formaten gebruiken in plaats van de.ttf formaten. Voor het geïmporteerde lettertype is het belangrijk om een fallback lettertype op te geven. Dit fallback lettertype is vaak de naam van een build-in lettertype zoals Arial, maar kan ook de naam van een andere vector font resource zijn of een combinatie van meerdere namen gescheiden met een komma Legal en Distribution Wanneer je een eigen lettertype gebruikt dan zal dit lettertypebestand op de webserver komen te staan. Dit houdt in dat iedereen dit lettertype via jouw server kan downloaden. Je bent het lettertype in theorie dus aan het distribueren. Dit is natuurlijk ook wat je wilt. Je wilt namelijk dat andere mensen het lettertype kunnen downloaden om te gebruiken in jouw game. De kans bestaat dat de speler dit lettertype ook voor andere doeleinden gebruikt. Waar goed op moet worden gelet bij het gebruik van deze lettertypebestanden is dat je ze rechtsgeldig distribueert en je geen illegale handelingen uitvoert. So the most basic legal rule of font copyright is that unless the license specifically allows it, fonts cannot be shared among multiple computers, even if they are all owned by the same person or corporation, and fonts cannot be given away to others - (Gaultney, 2003) De basis regel waarvan kan worden uitgegaan is dat je het font niet mag distribueren tenzij dit specifiek wordt toegestaan door de licentie overeenkomst. Op veel website waar fonts te downloaden zijn vind je onderstaande licenties. Deze licenties staan weergeven wanneer je een font wilt downloaden. Let hier bij dus goed op dat je het recht hebt om het font commercieel te gebruiken en te distribueren Build-in Er zijn in de Tingly Builder een aantal vooraf gedefinieerde build-in fonts. Wanneer je een nieuwe Font Resource maakt kan je een keuze maken voor een van deze build-in fonts. De build-in fonts die standaard in de Tingly Builder gekozen kunnen worden zijn: Arial Arial Black Arial Narrow Calibri Cambria Courier New Helvetica Impact Monaco Palatino Papyrus Verdana 29

30 Ook kunnen de door de browser gedefinieerde standaard waarden sans-serif, serif, monospace, script en fantasy worden opgegeven. Daarnaast kan je ook een andere font naam invullen. Er wordt dan door de engine van uitgegaan dat dit een build-in font is. Dit font moet dus net zoals bijvoorbeeld Arial in alle browsers beschikbaar zijn Combinaties Veel fonts zijn opgebouwd uit een combinatie van meerdere lettertype varianten. Deze fonts gebruiken naast een standaard font file (.ttf bestand), aparte font files voor elke variant. Een variant is bijvoorbeeld bold, italic of bold-italic. In bijlage: Bijlage N: Gecombineerde Lettertypen staat een onderzoek beschreven naar de mogelijkheid tot een implementatie van deze gecombineerde lettertypen. In deze bijlage is de conclusie opgenomen dat het fallback mechanisme bij het gebruik van lettertype combinaties niet meer intuïtief werkt. Daarnaast is het niet mogelijk om meerdere bestanden te koppelen aan een enkele resource in de Tingly Builder. Het ondersteunen hiervan zou een grote herschrijving van de Tingly Builder vereisen. Op grond van deze renderen heeft Mark Overmars geconcludeerd dat er geen verder stappen ondernomen worden om gecombineerde lettertypen te implementeren. 30

31 8 Efficiëntie Het is voor de gebruiker van de library belangrijk om informatie te hebben over de snelheden en efficiency van het gebruik van vector fonts. Nu de library klaar is heb ik tests uitgevoerd om de snelheid van het gebruik van verschillende eigenschappen van de tekst te meten. Ik heb snelheidsmetingen gedaan met de vector font implementatie. Deze metingen zijn terug te vinden in Bijlage K: Vector font effect snelheid en Bijlage L: Vector font versus bitmap font en losse canvas snelheden. Hieronder geef ik de conclusies van deze metingen weer. 8.1 Vector font effect snelheid Zie Bijlage K: Vector font effect snelheid Hieronder staat een schematische weergave van de tijdsbesteding bij het renderen van teksten met verschillende effecten. Deze weergave geeft relatieve verschillen aan en geeft dus geen precieze waarden weer. Daarnaast is het belangrijk te beseffen dat elke regel tekst die gerenderd moet worden de totale rendertijd aanzienlijk verhoogt. Dit geldt voor het gebruik van NEWLINE karakters in de tekst, maar ook voor tekst die wordt opgesplitst om aan een bepaalde breedte te voldoen. Waarnemingen op basis van alle browsers zijn: De tijdsduur van Fill en Stroke is ongeveer een opsomming van de losse Fill en Stroke tijd. Het gebruik van `GradientFill` kost weinig meer dan het gebruik van een standaard `Fill`. Er is weinig verschil tussen het renderen van een grote (titel) of kleine (button) tekst. Noemenswaardige browserspecifieke waarnemingen: De absolute resultaten verschillen substantieel tussen de verschillende browsers. Zo is Chrome een factor tien sneller dan Firefox en zelfs een factor twintig sneller dan Internet Explorer. Chrome op Android is ook vrij snel, maar wel een kwart van de snelheid van Chrome onder Windows. Waarschijnlijk wordt dit veroorzaakt doordat Chrome geen anti-aliassing toepast. Heel opvallend is dat Safari op ios zeer sloom is in externe fonts. Voornamelijk met het gebruik van Stroke. 31

32 8.1.1 Extern Font vs Build-in Font Zie Extra 1: Extern Arial vs Build-in Arial in Bijlage K: Vector font effect snelheid Uit tests blijkt dat het gebruik van een extern font niet verschilt met de snelheid van het gebruik van een Build-in font. Er is dus geen voordeel in rendersnelheid bij het gebruik van een Build-in font in plaats van een Extern Font. Het gebruiken van een Build-in Font heeft toch de voorkeur. Een Build-in Font hoeft niet gedownload te worden. De laadtijd is hierdoor korter Filltypen Zie Extra 2: Filltypen in Bijlage K: Vector font effect snelheid Er bestaan drie filltypen bij het renderen van vector fonts. Dit zijn Color, Pattern en Gradient. Het gebruik van een Color is het snelste filltype, daarna het gebruik van een Gradient en tenslotte het gebruik van een Pattern. Deze volgorde in snelheid geldt voor alle browsers. De absolute waarden van de snelheid verschillen wel sterk. In contrast met de meeste browsers is het verschil tussen Pattern en Color in Chrome aanzienlijk. Pattern is in Chrome een stuk trager. Daarnaast is binnen Internet Explorer de snelheid van de Gradient lager dan in de ander browsers. 32

33 8.2 Vector font versus bitmap font en losse canvas snelheden Zie Bijlage L: Vector font versus bitmap font en losse canvas snelheden voor metingen Om de snelheidsafweging compleet te maken is een vergelijking gemaakt tussen de snelheden bij het gebruik van vector fonts, bitmap fonts en een losse canvas. De snelheden hangen voor een deel samen met het aantal effecten dat wordt toegepast op de tekst. Een losse canvas houdt in dat de tekst op een niet-zichtbare canvas wordt getekend. De tekst staat hier nu op opgeslagen. Deze losse canvas kan in z n geheel naar het scherm worden getekend. Dit zou een snelheidsvoordeel kunnen opleveren aangezien de opgeslagen afbeelding sneller getekend zou kunnen worden dan het steeds opnieuw tekenen van een vector font Bitmap font vs vector font De snelheid van het renderen van het meeste eenvoudige vector font is vele maal sneller dan het renderen van een bitmap font (zoals bewezen in 3 Verkenning van de aanpakken ). De snelheid van het renderen met een bitmap font wordt ongeveer vergelijkbaar wanneer een uitgebreid vector font wordt getekend. Onder uitgebreid vallen onder andere: meerdere regels met tekst, het gebruik van schaduw en het gebruik van een gradiënt. Het voordeel van het gebruik van een vector font is dat het schaalbaar, kleurbaar en het lettertype veranderbaar is. Ook zijn de bestanden kleiner. Het voordeel van het gebruik van bitmap font is dat bij het gebruik van veel effecten het renderen niet vertraagt. Vector Font Schaalbaar Kleurbaar Lettertype veranderbaar Kleinere bestanden Trager bij meerdere effecten Bitmap Font Niet schaalbaar Niet kleurbaar Vast Lettertype Grotere bestanden Snelheid blijft gelijk bij meerdere effecten Uit de test in de bijlage blijkt dat het gebruik van een vector font sneller is dan het gebruik van een bitmap font wanneer er weinig effecten worden toegepast. Het gebruik van bitmap fonts wordt afgeraden. Wel is er een uitzondering. Wanneer je de tekst wilt personaliseren met tekeningen en/of andere effecten die in het Font zitten, en deze effecten zijn niet haalbaar bij het gebruik van een vector font dan kan er toch voor gekozen worden om bitmap fonts te gebruiken Losse canvas vs vector font De rendertijd van het renderen van een canvas is sneller dan het renderen van tekst via een vector font. Onthoud wel dat de tekst eenmalig naar de canvas moet worden gerenderd. Dit zal gebeuren met de snelheid van een vector font. Deze canvas wordt opgeslagen en in erop volgende renderfuncties in z n geheel naar het scherm gerenderd. 33

34 De losse canvas heeft dezelfde nadelen en voordelen als het gebruik van bitmap fonts heeft in vergelijking met vector fonts. Zo kan de losse canvas niet zonder kwaliteitsverlies worden geschaald, gekleurd of op een andere manier worden aangepast. Een ander nadeel dat verbonden is aan het gebruik van een losse canvas, is dat wanneer de tekst vaak verandert er steeds een nieuwe losse canvas moeten worden gecreëerd. De tekst op deze losse canvas moet opnieuw worden gerenderd. Dit kost tijd. De vraag is nu: Vanaf hoeveel frames levert het gebruik van een losse canvas een snelheidswinst op? Uit de waarnemingen in Bijlage L: Vector font versus bitmap font en losse canvas snelheden blijkt dat het renderen van een canvas vele malen sneller is dan het steeds opnieuw renderen van de tekst. Wel is er natuurlijk extra tijd nodig om een nieuwe canvas aan te maken en hier vervolgens op te renderen. Maar de waarnemingen laten zien dat het vanaf zes renders al rendabel is om een losse canvas te gebruiken. Rendabel na zes renders betekent dat een tekst die zes frames onveranderd op het scherm staat, het best met een losse canvas kan worden gerenderd. Bij een game van zestig frames per seconde staan zes frames gelijk aan een tiende van een seconde. Een losse canvas is rendabel voor teksten die langer dan een tiende van een seconde onveranderd op het scherm staan. Dit geldt voor alle teksten. Gebruik een losse canvas voor alle teksten, tenzij de tekst vaker dan tien keer per seconde verandert. Een goed voorbeeld van het gebruik van een losse canvas is een titeltekst. Deze tekst zal statisch zijn en veel effecten hebben. Het gebruik van een losse canvas zorgt bij het gebruik van veel effecten en een statische tekst dat de rendertijd zeer snel blijft. Dat een losse canvas sneller is wordt nog beter merkbaar wanneer de tekst over meerdere regels loopt. Dit komt omdat er nog maar één render-functie aanroep nodig is voor de gehele tekst in plaats van een render-functie aanroep per regel. 34

35 9 Word Art De tbvectorfont library maakt gebruik van alle standaard functionaliteit die de browsers bieden. Naast deze standaard functionaliteit ziet Tingly Games graag ook uitgebreidere tekst effecten. De bedoeling van deze effecten is dat er een decoratieve stijl kan worden gebruikt die past bij de stijl van een game. Een decoratieve stijl van een tekst wordt Word Art genoemd. Deze Word Art moet ondersteuning bieden aan allerlei verschillende effecten. Voor deze effecten moet een voor de programmeur duidelijk te begrijpen API worden opgezet. De documentatie van deze API is te lezen in Bijlage P: WordArt Documentatie. 9.1 Effecten Er zijn veel verschillende effecten die leuk kunnen zijn bij het tekenen van een tekst. De effecten die in de Word Art API zitten staan hieronder opgesomd. Met deze losse effecten is elke Word Art stijl te maken Lijn De tekst volgt een lijn. In onderstaande afbeelding volgt de lijn een sinus golf. Een developer heeft volledige vrijheid. Hij of zij kan namelijk de functie die de positie van elk karakter berekent zelf aanpassen. Op deze manier kan de tekst elk mogelijke lijn volgen Loodrecht De karakters worden op een lijn getekend. Elk karakter staat onder een bepaalde hoek op de lijn. Er kan worden ingesteld hoe het karakter zichzelf tekent aan de hand van deze hoek. Er zijn drie mogelijkheden waarop de karakters aan de hand van de hoek kunnen worden afgebeeld. Dit zijn none (recht op), rotate (loodrecht gedraaid) en skew (scheef gezet). 35

36 In onderstaande afbeelding staan alle varianten uitgebeeld. Bij het gebruik van none wordt niet gekeken naar de rotatie van de lijn. Elk karakter wordt rechtop in de canvas getekend. Wanneer rotate wordt gebruikt dan wordt het karakter geroteerd op basis van de hoek van de lijn. Bij skew wordt het teken scheef gezet op de lijn. Een karakter blijft in dit geval wel altijd rechtop staan. Voor het gebruik van skew moest een onderzoek worden gedaan naar de mogelijkheden hiervan binnen HTML5. Dit onderzoek is terug te vinden in Bijlage O: Skew Transformaties op de canvas. Uit dit onderzoek blijkt dat het mogelijk is om skew te gebruiken Lagen Een karakter kan meerdere keren getekend worden door middel van verschillende lagen. Elke laag heeft een eigen font en een offset. In het font kunnen alle vector font eigenschappen (zoals kleuren en schaduwen) worden aangepast. Hieronder staan enkele voorbeelden afgebeeld: 36

37 9.1.4 Karakters Naast dat er per laag eigenschappen kunnen worden aangepast, is dit ook mogelijk per karakter. Voor elk karakter kunnen het vector font, de graphics-context en het karakter zelf worden aangepast. In onderstaande afbeelding is een tekst te zien waarin de kleur en grootte van het font per karakter verandert aan de hand van de relatieve progressie in het stuk tekst. vector font: Onder het lettertype vallen alle eigenschappen die een vector font heeft. Dit zijn bijvoorbeeld de kleur en tekstgrootte, maar ook schaduw en omlijning. graphics-context: De graphics-context is de staat van de grafische omgeving waarin de tekst wordt getekend. Deze context kan onder andere worden verplaatst, uitgerekt, gedraaid en geschaald. karakter: Ook het karakter zelf kan worden aangepast. Dit houdt in dat je een ander karakter kan tekenen dan in de tekst staat. Zo zou je alle karakters in een bepaalde laag kunnen vervangen door een bloemetjeskarakter van een speciaal font Tracking Tracking is het toevoegen van ruimte tussen de karakters. Het is bij Word Art mogelijk om ondersteuning te bieden voor tracking. Deze eigenschap was in eerste instantie wel aanwezig bij bitmap fonts, maar vervallen is vector fonts Meerdere omlijningen Door middel van verschillende lagen is een tekst met meerdere omlijningen te simuleren. Door de omlijnbreedte van de tekst steeds een aantal pixels te verkleinen is het volgende effect te bereiken: Bij deze vorm worden omlijningen van een dikte breder dan 10 pixels gebruikt. Wat opvalt is dat bij omlijningen breder dan 10 pixels erg lelijke artifacts optreden. In bijlage Bijlage Q: Stroke artifacts staat de oplossing voor dit probleem uitgelegd. De oplossing is om bij bredere omlijningen een andere strokejoin waarde te gebruiken voor het vector font. 37

38 9.2 API Om de Word Art instellingen toegankelijk te maken is het belangrijk dat alle instellingen eenvoudig aan te passen zijn. In Bijlage P: WordArt Documentatie is de API beschrijving te lezen. Om goed te begrijpen hoe de Word Art library in elkaar zit, worden hieronder enkele onderwerpen besproken Kinds Wanneer je een Word Art wilt gebruiken heb je een zogenaamde Word Art kind nodig. Deze kind beschrijft de stijl van de Word Art. Een kind object beschrijft alle eigenschappen van de Word Art stijl. Op deze manier kan je bijvoorbeeld een title-kind een logo-kind of een rainbow-kind maken om te gebruiken wanneer je tekst wilt tekenen Losse canvas De Word Art kinds maken gebruik van een grote hoeveelheid effecten en gebruiken meerdere render-functie aanroepen per karakter. De tijd die het kost om een Word Art tekst te renderen kan al snel enkele frames aan tijd kosten. Dit leent zich goed voor het gebruik van een losse canvas. De Word Art API zal een losse canvas gebruiken om de gerenderde tekst op te leveren. De grootte van deze losse canvas moet bepaald worden. Omdat de positie van de karakters niet bekend is, moet deze worden uitgerekend op basis van de positiefunctie en de tekstgrootte op de verschillende lagen in de Word Art. Om elk karakter dat wordt getekend, wordt een cirkel getekend. Vervolgens wordt er om deze cirkels een rechthoek getekend. Deze rechthoek bevat alle cirkels en daarmee ook alle karakters. Op basis van deze rechthoek wordt de grootte van de losse canvas bepaald. Sommige effecten zoals schaduw kunnen buiten de radius van de cirkel vallen. Dit houdt in dat het kan voorkomen dat er getekend wordt buiten de losse canvas. Wanneer dit gebeurt kan de developer de canvas handmatig groter maken. 38

39 9.3 Demo site Er is een demo site opgezet waarop Word Art kan worden getest. Op deze demo site kunnen allerlei presets worden bekeken en getest. Deze demo is beschikbaar op 9.4 Gebruik Word Art is gemaakt nadat de vector font library in gebruik is genomen. Op het moment van schrijven is de Word Art library nog maar net af. Wordt Art wordt nog niet gebruikt in huidige producten. Wel is dit een feature die in de komende projecten in gebruik genomen zal gaan worden. 39

40 10 Niet-westerse karakters De aanleiding voor dit onderzoek was dat Tingly Games graag ziet dat de engine waarmee de games ontwikkeld worden het gebruik van niet-westerse karakters kan ondersteunen. Naar aanleiding van deze wens zijn de tbvectorfont API en tbwordart API gemaakt. Nu de implementatie gereed is, is er gekeken in hoeverre het nu mogelijk is om niet-westerse karakters te gebruiken. Deze informatie staat in Bijlage R: Niet-westerse karakters uitgewerkt. Lokalisatie tool Tingly Builder Browsers Uit deze bijlage blijkt dat het gebruik van niet-westerse karakters na enkele kleine aanpassingen mogelijk is. Na het toepassen van de enkele kleine aanpassingen die in de bijlage staan beschreven kunnen de games gebruik maken van niet-westerse karakters. In onderstaande afbeeldingen zijn niet-westerse karakters weergegeven die als proef in een game gebruikt zijn. Let op: De tekst in de afbeeldingen is vertaald door middel van Google Translate en kan incorrecte vertalingen bevatten 40

41 Concluderend overzicht Tijdens deze afstudeeropdracht heb ik de volgende onderzoeken uitgevoerd: Een onderzoek naar de kwaliteitscriteria van Tingly Games Een onderzoek naar de meetwaarde van bitmap fonts op basis van de kwaliteitscriteria Een onderzoek naar de meetwaarde van vector fonts op basis van de kwaliteitscriteria Een onderzoek naar de snelheid van de save/restore en transformatie functionaliteit binnen de HTML5 context Onderzoek naar de bruikbaarheid van de tekstbreedte van een losse spatie en een los woord Onderzoek naar de snelheden van verschillende vector font effecten Onderzoek naar het verschil in snelheid tussen build-in en externe vector fonts Onderzoek naar het moment waarop het gebruik van een losse canvas rendabel wordt Onderzoek naar de verschillen tussen de anti-aliasing in browsers Onderzoek naar het gebruik van gecombineerde lettertype en bijbehorende terugvalmethoden Onderzoek naar de mogelijkheid om de canvas te 'skewen' Onderzoek naar het voorkomen van onverwachte resultaten bij de omlijning van tekst Onderzoek naar het gebruik van niet-westerse karakters binnen de gehele ontwikkel cyclus van een product bij Tingly Games Tijdens deze afstudeeropdracht heb ik op basis van bovenstaande onderzoeken de onderstaande producten kunnen maken: Een vector font library inclusief Engelstalige documentatie Een Word Art API inclusief Engelstalige documentatie Deze onderzoeken en producten, in combinatie met dit onderzoeksrapport, kunnen worden gezien als het eindresultaat van mijn afstudeeropdracht. Het eindresultaat voldoet aan de wensen van Tingly Games. Mijn producten zijn direct en enthousiast in gebruik genomen. In alle al lopende projecten is de vector font library al toegevoegd. De Word Art API zal spoedig in gebruik worden genomen. In de toekomst kan blijken dat het wenselijk is om extra onderzoek uit te voeren naar de volgende onderwerpen: Onderzoek naar een manier om verschillende lettertypeformaten in de Tingly Builder om te kunnen zetten naar het.ttf bestandsformaat Onderzoek naar het gelijktrekken van het gebruik van anti-aliasing in de verschillende browsers 41

42 Bronnenlijst Can I Use. (2014, Januari 12). Retrieved Februari 28, 2014, from Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.: Deal, M. (2011, 3 1). Canvas Text Effects. Retrieved 3 5, 2014, from HTML5 Rocks: Flanagan, D. (2011). JavaScipt The Definitive Guide. Sebastopol: O'Reilly Media. Gaultney, V. (2003). Font Licensing and Protection Details. SIL Non-roman Script Initiative (NRSI), 1-3. Geary, D. (2012). Core HTML5 Canvas. Crawfordsville, Indiana: Prentice Hall. Irish, P. (2009, Oktober 7). Fighting FOUT. Retrieved Februari 10, 2014, from Paul Irish: Kyrnin, J. (2013). Font Families - How to decide which Font Family to use. Retrieved 3 5, 2014, from About.com: W3Schools Online Web Tutorials. (2012). Retrieved 2014, from W3Schools: Wikipedia, de vrije encyclopedie. (2001, januari 15). (Wikimedia Foundation, Inc.) Retrieved 2014, from Wikipedia: 42

43 Bijlagen Bijlage A: Tingly Games In bovenstaand diagram staat de bedrijfsstructuur van Tingly Games weergeven. Mijn foto en gegevens staan rechts onderin. Bij vragen, hulp, oplevering en rapportage spreek ik met Mark Overmars. Daarnaast overleg ik met de andere programmeurs. Ook overleg ik met Gerrit Willemse wanneer mijn keuzes consequenties hebben voor de artists. 43

44 Bijlage B: Website Artikel Simon Karman bij Tingly Games Voor iedere nieuwe werknemer, stagiaire en freelancer wordt een korte biografie op de website geplaatst. Zo heb ook ik een korte biografie geschreven die hieronder is weergeven. Achtergrondinformatie Ik ben Simon Karman (www.simonkarman.nl), 20 jaar en ik kom stage lopen bij Tingly. Ik ben programmeur en game developer. Ik studeer op dit moment nog aan de Hogeschool van Amsterdam. Hier volg ik de opleiding Technische Informatica met als richting Game Technology. Ik zit in mijn vierde jaar en ik hoef alleen mijn afstudeeropdracht nog af te ronden. Voor mijn afstudeerstage ben ik op zoek gegaan naar een uitdagende programmeer opdracht. Het liefst gerelateerd aan een game. Tingly Games heeft me een leuke opdracht aangeboden op het gebied van Font rendering en hoe hiermee om te gaan binnen HTML5. De titel van mijn onderzoek is: Renderen van teksten in moderne browsers met behulp van HTML5. Ik verwacht dat ik me bij Tingly Games kan ontwikkelen in HTML5 en Javascript. Quote Ik ben altijd op zoek naar leuke en eenvoudige oplossingen voor complexe programmeer problemen. Tingly Games geeft me de kans om, het renderen van niet-westerse fonts in moderne browsers met behulp van HTML5, te onderzoeken en hier leuke en eenvoudige oplossingen voor te vinden. Op het maken van een aantal eenvoudige websites na heb ik nog niet met HTML5 of Javascript gewerkt en hoop hierover veel bij te kunnen leren. Daarnaast geeft deze stage mij een kans om aan de ontwikkeling van het geweldige Greeting Game concept een bijdrage te kunnen leveren. Simon Webartikel Welcome Simon! February 19th, 2014 Welcome to Simon Karman, our new intern! He s going to strengthen our team with his internship as a programmer and game developer. Simon is studying Computer Science at the University of Applied Sciences in Amsterdam with Game Technology as specialization. He s going to do research how to cope with Asian fonts. There are a large amount of possible approaches and Simon s goal is to find out which approach works best for us. I m always looking for simple, but fun solutions to complex issues. Tingly Games makes it possible for me to do research and find a solution for my graduation project. I don t have that much experience with HTML5 or Javascript, so this will be a nice challenge for me. Besides all this, my internship gives me the opportunity to be involved with the development of the amazing Greeting Game concept. - Simon 44

45 Bijlage C: De meetwaarden voor de kwaliteitscriteria Meetwaarden worden geclassificeerd als een van de volgende waarden: <waarde> -- <waarde> - <waarde> +- <waarde> + <waarde> ++ Sommige meetwaarden kunnen niet als <waarde> -- of als <waarde> ++ worden geclassificeerd. Bij de meetresultaten zullen deze labels terug komen. 1-Bruikbare tekenset De meetwaarde van de bruikbare tekenset is te schrijven als een van de volgende waarde: Latin-only Alle UNICODE karakters karakters karakters karakters - +/- + Dit is niet de technisch haalbare tekenset, maar de praktisch toepasbare tekenset. De tekenset is nog praktisch toepasbaar zolang de performance er niet onder lijdt. 2-Rendertijd De snelheid van het renderen kan afhangen van een heleboel factoren. De basisfactoren waar we rekening mee gaan houden zijn: Het aantal woorden Het aantal karakters per woord De hoogte van de karakters Om deze factoren te kunnen testen zijn twee verschillende test omgevingen opgezet. Binnen de ene test omgeving worden een aantal woorden, met een bepaald aantal karakters en van een bepaalde hoogte gerenderd en de tijd die de browser hierover doet wordt opgeslagen. De andere testomgeving rendert ook een aantal woorden, met een bepaald aantal karakters en van een bepaalde hoogte en houdt vervolgens bij hoeveel frames per seconden de applicatie nog haalt. Bij beide tests worden een veel verschillende waarden toegepast en gemeten. Dit is vervolgens te visualiseren in grafieken. Daarnaast zullen de tests worden uitgevoerd in verschillende browsers. De browsers kunnen namelijk erg verschillende rendersnelheden hebben. Om te kunnen vergelijken drukken we de meetwaarde uit in het aantal ms dat het renderen van een woord duurt. Een frame heeft ongeveer 16ms, hiervan kan maximaal rond de 5ms besteed worden 45

46 aan het renderen van tekst en er worden waarschijnlijk rond de 20 woorden gerenderd per frame. Dit houdt in dat een goede snelheid rond de (5ms / 20 woorden =) 0,25ms per woord ligt. > 1 ms 0,51 1 ms 0,31 0,50 ms 0,20 0,30 ms < 0,20 ms / Browser Compatibiliteit De meetwaarde wordt bepaald door het aantal browsers waarop de technieken die worden gebruikt voor deze aanpak compatibel zijn. Hiervoor wordt de informatie van gebruikt. De informatie op deze website wordt verzameld door unit tests uit te voeren op de bezoekers en de gegevens hiervan voor iedereen toegankelijk te maken. Elke feature heeft een score. Dit is een gewogen gemiddelde van de browsers die de feature ondersteunen, op basis van het aantal gebruikers per browser. Deze score geeft dus aan hoeveel procent van de gebruikers beschikken over de feature. We hoeven alleen support te bieden op browsers die de HTML5 canvas ondersteunen. HTML5 wordt ondersteund voor 82,5% van de gebruikers. Dit houdt in dat we deze waarde als richtlijn kunnen gebruiken voor andere features. < 60% 60% - 69,9% 70,0 % - 82,4% > 82,5% - +/ Er kan nooit met honderd procent zekerheid vanuit worden gegaan dat een feature geïmplementeerd is door de browser die de gebruiker gebruikt. Het is belangrijk dat er goed word gekeken naar mogelijke terugvalmethodes. Dit zodat deze terugvalmethodes kunnen worden gebruikt wanneer de originele feature niet blijkt te werken. Ook wanneer een bestand niet (goed) worden gedownload kan worden teruggevallen op deze terugvalmethoden. 4-Laadtijd De meetwaarde is de tijd die het kost om de aanpak te kunnen gebruiken. De laadtijd bestaat uit de downloadtijd en de verwerkingstijd. De laadtijd is een opsomming van de downloadtijd en de verwerkingstijd. De downloadtijd is de tijd om de data, die de gebruiker nodig heeft, bij de gebruiker te krijgen. De tijd is uitgedrukt in seconden. Voor het berekenen van de downloadtijd wordt uitgegaan van een internet verbinding van 200 kb/s. De verwerkingstijd kan per aanpak verschillen. > 3 s 1 3 s 0,5 1 s 0,2 0,5 s < 0,2 s /

47 5-Toepassingsmogelijkheden De meetwaarde voor de toepassingsmogelijkheden wordt berekend door een punt toe te kennen per onderstaande feature die de aanpak ondersteund: De kleur van de tekst kunnen aanpassen De tekst helder kunnen schalen Schaduwen van de tekst kunnen renderen /

48 Bijlage D: Meetwaarden bitmap font Bruikbare tekenset Net zoveel karakters als gekozen in de Tingly Builder. Dit valt dus te classificeren als Latin-only, karakters. Latin-only, karakters - Rendertijd Zoals in de grafieken van Bijlage G: Rendertijd in de testomgevingen (Test omgeving 2: Frames Per Seconde) te zien is, verschilt de rendertijd nogal per browser. Over het algemeen wordt bij het renderen van 75 zesletterwoorden van grootte 16 de 60 frames per seconde nog gehaald. De browsers waarin dit niet het geval is zijn een stuk trager en zullen ook bij andere taken veel minder snel zijn dan snellere browsers. Dit valt dus niet te wijten aan de bitmap fonts. Het renderen van 1000 woorden duurt bij verschillende browsers 90, 160, 250 en 320 ms. Dit is een gemiddelde van 205 ms. Dit betekend dat één woord ongeveer te renderen is in 0,205 ms. Dit valt dus te classificeren als 0,20 0,30 ms. 0,205 ms + Browser compatibiliteit Voor de implementatie van deze aanpak hoeft alleen de basis implementatie van de canvas door de browser ondersteund te worden. 82,5% ++ Laadtijd De laadtijd van deze implementatie bestaat uit de downloadtijd van de afbeeldingbestanden waar het font in staat afgebeeld plus de download tijd van de code waarin het font staat gedefinieerd. De bestandsgrootte van de afbeeldingbestanden verschilt per font er per grootte. Daarnaast is er voor elke grootte een apart bestand nodig. Een afbeeldingbestand waarin voor 2 fonts de groottes 8 tot en met 40 zijn opgenomen (met tussenstappen van 4) is 201kb groot. Een los afbeeldingbestand voor een font met grootte 8 is 2kb en voor een font met grootte 40 is dit 20kb. Een afbeeldingbestand voor een font met groottes 8, 16, 28 en 40 is 40kb groot. Dit is een redelijke afspiegeling van een aantal groottes dat gebruikt kan worden binnen de Tingly Builder. Voor elke kleur waarin je het font wilt renderen zal je weer ongeveer 40kb aan ruimte nodig hebben. Download tijd afbeeldingbestanden = (40kb x 2kleuren) / (200kb/s) = 0,4s Daarnaast moet er ook een stuk code worden gedownload. Deze grootte ligt rond de 5kb per font. Voor de 4 groottes is dit nodig en ook per kleur. Download tijd code = (5kb x 4groottes x 2kleuren) / (200kb/s) = 0,2s 48

49 De download tijd van de afbeeldingbestanden (0,4s) plus de download tijd van de code (0,2s) geeft een totale laadtijd van 0,6s. 0,6s +/- Toepassingsmogelijkheden De kleur van de tekst is niet aanpasbaar tijdens runtime. De tekst kan alleen in de kleur die in de Tingly Builder voor het font is gebruikt worden gerenderd. 0 punten. De tekst is schaalbaar. Echter wanneer de tekst te groot wordt geschaald zullen de pixels van de bitmap zichtbaar worden. 0,5 punt. Schaduw achter de tekst is mogelijk, maar dit zal zelf geïmplementeerd moeten worden. 0,5 punt. 1 punt +/- Leesbaarheid De leesbaarheid van een bitmap font is optimaal als het op originele grootte wordt gerenderd. De tekst is wel schaalbaar maar dit heeft altijd verlies in de leesbaarheid tot gevolg. In onderstaande afbeelding zie je een tekst van grootte 36 die op verschillende schalen is gerenderd. Hier is het leesbaarheidsverlies goed zichtbaar. Kleiner is goed leesbaar bij x0.25 wordt de tekst wazig en de grotere versies worden heel duidelijk waziger. Een oplossing hiervoor zou zijn om het font op een grotere grootte op te slaan. Dit heeft echter als nadeel dat de laadtijd veel groter wordt. Een voordeel aan bitmap fonts is dat ze met de hand kunnen worden gedesigned. En de karakters daardoor beter en preciezer gepersonaliseerd kunnen worden voor een spel. 49

50 Bijlage E: Meetwaarden vector fonts Bruikbare tekenset De bruikbare tekenset omvat even veel karakters als het gekozen font beschikbaar heeft. Wanneer het gekozen font niet over de karakters beschikt zal het fallback font worden gebruikt en worden de karakters alsnog op het scherm getoond. Dit valt dus te classificeren als Alle UNICODE karakters, karakters. Alle UNICODE karakters, tekens ++ Rendertijd Zoals in de grafieken van Bijlage G: Rendertijd in de testomgevingen (Test omgeving 2: Frames Per Seconde) te zien is, verschilt de rendertijd nogal per browser. Over het algemeen wordt bij het renderen van 75 zesletterwoorden van grootte 16 de 60 frames per seconde nog gehaald. De browsers waarin dit niet het geval is zijn een stuk trager en zullen ook bij andere taken veel minder snel zijn dan snellere browsers. Dit valt dus niet te wijten aan de vector fonts. Daarnaast is in de vergelijking test van Bijlage G: Rendertijd in de testomgevingen (Testomgeving 1: Tijd per config) te zien dat de vector fonts over het algemeen een factor 2 sneller zijn dan bitmap fonts. In Chrome en Internet Explorer zelfs een factor 3. Het renderen van 1000 woorden duurt bij verschillende browsers 30, 50, 80 en 100 ms. Dit is een gemiddelde van 65 ms. Dit betekend dat één woord ongeveer te renderen is in 0,065 ms. Dit valt dus te classificeren als < 0,20ms. 0,065ms ++ Browser compatibiliteit Voor de implementatie van deze aanpak moeten de onderstaande features geïmplementeerd zijn door de browsers. - WOFF fonts* 77,0 % 82,3 % - Canvas Text API 83,8 % *Een probleem is dat WOFF fonts niet werken binnen versies van de Android Browsers vóór Android Browser versie 4.4. Voor deze browsers kan een terugvalmethode naar een TTF een oplossing bieden. 77,0 % + Laadtijd De laadtijd van deze implementatie bestaat uit het downloaden van een.woff bestand en het downloaden van een regel code. De browser moet daarna het font inladen voordat het gebruikt kan worden. 50

51 .WOFF bestanden zijn rond de 30kb groot en de regel code is 0,03kb groot. Dit geeft een totale download tijd van (30kb + 0,03kb) / (200kb/s) = 0,15s. Het inladen van de fonts voor de browser kost laadtijd. Het inladen van een font lukt makkelijk binnen een frame. De tijd die het kost is dus afhankelijk van de frametijd. De frametijd van de Tingly Builder staat vastgesteld op maximaal 33ms. De totale laadtijd van deze aanpak bestaat uit de download tijd (0,15s) plus de laadtijd (0,033s) en bedraagt 0,18s. 0,18s ++ Toepassingsmogelijkheden De tekst is in elke kleur te renderen. 1 punten. De tekst is schaalbaar. 1 punt. Het renderen van schaduwen voor de tekst is mogelijk. 1 punt. Daarnaast zijn er nog veel meer effecten te maken met het gebruik van vector fonts. Een aantal voorbeelden zijn te vinden op 3 punten ++ Leesbaarheid De leesbaarheid van een vector font is grootteonafhankelijk. Dit houdt in dat een vector font op elke gewenste grootte gerenderd kan worden zonder leesbaarheidsverlies. In de onderstaande afbeelding is te zien hoe een vector font er op verschillende groottes uit ziet. Zoals te zien, is de tekst op elke grootte even scherp. 51

52 Voor het gebruik in webkit browsers is het belangrijk dat de kwaliteitsinstellingen goed worden ingesteld. In deze browsers rendert de tekst namelijk niet met anti-alliasing. Dit is een bug binnen deze browsers. 52

53 Bijlage F: Het tbvectorfont Prototype Voor het testen van het renderen van vector fonts moet er een prototype beschikbaar zijn, waarmee ook de verschillende aanpakken getest kunnen worden. Er is gewerkt met twee prototypes. Allereerst is gewerkt met een los prototype dat buiten de Tingly Builder werkt. Daarna is gewerkt met een prototype dat in de Tingly Builder zit. In deze prototypes kunnen vervolgens metingen worden uitgevoerd. Losse prototype Het doel van dit losse prototype is het kunnen testen van de technieken die nodig zijn voor de meetcriteria. Dit losse prototype moet een aantal verschillende fonts laden en, zodra ze geladen zijn, een tekst op het canvas renderen gebruikmakend van het gekozen font. Wanneer een font niet geladen kan worden moet er een ook een tekst op het scherm komen te staan. Aan de hand van de geleerde technieken kan ik dit prototype vervolgens uitproberen in de Tingly Builder. Tijdens het maken van dit prototype heb ik er rekening mee gehouden dat de interface duidelijk en eenvoudig moet zijn. In het figuur hieronder is te zien dat er een nieuw Font object kan worden aangemaakt. Wanneer het font geladen wordt, is door de developer zelf te implementeren, aan de hand van wanneer de startloading methode wordt aangeroepen. Nadat gestart is met het laden zijn er een aantal events die kunnen worden aangeroepen door het font. Deze events zijn: Font.onLoadSucceeded(fontfamily) Font.onLoadFailed(fontfamily) Font.onLoadFinished(succes, fontfamily) Aan deze events kan weer functionaliteit worden gehangen. De fontfamily die je opgeeft bij het creëren van het Font object is de font-family property die je in 5 rule in de css file opgeeft. De fonts moeten allemaal in het.woff formaat worden meegegeven. Dit font formaat wordt door de browsers namelijk universeel ondersteund

54 De techniek die ik hier gebruik om te controleren of een font is geladen, is door te kijken of de breedte van een stukje tekst in een standaard font verschilt van de breedte van het zelfde stukje tekst in het te laden font. Is het font geladen dan heeft het stukje tekst een andere breedte dan het standaard font. Is het font nog niet geladen dan zal met het standaard font worden gerenderd, oftewel de breedte is dan nog gelijk. De browser moet weten dat we het font willen gebruiken. Anders zal de browser het font namelijk niet downloaden. Het renderen van tekst in de canvas is helaas geen reden voor de browser om het font te downloaden. Om de browser te vertellen dat we dit font willen gebruiken zullen we een DOM element moeten creëren 6 dat in zijn style naar het font toe linked. Dit DOM element kan vervolgens ook worden gebruikt om de breedte van het stukje tekst te meten en op die manier dus vast te stellen of een Font geladen is. Wanneer het Font na een timeout van 2500 ms nog altijd niet geladen is, gaan we er vanuit dat het Font niet bestaat of niet geladen kan worden. Deze implementatie heeft als nadeel dat elk Font zelf een check loop bijhoudt waarin het steeds checkt of het al geladen is. Dit probleem zal wanneer het font in de engine gebruikt wordt niet meer voorkomen, omdat in de engine al een loop zit. Afstemming met Mark Tijdens een overleg met Mark kwamen we op een aantal ideeën om te kunnen controleren of een font geladen is. Op deze ideeën ga ik hieronder verder in. Ten eerste leek het ons een goed idee om niet op basis van een enkel stuk tekst, maar op basis van meerdere kleinere stukjes tekst te baseren of een font van breedte is veranderd. Er even simpelweg van uit gaande dat een zelfde stuk tekst bij verschillende fonts tussen de 80 en 120 pixels breed is, kan er van worden uitgegaan dat ongeveer 1 op de 40 fonts een zelfde breedte heeft voor een zelfde stukje tekst. De kans hierop wordt kwadratisch kleiner als we meerdere stukjes tekst gaan controleren. Twee of drie verschillende stukjes tekst zullen de kans dus al bijna nihil maken dat een font de zelfde breedte heeft. Een tweede idee was om op basis van het wel of niet bestaan van bepaalde karakters binnen een font te kunnen vergelijken of het font is geladen. Bevat het font de karakters niet dan zal dit het fallback font zijn. Bevat het font de karakters wel dan zal het font dus geladen moeten zijn. Een nadeel hiervan is dat het font karakters moet bevatten die niet in het fallback font zitten. Hiervoor zullen we dus het fallback font moeten kunnen instellen of een test -karakter toe moeten voegen aan custom fonts. Een derde idee ontstond op basis van het tweede idee en gaat uit de vergelijking van het aantal karakters dat een font heeft met het in te laden font. Houd er rekening mee dat bovenstaande idee allemaal uit gaan van het feit dat de waardes van de vergelijking bij het te laden font en het fallback font niet gelijk zijn. Als deze waarden verschillen weten we zeker dat er een font is geladen. Dit betekend echter dat theoretisch gezien de fonts na het laden nog steeds precies de zelfde waarden zouden kunnen hebben voor alle vergelijkingen. De kans hierop is in de praktijk echter verwaarloosbaar klein all wait until they encounter HTML that matches a CSS rule with a fontstack including font - 54

55 Daarnaast als het echter toch voor blijkt te komen dat de vergelijkingen bij een custom fonts allemaal het zelfde resultaat geven dan kan er alsnog gewoon met het font geschreven worden. De engine gaat er dan namelijk alleen vanuit dat die het font niet heeft kunnen laden, maar kan het font gewoon gebruiken. Prototype in de Tingly Builder Aan de hand van het losse prototype ben ik begonnen aan het schrijven van een versie die in de Tingly Builder kan worden gebruikt. Met deze versie kunnen later alle meetcriteria worden getest voor deze aanpak. De interface die ik heb opgesteld voor het prototype in de Tingly Builder lijkt vanzelfsprekend heel sterk op de interface van het losse prototype. Er zijn echter enkele verschillen. 1- De naam van het object in de Tingly Builder is tbvectorfont; 2- De Tingly Builder heeft z n eigen update loop. Hierdoor hoeft het font geen eigen loop meerbij te houden in de startloading methode Aangezien het font geen eigen loop meer bij hoeft te houden kan deze functionaliteit worden opgeschoven naar de handlebeginstep methode. Om te zorgen dat deze methode door de engine wordt aangeroepen moet een tbvectorfont een token zijn. 3- Aangezien het handig en wenselijk is de functionaliteit af te stemmen op de huidige implementatie van de engine implementeert tbvectorfont ook z n eigen render-functies. Een voorbeeld van zo n render-functie is de laatste functie die te zien is in het figuur. De drawtextsimple methode. Dit is een goed voorbeeld van een mogelijke functie. Er zijn echter nog veel meer vormen te bedenken. Denk dan bijvoorbeeld aan methode waarbij je parameters zoals rotatie, schaal en kleuren mee kan geven. 4- In de Engine zijn de events niet meer zo van belang. Aangezien ze nog wel handig kunnen zijn bij bijvoorbeeld het laden van het spel heb ik ze erin laten zitten. De useevents parameter die mee wordt gegeven aan het creëren van het font object geeft aan of het font events moet aansturen (true) of dat het font geen events hoeft aan te sturen (false). Wanneer je geen gebruik maakt van de events is het slim om ze uit te zetten. De functionaliteit die voor de vector font implementatie in de Tingly Builder zal moeten komen bevat de volgende stappen: 1- Het font (het.woff bestand) moet bij het builden in de media folder worden geplaatst. 2- Er moet rule aan de css worden toegevoegd. 3- Het font moet in JavaScript worden gedefinieerd. 55

56 Hierna kan je in je project gebruiken maken van het vector font. Afstemming met Mark Na het maken van het prototype binnen de Tingly Builder heb ik weer met Mark overlegt over de implementatie en toegepaste technieken. Hieronder de implementatie wijzigingen die uit ons gesprek aan css toevoegen via JavaScript; DOM Element alleen gebruiken voor het starten van het laden, vervolgens de text breedte meten door middel van de context.measurewidth; Het laden van een vector font los bouwen van het gebruiken van een vector font; tbvectorfont zou geen token moeten zijn. Desnoods moet het font toch z n eigen loop bijhouden om ervoor te zorgen dat de lijst met tokens geen engine functionaliteit bevat. Deze wijzigingen heb ik doorgevoerd. Daarnaast waren er nog een aantal opmerkingen waar ik naar kan kijken wanneer ik deze implementatie verder wil beoordelen: Het verschil in snelheid tussen het renderen van 1 woord van 1000 karakters of het renderen van 1000 woorden van 1 karakter; De kwaliteitsinstellingen van vector fonts in de browser; Het op een rijtje zetten van de websafe fonts die door elke browsers worden ondersteund; De juridische zaken omtrent het gebruik van WOFF fonts en het versleutelen van deze fonts. Na het doorvoeren van de wijzigingen is de interface iets gewijzigd. Het font voegt zijn eigen css toe, het font gebruikt geen DOM Element meer voor de metingen, het vector font is geen token meer, het laden van het font staat nu los van het renderen en om fallback fonts te supporten heeft elk font een fallback font. Het fallback font kan de naam van een font of een tbvectorfont object zijn. De interface van het tbvectorfont object ziet er nu als volgt uit: 56

57 Zoals in het bovenstaande plaatje te zien is, kan je nu een fallbackfont aangeven. Dit font zal gebruikt worden wanneer het font niet geladen is of niet geladen kan worden. Dit fallbackfont kan drie verschillende waarde bevatten: Undefined: Wanneer het fallbackfont niet wordt opgegeven zal worden teruggevallen op Arial. String Font-Family: De naam van het font waarop terug te vallen. instanceof tbvectorfont: Het tbvectorfont object waarop terug te vallen Elke andere waarde die wordt meegegeven zal worden geïnterpreteerd als Undefined`. In het plaatje hieronder zie je een voorbeeld van de mogelijke fallbackfonts. Font3 zal terugvallen op Font2, Font 2 valt zelf weer terug op Monospace en Font 1 zal terugvallen op Arial. 57

58 Bijlage G: Rendertijd in de testomgevingen Voor het testen van de rendertijd heb ik twee test omgevingen opgezet. In deze bijlage zal ik beide testomgevingen kort omschrijven en vervolgens de meetresultaten in een aantal grafieken visualiseren. De gegevens die worden geanalyseerd zijn: Het aantal woorden Het aantal karakters per woord De hoogte van de karakters Deze bijlage bevat alleen de meetgegevens en dus geen interpretatie hiervan. De interpretatie van de meetgegevens is terug te vinden bij de desbetreffende aanpak. Testomgeving 1: Tijd per config Deze testomgeving voert tests uit met bitmap fonts en met vector fonts en is vooral bedoeld om de snelheid van bitmap fonts en vector fonts met elkaar te vergelijken. Programma flow 1- Wacht tot de benodigde fonts geladen zijn 2- Voor elke config (1x als bitmap font en 1x als vector font) 3- Voer onderstaande handelingen 15 keer uit voor deze config 4- Houdt de begintijd bij 5- Render een x aantal woorden met x woordlengte en x woordgrootte 6- Bereken de eindtijd en daarmee een van de 15 metingen van deze config 7- Bereken de gemiddelde tijd over de 15 metingen (dus 1x als bitmap font en 1x als vector font) Meetresultaten Grafieken van Chrome 32.0 op Android, Chrome 33.0 op Windows, Firefox 27.0 op Windows en Internet Explorer 11 op Windows. 58

59 59

60 Test omgeving 2: Frames Per Seconde De tweede test omgeving die ik heb opgezet is gericht op de daadwerkelijke toepassing van de fonts. In de engine zullen de woorden namelijk elk frame gerenderd gaan worden. Met deze tests probeer ik verbanden te vinden tussen het renderen van tekst en de frames per seconde (FPS) die tijdens het renderen haalbaar is. Deze test is vooral bedoeld om een beeld te krijgen van de prestaties van vector fonts binnen de engine en het aantal woorden dat haalbaar is met de huidige implementatie. Programma flow 1- Wacht tot de vector fonts geladen zijn 2- Start met een standaard woordgrootte, standaard woordlengte en standaard aantal woorden 3- Loop door verschillende woordgrootte, woordlengte en aantal woorden 4- Voor 5 seconden 5- Render een x aantal woorden met x woordlengte en x woordgrootte 6- Sla de frame tijd op 7- Bereken de gemiddelde frametijd van deze 5 seconden Meetresultaten 60

61 61

62 Bijlage H: Context Save/Restore en Transformaties snelheden Vergelijking in snelheid met betrekking tot het save en restoren van de context. En het toepassen van transformaties op de transformatiematrix van de context. Het tienduizend keer uitvoeren van bepaalde functionaliteit. De tests die worden uitgevoerd zijn. Het gebruik van transformaties vereist save+restore (kan niet handmatig worden gerestored) 62

63 De verschillende test resultaten op verschillende browsers staan hieronder. Chrome Firefox Internet Explorer In de tabel zijn de resultaten nogmaals naast elkaar weergeven. Chrome Firefox Internet Explorer Save-Restore 187ms 1209ms 356ms Save-Restore-Transform 217ms 1208ms 350ms Manual 262ms 3913ms 433ms Zoals is te zien is op elke browser de handmatige implementatie (manual) trager dan het gebruik van de build-in save en restore functionaliteit van de browsers. Daarnaast is te zien dat het gebruik van de transformaties in Internet Explorer en Firefox geen effect hebben op de snelheid. In Chrome is dit wel het geval, het niet gebruiken van transformaties zal binnen Chrome waarschijnlijk geoptimaliseerd zijn. 63

64 Bijlage I: Vector font library documentatie Dit is de documentatie die ik bij de vector font library heb geschreven. Deze documentatie is vrij toegankelijk voor alle developers die gebruik maken van de Tingly Builder. De documentatie is bedoelt om ondersteuning te bieden aan de developer tijdens het gebruik van de library. Aangezien de developer niet per defenitie Nederlands is, is de documentatie in het Engels geschreven. De documentatie bestaat uit twee onderdelen. De uitleg over de Vector font resource en de uitleg over de tbvectorfont API. Vector font resource A vector font resource stores a font in the form of a font description. You can then use these fonts in the engine to draw text. You add a vector font resource in the usual way. Once a vector font resource is created, you must use the Import button to select a TTF font face. (Later other font types might be supported as well. There are though lots of tools and websites to convert other font face files to the TTF format.) Vector fonts give you considerable control over the way text is drawn. You can specify the size, the color, the way the letters are filled, etc. Realize though that the speed is dependent on the style you use. See the section in the engine on Fonts for more information. Fonts and font faces Realize there is a distinction between a font and a font face. A font face described the shape of the characters. A font described the particular settings with which to draw the text on the screen. This includes the font face but also setting for size, color, fill style, etc. When you add a vector font 64

65 resource default both a font face with the name of the vector font is generated and an actual font that uses this font face. (Note that a font face is represented by a string. A font is an object.) When the vector font you create does not have an associated font face data file only a font is created. In this case you must specify that you want to use an existing font face. This can be a built-in font face, like Arial or serif. But it can also be the font face of a different vector font. In this way you can created many different fonts for the same font face, each with different settings. This is a lot more efficient than including the same TTF file for each of these fonts cause now the file is loaded only once by the engine and reused for the different fonts. Global Settings You can change the following global settings: Create only the fontface definition: When set only a font face definition is created and no font. This is useful when you want to create the fonts based on this font face in code. Note that in this case you must import a TTF file in the vector font. Otherwise you will get an error when building the solution. Export location: The location where the font face files will be stored, relative to the solution folder. (The builder will create two: a woff file and a ttf file.) You can use the following placeholders: %d: the data folder %s: the scripts folder %m: the media folder %a: the audio folder %f: the font folder (default) %o: the folder for other files You can set the location for these in the Configuration. Obviously, this setting is only relevant when there is a font face data file. Loading moment: When the font face will be loaded. There are three default values: start: So at the start of the game. Use this as little as possible. Only use it for images you need for a loading screen. load: The default. The font files are loaded during the loading phase of the game. game: The font files are only loaded when the game has started. You can use this for fonts that are only needed later in the game. It will speed up the loading phase. You can also use your own loading moments. Simply type a string for this. In this case you must yourself start the loading for such a moment. For more information, see the section on Loaders. Obviously, this setting is only relevant when there is a font face data file. Use an existing fontface: When set the font will use an existing font face. As indicated above, this can be used to created different fonts based on the same font face. When set, no font face file is created (not even when a font face data file is present). Existing fontface: The existing font face to use. You can either select one of the standard font faces in the drop down list that all (most) browsers support or type in a font face name yourself. 65

66 Fallback font: When for some reason, the engine fails to load the font this font is used instead. You can type the name of another font you define or you can use one of the build-in fonts using the dropdown list. This font is also used when certain characters are missing in the font face (e.g. Chinese characters). When even the fall-back font fails the game uses a default font (normally Arial). Font Settings At the top right you can specify a large number of settings for the font. (Not to be confused with the font face.) At the bottom you see an example using the settings. (This example is rendered using HTML5 so it does indeed show the font in the correct way. However, there can be slight differences between browsers.) General font settings: Here you specify the size (in pixels), the style (e.g. Italic), the weight (how bold it is; not all settings have effect for all font faces), and how the text drawn with the font should be aligned horizontally and where the baseline should be vertically. Also you can indicate an extra spacing between lines. The cross in the image shows the position where the text is drawn. Example text: Here you specify the example text you want to see in the preview. Use \n for newline characters. You can also indicate whether to show the checkerboard grid and the text box with the position of the origin. Fill settings: When checked the characters are filled. You can choose as fill style a color, a pattern, a gradient or a style you define yourself (as used in HTML5; e.g. rgba(255,0,0,0.4) to get a partially transparent red font). You can also specify the alpha transparency value used for filling. Stroke settings: When checked the characters get a stroke (outline). You can specify both fill and stroke, or one of them. You can choose as fill style a color or a style you define yourself. Next you specify the with or the outline in pixels. You can also specify the alpha transparency value used for filling. Pattern: When the fill style is set to a pattern you can specify the pattern here. You provide the name of an image in the project and whether it should be tiled horizontally and vertically. Note that the pattern image used in the preview depends on the configuration chosen in the tool bar. Only when the game is actually built what image corresponds to the image name provided. Gradient: When the fill style is set to a gradient you can specify the gradient here. You can choose a vertical or horizontal gradient, whether it has 2 or 3 colors, and you specify the colors. (Note that in code you can also use more colors.) You can also set the offset of the gradient (the position of the center of the gradient) and the size of the gradient, which specifies over which part of the text the gradient changes. Shadow: Finally you can specify the shadow. When the font is filled you get a filled shadow; otherwise you get an outline shadow. You specify the color of the shadow, its alpha value (which is combined with the color), the horizontal and vertical offset, and the amount of blur. This is typically a value between 0 (sharp shadow) or 100 (full blur). Note that shadows can be time-consuming when drawing. 66

67 tbvectorfont API A VectorFont uses curves, drawing instructions and mathematical formulas to describe the outlines of each glyph. As a result, the characters are scalable to any size without loss of quality. For each VectorFont resource you add to the project two things are created: A font face. You can use this by providing the name of the resource as a string (between quotes). This is only done when you imported a font file. A tbvectorfont object with all the settings that you indicate when creating the font resource. Unless you indicated that you only wanted a font face to be created. You can create tbvectorfonts yourself in code using the following constructor: var font = new tbvectorfont(fontface, fallbackfontface) Create new font. The first argument is a string with the name of the font face. This should either be the name of one of the vector font resources you added to the project, or the name of a standard font, like "Arial" or "serif". The optional fallbackfontface argument indicates the font to be used when the font face does not exist (was not loaded correctly) or when certain characters (like Chinese characters) are not defined in the font face. You can create a clone of a font using the following method: var font2 = font.clone() This method clones the tbvectorfont object and all its current settings to a new tbvectorfont object. The new tbvectorfont object is returned. For the fonts you created in the builder or in code the following methods exist: Properties A font has many properties that define the way the characters are drawn. You can define them when defining the vector font resource but you can also set (and get) them in code: font.setdefault() This method resets all the properties to their defaults. The default values for each property are given in the explanation of each property below. Font font.setfontstyle(style) Set the style of the font. The style is a string and can be: "italic", "oblique" or empty. Empty is the default value for the font style. When no argument is passed to this method the style will be set to empty. font.getfontstyle() Returns the current style of the font. font.setfontweight(weight) Sets the weight of the font. The weight is a string and can be: "bold", "bolder", "lighter", "normal", empty or any hundred below one thousand (example: "400" or "800"). Empty is the default value for the font weight. When no argument is passed to this method the weight will be set to empty. font.getfontweight() Returns the current weight of the font. 67

68 font.setfontsize(size) Sets the size of the font. The size is a number and corresponds with the height in pixels of one line of text. Default is 12. When no argument is passed to this method the weight will be set to 12. font.getfontsize() Returns the current size of the font. Fill You can fill the characters with a color, a pattern, a gradient, or an HTML5 style that you define yourself. Also you can indicate whether the characters should be filled or not. font.setfill(fill) Sets whether to fill the text (true) or to not fill the text (false). The default value is true. When no argument is passed fill will be set to true. font.getfill() Returns whether the text is filled. font.setfillalpha(alpha) Sets the alpha transparency of the fill style. This is a number between 0 and 1. With 0 the fill is fully transparent. The default value is 1. When no argument is passed the fill alpha will be set to 1. font.getfillalpha() Returns the alpha of the fill style. font.setfillcolor(color) Sets the fill style to be a solid color. Color can be any valid HTML5 color code (like "red", "#A012EF" or "rgba(255,0,0,1)"). The default value is "black". When no argument is passed the fill color will be set to "black". font.getfillcolor() Returns the current fill color. font.setfillpattern(image, subimage, repeath, repeatv) Sets the fill style to be a repeating pattern. image is a tbimage object which will be used as a pattern. subimage is the sub-image that is used. repeath specifies whether to repeat horizontally (true) or not (false). And repeatv specifies whether to repeat vertically (true) or not (false). font.setfillpattern(patternobject) Sets the fill style to be a repeating pattern based on the given patternobject. font.getfillpattern() Returns the current patternobject. The patternobject contains four properties: image, subimage, repeath and repeatv. font.setfillgradient(vertical, number, colors, size, offset) Sets the fill style to be a gradient. Vertical specifies whether to create a vertical (true) or horizontal (false) gradient. A vertical gradient will be applied to each individual text line and the horizontal gradient is applied to the whole text block. Number specifies the number of colors in the gradient and colors is the array of colors. The optional argument size indicates the relative size of the gradient (where the color changed). Should lie between 0 and 1. The optional argument offset is the relative offset of the center of the gradient with respect the middle (for vertical) or center (for horizontal) of the text. 68

69 font.setfillgradient(gradientobject) Sets the fill style to be a gradient based on the given gradientobject. font.getfillgradient() Returns the current gradientobject. The gradientobject contains five properties: vertical, number, colors, size, and offset. font.setfillstyle(style) Sets the fill style to any valid HTML5 fill style. This can be a color, a pattern or a gradient. The default value is "black". Use this for when you want to create your own pattern or gradient. When no argument is passed the fill style will be set to "black". font.getfillstyle() Returns the current fill style. Note that this is the fill style when set by the previous method. When you set a color or pattern using the corresponding methods, you should also use the corresponding get methods. Stroke You can give the characters an outline or stroke with a color or an HTML5 style that you define yourself. Also you can indicate whether the characters should be stroked or not. font.setstroke(stroke) Sets whether to stroke the text (true) or to not stroke the text (false). The default value is false. When no argument is passed stroke will be set to false. font.getstroke() Returns whether the text is stroked. font.setstrokealpha(alpha) Sets the alpha transparency of the stroke style. This is a number between 0 and 1, with 0 being fully transparent. The default value is 1. When no argument is passed the stroke alpha will be set to 1. font.getstrokealpha() Returns the alpha of the stroke style. font.setstrokecolor(color) Sets the stroke style to be a solid color. Color can be any valid HTML5 color code (like "red", "#A012EF" or "rgba(255,0,0,1)"). The default value is "black". When no argument is passed the stroke color will be set to "black". font.getstrokecolor() Returns the current stroke color. font.setstrokestyle(style) Sets the stroke style to any valid HTML5 stroke style. This can be a color, a pattern or a gradient. The default value is "black". Use this for when you want to create your own pattern or gradient. When no argument is passed the stroke style will be set to "black". font.getstrokestyle() Returns the current stroke style. font.setstrokewidth(width) Sets the stroke width of the stroke to the indicated number of pixels. The default value is 1. When no argument is passed the stroke width will be set to 1. 69

70 font.getstrokewidth() Returns the current stroke width. Shadow font.setshadow(active) Sets whether to draw a shadow on the text (true) or not (false). When fill is set, the shadow is only drawn behind the filled characters. Otherwise, the shadow is drawn behind the stroked characters. The default value is false. Other shadow parameters are not changed. font.setshadow(active, color, offsetx, offsety, blur) Sets whether to draw a shadow on the text (true) or not (false). The other arguments specify the color of the shadow (e.g "gray" or "rgba(10, 10, 10, 0.3)"), the offset with respect to the position of the character, and the amount of blur (typically 0-100; default = 1). When no arguments are passed at all, the shadow is set to its default (not active, transparent gray, offset 3, 3 and blur of 1). font.setshadow(shadowobject) Sets the shadow to the values in the shadow object. font.getshadow() Returns the current shadowobject. The shadowobject contains five properties: active, color, offsetx, offsety, and blur. Alignment font.setalign(align) Sets the horizontal alignment of the text. This value is a string and can be "left", "center" or "right". The default value is "left". When no argument is passed the align is set to "left". font.getalign() Returns the current horizontal alignment. font.setbaseline(baseline) Sets the baseline of the text. This value is a string and can be "top", "middle" or "bottom". The default value is "top". When no argument is passed the baseline is set to "top". font.getbaseline() Returns the current baseline. font.setlinespacing(spacing) Sets the extra line spacing in pixels between different lines of text. The default value is 0. When no argument is passed the line spacing is set to 0. font.getlinespacing() Returns the current line spacing. Drawing To draw a text with a given font, the following methods exist: font.drawsimple(text, x, y, width) This method draws the string text in the font at the indicated position. Default (x,y) indicates the topleft position of the string but you can change the alignment (see above). A newline (\n) character in the string is correctly interpreted as moving to a new line. An optional additional width argument indicates the maximum width of the drawn text in pixels. When the text is larger it is split into lines (only at a space character at the moment). font.drawalpha(text, x, y, alpha, width) 70

71 The same as the previous method but with an additional alpha transparency setting (0-1). Again, you can provide an optional additional width argument to indicate the maximum width of the drawn text in pixels. font.drawext(text, x, y, xscale, yscale, angle, alpha, width) Draws the string at (x,y) scaled with the indicated scale factor and rotated over angle degrees counter-clockwise. alpha indicates the alpha transparency and again, you can provide an optional additional width argument. Note that when scaling text actually the point size is changed. As a result, the characters remain nice. But it does lead to some rounding which can be noticeable when animating the scale. (In that case, better first create a surface for the text and use that to scale.) Size The following methods can be used to obtain information about the size of the text. font.textwidth(text, width) This method returns the width of the string when drawn in the font, with the current alignment settings. An optional additional width argument indicates the maximum width of the drawn text in pixels. When the text is larger it is split into lines (only at a space character at the moment). font.textheight(text, width) This method returns the height of the string when drawn in the font, with the current alignment settings. An optional additional width argument indicates the maximum width of the drawn text in pixels. When the text is larger it is split into lines (only at a space character at the moment). font.textbox(text, x, y, width) This method returns the bounding box of the string when drawn in the font, at the given location with the current alignment settings. An optional additional width argument indicates the maximum width of the drawn text in pixels. When the text is larger it is split into lines (only at a space character at the moment). The method return an object with the properties x, y, width and height. font.textfitsize(text, width, height, split) This method returns the largest size for the font for which the text fits in a box with the given width and height. The text is always split at \n. When the optional split argument is true it is also split with the given width. This call is somewhat expensive so better calculate it once, rather than in each draw event. So to make a text drawn inside a box of 400x200 use e.g.: var size = font.textfitsize(text, 400, 200, true); font.setfontsize(size); font.drawsimple(text, x, y, 400); 71

72 Bijlage J: Tekstbreedte bij het gebruik van spaties Een belangrijke eigenschap van een Font is dat het gerenderd kan worden met een bepaalde breedte. Valt het te renderen stuk tekst buiten deze breedte dan moet de tekst worden opgesplitst in meerdere lijnen. Voor het berekenen van de breedte gebruik ik een algoritme. Dit algoritme gaat er van uit dat de volgende bewering waar is: Lengte(woord) + Lengte(spatie) = Lengte(woord + spatie) Ik heb deze bewering bewezen met een aantal simpele testjes. Ik heb de test uitgevoerd met meerdere lettertype en verschillende font instellingen. Hieronder is te zien hoe ik steeds een tekst zonder spatie, een losse spatie en de tekst met spatie render. Vervolgens tel ik de breedte waarde bij elkaar op. Dit laat geen verschillende breedte waarde zien voor de losse en gecombineerde tekstbreedte. 72

73 Bijlage K: Vector font effect snelheid Het is voor de developers bij Tingly belangrijk om informatie te hebben over de snelheden en efficiency van de game bij het gebruik van vector fonts. Nu de implementatie van de vector fonts klaar is heb ik tests uitgevoerd om de snelheid van het gebruik van verschillende eigenschappen van de tekst te meten. De profielen Het is voor het testen van de eigenschappen handig een paar basisprofielen te gebruiken. Deze basis profielen zijn gebaseerd op voorbeelden uit de praktijk. Deze voorbeeld geven hierdoor een goede weerspiegeling van de werkelijke toepassing. De profielen zijn: Title Profile Dit profiel is een titel tekst. Deze tekst heeft een letterhoogte van 100 pixels. Daarnaast is de lengte van de tekst is kort en zal daardoor niet worden opgebroken in meerdere tekstregels. Button Profile Dit profiel is de tekst die je tegen zal komen op knopen. Korte duidelijke tekst met een opvallend lettertype. Ook deze tekst is vrij kort en zal niet worden opgebroken in meerdere tekstregels. Voor dit profiel wordt een letterhoogte van 32 pixels gebruikt. Text Profile: Dit profiel is een lap tekst. De tekst is niet groot, maar is wel erg lang. De tekst zal opgebroken worden in meerdere regels. Ook dit profiel gebruikt een lettergrootte van 32 pixels. Elke profiel heeft ook een A variant. Dit is een kopie van het profiel met als fontface Arial. De stijlen Per profiel worden er verschillende eigenschappen getest. De meetwaarden zijn de tijd die het gemiddeld duurt om de tekst een keer te renderen. De volgende stijlen worden per profiel getest: None Fill en Stroke staan allebei uit. In feite wordt er met deze stijl dus niks gerenderd. Wel wordt de tekst terugloop en tekstbox grootte uitgerekend en de context klaar gezet voor het renderen met een lege stijl. Deze stijl is dus geen voorbeeld uit de praktijk, maar de meeting moeten worden gezien als een basis meeting voor andere stijlen. Fill Dit is de standaard stijl voor het rendren van tekst. Standaard wil je een stuk tekst alleen maar vullen. Vaak zijn mooie effecten overbodig en zal je deze niet gebruiken. Stroke Deze stijl renderd alleen de randen van de tekst. 73

74 Fill and Stroke Deze stijl renderd de tekst met omlijning. Fill and Shadow Deze stijl renderd de tekst met een schaduw. Stroke and Shadow Deze stijl renderd de randen van de tekst met een schaduw. Deze stijl zal in de praktijk niet vaak voorkomen. Gradient Fill and Stroke Deze stijl renderd de tekst met een gradient. Wanneer de tekst met een gradient gerenderd wordt is de tekst vaak onleesbaarder. In de praktijk blijkt, dat wanneer een gradient wordt gebruikt, het gebruik van de tekst rand noodzakelijk is. Daarom wordt bij het gebruik van een gradient ook de rand gerenderd. Resultaten De resultaten van de uitgevoerde tests per browser, profiel en stijl. De absolute resultaten verschillen nogal sterk per browser en de tests zijn om die reden op de browser afgestemd. We kunnen de resultaten uiteraard vergelijken op een relatieve basis. De tests zijn op de browsers afgestemd op een duur van ongeveer 5 minuten voor de gehele test. Dit om de standaard frametijd zo veel mogelijk teniet te doen. De tijden zijn gemiddelde in milliseconden van het een keer renderen van een profiel. Letop!: De tijdsduur van een frame bij 60 frames per seconden is 16,67 milliseconden. Aangezien de engine zelf ook een deel van deze tijd zal innemen, zal het renderen van een enkel profiel ver onder deze 16,67 milliseconden moeten blijven. 74

75 Firefox Om er voor te zorgen dat de test binnen Firefox ongeveer 5 minuten duurt wordt het profiel per meeting 480 keer gerenderd. De tijden zijn dus een gemiddelde in milliseconden over 480 renders. Waarnemingen Uit bovenstaande resultaten zijn de volgende gegevens waar te nemen: De duur van de None stijl is kort in vergelijking met de andere stijlen Het gebruik van het build-in font Arial is sneller dan het gebruik van een extern font Stroke duurt langer dan Fill De tijdsduur van Fill and Stroke is ongeveer een opsomming van de losse Fill en Stroke tijd Het gebruik van schaduw is minder zwaar dan het gebruik van een extra Stroke of Fill Het gebruik van `GradientFill` kost weinig meer dan het gebruik van een standaard `Fill` Een profiel duurt aanzienlijk langer wanneer de tekst moet worden opgesplitst. Er is weinig verschil tussen het renderen van een grote (titel) of kleine (button) tekst Chrome Om er voor te zorgen dat de test binnen Chrome ongeveer 5 minuten duurt wordt het profiel per meeting 4800 keer gerenderd. De tijden zijn dus een gemiddelde in milliseconden over 4800 renders. Waarnemingen Uit bovenstaande resultaten zijn de volgende gegevens waar te nemen: De duur van de None stijl is lang in vergelijking met de andere stijlen Het gebruik van een build-in font Arial is vergelijkbaar met het gebruik van een extern font De tijdsduur van Fill and Stroke is ongeveer twee derde van de opsomming van de losse Fill en Stroke tijd Het gebruik van schaduw is ongeveer even zwaar als het gebruik van een extra Fill of Stroke Het gebruik van `GradientFill` kost ongeveer een halve keer meer tijd dan het gebruik van een standaard `Fill` Een profiel duurt aanzienlijk langer wanneer de tekst moet worden opgesplitst. 75

76 Er is weinig verschil tussen het renderen van een grote (titel) of kleine (button) tekst Internet Explorer Om er voor te zorgen dat de test binnen Internet Explorer ongeveer 5 minuten duurt wordt het profiel per meeting 240 keer gerenderd. De tijden zijn dus een gemiddelde in milliseconden over 240 renders. Waarnemingen Uit bovenstaande resultaten zijn de volgende gegevens waar te nemen: De duur van de None stijl is kort in vergelijking met de andere stijlen Het gebruik van een build-in font Arial is aanzienlijk sneller dan het gebruik van een extern font Stroke duurt aanzienlijk langer dan Fill De tijdsduur van Fill and Stroke is ongeveer een opsomming van de losse Fill en Stroke tijd Het gebruik van schaduw is goedkoper dan het gebruik een extra Fill of Stroke Het gebruik van `GradientFill` kost iets meer tijd dan het gebruik van een standaard `Fill` Een profiel duurt aanzienlijk langer wanneer de tekst moet worden opgesplitst Er is weinig verschil tussen het renderen van een grote (titel) of kleine (button) tekst Chrome op Android Om er voor te zorgen dat de test binnen Chrome op Android ongeveer 5 minuten duurt wordt het profiel per meeting 1200 keer gerenderd. De tijden zijn dus een gemiddelde in milliseconden over 1200 renders. Waarnemingen Uit bovenstaande resultaten zijn de volgende gegevens waar te nemen: De duur van de None stijl is lang in vergelijking met de andere stijlen Het gebruik van een build-in font Arial is vergelijkbaar met het gebruik van een extern font De tijdsduur van Fill and Stroke is ongeveer twee derde van de opsomming van de losse Fill en Stroke tijd 76

77 Het gebruik van schaduw is ongeveer even zwaar als het gebruik van een extra Fill of Stroke Het gebruik van `GradientFill` kost ongeveer een halve keer meer tijd dan het gebruik van een standaard `Fill` Een profiel duurt aanzienlijk langer wanneer de tekst moet worden opgesplitst. Er is weinig verschil tussen het renderen van een grote (titel) of kleine (button) tekst Deze waarnemingen komen sterk overeen met de waarnemingen van Chrome onder Windows. Safari op ios Om er voor te zorgen dat de test binnen Safari op ios ongeveer 5 minuten duurt moest het profiel per meeting maar ongeveer 60 keer gerenderd worden. Ik heb de test uitgevoerd op 240 keer per meeting. De tijden zijn dus een gemiddelde in milliseconden over 240 renders. Waarnemingen De duur van de None stijl is gemiddeld in vergelijking met de andere stijlen Het gebruik van een build-in font Arial is over het algemeen sneller dan het gebruik van een extern font Het gebruik van Stroke zorgt voor een gigantische achteruitgang in snelheid. Dit verschil tussen wordt versterkt in het verschil tussen externe en build-in fonts. Het gebruik van schaduw is goedkoop. Een profiel duurt aanzienlijk langer wanneer de tekst moet worden opgesplitst. Er is weinig verschil tussen het renderen van een grote (titel) of kleine (button) tekst 77

78 Extra 1: Extern Arial vs Build-in Arial Als extra onderzoek heb ik de build-in fonts vergeleken met het zelfde font ingeladen zoals een extern font. Hieronder staan de resultaten van deze tests binnen verschillende browsers: Chrome: Firefox: Internet Explorer: Waarnemingen Uit de resultaten blijkt dat er geen merkbaar verschil is in snelheid tussen het gebruik van een buildin en het gebruik van een extern font. 78

79 Extra 2: Filltypen Als tweede extra test heb ik de verschillende mogelijke filltypen met elkaar vergeleken. De verschillende filltypen zijn Color, Pattern en Gradient. In onderstaande tabellen staan de resultaten van de tests per browser: Chrome: Firefox: Internet Explorer: Waarnemingen Uit de resultaten blijkt dat het gebruik van een Pattern het sloomste filltype is. Daarna de Gradient en Color is het snelst. Binnen Chrome is het verschil tussen Pattern en de andere filltypen aanzienlijk groot. En binnen Internet Explorer is de Gradient relatief tot de andere filltypen een stuk minder snel dan in de ander browsers. 79

80 Globale waarnemingen De waarnemingen, die aan de hand van de resultaten van verschillende browsers gevonden zijn, komen gedeeltelijk overeen. Er zijn echter ook een aantal grote verschillen. Waarnemingen op basis van alle browsers zijn: De tijdsduur van Fill en Stroke is ongeveer een opsomming van de losse Fill en Stroke tijd. Het gebruik van `GradientFill` kost weinig meer dan het gebruik van een standaard `Fill`. Een profiel duurt aanzienlijk langer wanneer de tekst moet worden opgesplitst in meerdere tekst regels. Er is weinig verschil tussen het renderen van een grote (titel) of kleine (button) tekst. Noemenswaardige browser specifieke waarnemingen: De absolute resultaten verschillen heel erg tussen de verschillende browsers. Zo is Chrome een factor 10 sneller dan Firefox en zelfs een factor 20 sneller dan Internet Explorer. Chrome op Android is ook vrij snel, maar wel een kwart van de snelheid van Chrome onder Windows. Heel opvallend is dat Safari op ios zeer sloom is in externe fonts. Vooral met Stroke. Tijdsopsomming Om het beeld duidelijker te maken staan hieronder een deel van de resultaten verwerkt in tabelvorm. In deze grafiek is goed te zien dat het gebruik van full (GradientFill, Stroke en Shadow) in de meeste gevallen een factor 3 aan extra tijd kost. Met uitzonderingen op Internet Explorer (factor 10) en Safari (factor 150). Daarnaast is ook te zien dat het opsplitsen van de tekst in meerder regels (in het Text profiel) de tijd ongeveer verviervoudigt. Dit komt overeen met het aantal regels dat gerenderd moet worden. De tijd zit m dus in het renderen. Het opsplitsen zelf kost naar verhoudingen minder tijd en wordt daarnaast altijd voor een deel uitgevoerd. Tijdsgrafiek Schematische weergave van de tijdsbesteding bij het renderen van teksten met verschillende effecten. Deze weergave geeft relatieve verschillen aan en geeft dus geen precieze waarden weer. 80

81 Bijlage L: Vector font versus bitmap font en losse canvas snelheden Nu de implementatie gereed is is het interessant om de oude bitmap font implementatie en de nieuwe vector font implementatie opnieuw met elkaar te vergelijken. De eerdere vergelijkingen waren steeds op basis van het renderen van een simpele tekst zonder effecten en regel overloop. Nu kunnen we deze effecten en regel overloop meenemen in de vergelijkingen. De profielen en stijlen De profielen zijn gelijk aan die in Bijlage K: Vector font effect. Er zijn wel een aantal stijlen bij gekomen. Deze stijlen worden gebruikt voor zowel de losse canvas als de bitmap font implementaties. Canvas6 De tekst wordt met de Gradient Fill and Stroke and Shadow stijl gerenderd op een losse canvas. Deze canvas wordt vervolgens op het scherm gerenderd. Na zes keer wordt op een nieuwe losse canvas gerenderd en deze weer wordt gebruikt voor de volgende zes renders. Canvas12 / Canvas24 / Canvas48 Zelfde als de vorige stijl, maar dan om de 12/24/48 renders. Canvas Zelfde als de vorige stijl, maar dan wordt er maar een losse canvas gebruikt voor alle verdere renders. Bitmap De tekst wordt gerenderd met een bitmap font. De stijl hiervan staat vast tijdens de buildtime en heeft geen invloed op de rendertijd, maar kan dus ook niet worden gewijzigd of geschaald tijdens runtime. Resultaten De tests zijn een stuk langer geworden en zijn niet afgestemd op de 5 minuten (zoals in Bijlage K: Vector font effect ). Chrome 81

82 Firefox Internet Explorer Android Browser Safari op ios - ipad 82

83 Waarnemingen Hieronder de waarnemingen van de gevonden gegevens binnen de verschillende browsers. Chrome De tijdsduur van het renderen van de Bitmap stijl is vergelijkbaar met een Fill and Shadow stijl. Het gebruik van een losse canvas wordt goed bruikbaar wanneer je een tekst hebt met meerdere actieve effecten. Het gebruik wordt rendabel vanaf ongeveer 24 renders bij het renderen van het Titel profiel. Bij het renderen van het Button profiel is dit effect al iets eerder voordelig. Bij het renderen van een stuk tekst dat wordt opgebroken in meerdere lijnen is het effect al lonend bij zes renders. Firefox De tijdsduur van het renderen van de Bitmap stijl is korter in vergelijking tot een simpele Fill stijl. Het gebruik van een losse canvas is vele male sneller dan het steeds opnieuw renderen van de tekst. Dit is dus voor elk aantal renders rendabel. Internet Explorer De tijdsduur van het renderen van de Bitmap stijl is ongeveer de helft van een simpele Fill stijl. Het gebruik van een losse canvas is vele male sneller dan het steeds opnieuw renderen van de tekst. Dit is dus voor elk aantal renders rendabel. Android Browser De tijdsduur van het renderen van de Bitmap stijl is vergelijkbaar met een Fill and Shadow stijl. Het gebruik van een losse canvas lijkt hier niet veel optimalisatie te bieden. Behalve bij het Text profiel. Safari op ios - ipad De tijdsduur van het renderen van de Bitmap stijl is iets langer dan het renderen van een simpele Fill stijl. Het gebruik van een losse canvas heeft heel sterk invloed. Vooral omdat het gebruik van Stroke enorm veel tijd in beslag neemt. Deze tijd hoeft maar een keer te worden besteed wanneer er op een losse canvas wordt gerenderd. 83

84 Bijlage M: Anti-Aliasing in verschillende browsers Als een browser karakter renderd dan zorgt de browser er voor dat de tekst wordt geanti-aliased. Hoe (en of) de browser anti-aliasing toepast is niet via een standard HTML5 feature beschreven of aan te geven. Waarnemingen Hieronder is per browser een voorbeeld te zien van de anti-aliasing. De kleine letter a is met een letterhoogte van 100 pixels gerenderd. En daarnaast op is een rasterversie, op pixel niveau, de antialiasing die wordt toegepast te bekijken. Android Browser Google Chrome 84

85 Mozilla Firefox Internet Explorer Safari Conslusie Duidelijk is dat in elke browser de anti-aliasing wordt toegepast. Wat echter op valt is dat Google Chrome de enige browser is waar de anti-aliasing duidelijk een stuk minder is dan in de ander browsers. Dit zal met zeer grootte teksten (letterhoogte van meer dan 100px) gaan opvallen. Een speculatie die direct uit deze conclusie voortvloeit is de volgende vraag: Is het minder toepassen van anti-aliasing in Google Chrome de reden van het grootte snelheidsvoordeel op andere browsers?. Dit is niet te achterhalen en blijft een speculatie. Het is in ieder geval zaak om goed op te letten dat wanneer deze anti-aliasing bug wordt gepatched, Google Chrome trager kan worden. 85

86 Bijlage N: Gecombineerde Lettertypen Tijdens het gebruik van mijn library heeft een andere developer een font gevonden dat een losse variant heeft voor de bold, italic en bold-italic varianten van het font. Naast het font dat deze developer vond zijn er nog een hoop andere fonts die zijn opgebouwd uit meerdere lettertype varianten. Deze fonts gebruikt naast een standaard font file (.ttf bestand), aparte font files voor elke variant. Het is interessant om in de Tingly Builder fonts te kunnen maken waarbij deze font files aan elkaar gekoppeld kunnen worden. Inladen De fontface definities in css die gebruikt worden om het fontface te definiëren geven de mogelijkheid tot het specificeren van verschillende varianten van hetzelfde font. Op deze manier kan op een via de browser geïmplementeerd manier een losse font file worden toegekend aan een bepaalde variant. Fallback mechanisme Een nadeel van deze fontface varianten is dat het fallback mechanisme niet meer intuïtief is. Het fallback mechanisme van deze font varianten werkt anders dan verwacht. In onderstaand plaatje staat het fallback mechanisme gevisualiseerd: 86

87 De oranje pijlen geven aan waarop een font terug valt wanneer deze niet geladen is. De oranje pijl met het rode kruis geeft aan hoe je zou verwachten dat het fallback mechanisme zou werken. Maar tegen verwachtingen in werkt het dus niet op deze manier. Toepasbaarheid Na het tbvectorfontloader object omgeschreven te hebben om support te bieden aan meerdere font files zijn de wijzigingen voorgelegd aan Mark Overmars. Mark was zeer te spreken over de adequate en goede response op het verwerken van feedback van een mede developer. Mark heeft er voor gekozen de feature niet te implementeren omdat het niet mogelijk is om meerdere bestanden te koppelen aan een enkele resource in de Tingly Builder. Het supporten hiervan zou een immense herschrijving van de Tingly Builder vereisen. Dit is de tijd niet waard. Daarnaast heb ik Mark uitgelegd dat het fallback mechanisme met deze feature erg vaag en onduidelijk wordt. Dit heeft er mede toe geleid geen verdere stappen te ondernemen om gecombineerde lettertypen te implementeren. 87

88 Bijlage O: Skew Transformaties op de canvas Elke object dat op de canvas wordt gerenderd wordt onderworpen aan een transformatie matrix. Deze transformaties kunnen worden gebruikt voor translation, rotation, scale en skew. De bovenstaande transformaties zijn allemaal affine. Dit houdt in dat lijnen die voor de transformatie parallel lopen ook na de transformatie nog parallel lopen. Het combineren van affine transformaties zal altijd resulteren in een nieuwe affine transformatie. In onderstaande afbeelding het verschil tussen affine en none-affine goed te zien. None-affine transformaties zijn in HTML5 niet mogelijk. 88

89 Voor het gebruik in een WordArt tekst is het handig om de tekst none-affine te kunnen transformeren. In onderstaand figuur is te zien hoe deze none-affine transformatie eruit ziet. Deze manier van skewing is in HTML5 niet mogelijk. Het is niet mogelijk om zo n transformatie toe te passen voor het gebruik van een WordArt tekst. Het is wel mogelijk om de tekst steeds iets kleiner te renderen. Hierdoor mis je echter het verschil in grootte tussen de linker en rechter kant van elk karakter. Dit zorgt voor een schokkerige en minder mooi effect. Daarnaast kunnen we de skewing per karakter toepassen. Hierdoor krijg je toch een redelijk effect bij sommige stijlen. Hieronder staan de verschillende transformaties afgebeeld. 89

90 Bijlage P: WordArt Documentatie Dit is de documentatie die is geschreven voor de WordArt implementatie. Deze WordArt implentatie maakt gebruik van de vector font library. De documentatie is vrij te bekijken door developers die gebruik maken van de Tingly Builder. De documentatie is bedoeld om ondersteuning te bieden aan de developer tijdens het gebruik van de library. De developer is niet per definitie Nederlands, de onderstaande documentatie is daarom geschreven in het Engels. WordArt WordArt is a decorative way of styling text. You can create your own WordArt styles or use predefined WordArt styles to draw text. Note: drawing WordArt can take up way more time than drawing an average VectorFont text. A WordArt drawing always returns a surface. This surface contains the drawn text. You must draw this surface to the screen. tbwordart Namespace WordArt uses its own namespace. This is tbwordart. The tbwordart namespace consists of the following elements: Presets; Changers; Render Function Presets Presets are the predefined WordArt kinds that can be used for creating WordArt. Changers Changers are functions that change a WordArt kind. Render Function Render function is the function that can render text using a WordArt kind. This function expects the WordArt kind and a text. The function returns a surface. var surface = tbwordart.rendertext(kind, Hello World ); surface.drawsimple(10, 10); Kind A kind describes a singly style of WordArt. A WordArt kind is simply an object that consists of the following properties: layers Layers is an array of layer objects. Each layer is an individual render. Each layer contains the following properties: font - The tbvectorfont or tbbitmapfont that is used when drawing characters for this layers; x and y The offset in pixels for the x and y direction (optional) transformlayeroffset A boolean whether to apply the transformations on the offset 90

91 mainlayer The index of the layer that is used for calculating the width of the characters. (default 0) Note: The mainlayer must be a VectorFont! loopedprogress A boolean whether the relative progress is looped or not-looped. (default false) Text H E L L O Looped Progress Not-Looped CharID The relative progress is a property of the charinfo object. This object is send to the positionfunc, contextfunc, fontfunc and charmapfunc. A looped progress is useful when drawing text in a circle. A not-looped progress is used in most other situation. When not-looped is used, the last character will have a relative progress of trackingwidthbased A boolean whether the tracking between characters is based on the width of the characters. When false the tracking will be based on the height of the characters. (default true) tracking The extra tracking between each character. (default 0) positionfunc A function that returns the positions for the characters. The charinfo argument is passed to this function. perpendicular A boolean whether the characters should be rotated perpendicular on the line. (default true) perpendiculartype A value what type of perpendicular type to use. Can be skew or rotate. When using skewing the line angles greater than 60 degrees are not recommended, otherwise artifacts may appear. (default rotate ) pixeloffsetfactor The offset factor used for calculating the angle of a point on the line (default 8). Higher numbers will inspect a smaller portion of the line to calculate the angle. canvasextendall, canvasextendleft, canvasextendtop, canvasextendright, canvasextendbottom The values by which the canvas is extended in pixels. (default 0) contextfunc A function that will receive the charinfo and context as arguments. (default undefined) fontfunc A function that will receive the charinfo and font as arguments. (default undefined) 91

92 charmapfunc A function that will receive the charinfo and current character as arguments. You must return a character. (default undefined) Note: the width of the mainlayer will be calculated before applying the charmapfunc. If you want the width based on the new character-width you should simply change the text before passing it to the rendertext-function. CharInfo object All function that you can specify on the WordArt kind receive the charinfo object as first argument. The charinfo object is an object that holds information about the character that is currently being drawn. The charinfo object contains the following information: progress An object containing the absolute progress in pixels and the relative progress as a value between 0 and 1; layerid The id of the current layer. Note that in the postionfunc this is always the mainlayer; charid The id of the current character in the text; text The text that is drawn; totalwidth The total width in pixels of the text that is drawn. charinfo object: { progress: { relative absolute }, layerid charid text totalwidth } Presets Presets are predefined styles of WordArt. Presets will always return a newly created WordArt kind object. You can create a WordArt kind from a preset by using the following code: var kind = tbwordart.presets.<name>(font, <arguments>) Each preset has a name. Some presets have additional arguments you need to specify. The presets currently available are: normal This is the default WordArt preset that can be used to create your own. rainbow This is a rainbow WordArt preset that can be used to create rainbow text. This preset also expects one additional argument: The height of the rainbow. This value is usually between 40 and 100. Note: You can add your own presets. Simply set a property on the preset object. Example: tbwordart.presets.mypreset = function(font) { var kind = tbwordart.presets.normal(font); //Alter kind here! } return kind; 92

93 Changers Changers are predefined operations on a Word Art kind that change the behavior of it. A changer always expects the kind as a first argument and it will modify the given kind. Some changers expect some additional arguments. You can use a changer by running the following code: tbwordart.change.<type>.<name>(kind, <arguments>) All the changers are displayed in following code block. Arguments surrounded by [ and ] are optional and can be omitted. layers tbwordart.change.layers.normal(kind, font) tbwordart.change.layers.multistroke(kind, font, strokes) tbwordart.change.layers.neon(kind, font) tbwordart.change.layers.anaglyphic(kind, font, [color1], [color2]) positionfunc tbwordart.change.positionfunc.normal(kind) tbwordart.change.positionfunc.vertical(kind, [perpendicular]) tbwordart.change.positionfunc.arc(kind, height) tbwordart.change.positionfunc.circle(kind, [radius]) contextfunc tbwordart.change.contextfunc.normal(kind) tbwordart.change.contextfunc.rotationoffset(kind, angle) tbwordart.change.contextfunc.yscaling(kind, normalsize, peaksize, [layerid]) fontfunc tbwordart.change.fontfunc.normal(kind) tbwordart.change.fontfunc.colorspectrum(kind) tbwordart.change.fontfunc.fontsize(kind, normalsize, peaksize, [layerid]) charmapfunc tbwordart.change.charmapfunc.normal(kind) All changers that are named normal will reset the function to their default. You can use the above changers as examples for your own functions. When creating your own WordArt you can take a look at these changers in the engine code and alter them to your liking. Note: You can add your own changers. Simply set a property on the change object. Example: tbwordart.change.positionfunc.sinuswave = function(kind) {.. } 93

94 Bijlage Q: Stroke artifacts Wanneer er strokes worden gebruikt verschijnen er lelijke artifacts van strokes die uitsteken. Dit begon bij het gebruikt van WordArt erg op te vallen. Er moest dus een oplossing voor worden gevonden. De oplossing Standaard staat op de linejoin van lijnen op miter ingesteld. Hieronder zijn de verschillende linejoin typen te zien. Wanneer bevel of round wordt gebruikt dan wordt de stroke afgekapt. Nu kan de stroke niet meer te ver uitsteken. Op deze manier kan het dus worden opgelost. Aan de vector font API moet deze linejoin eigenschap toegevoegd worden. Een vector font heeft daarom nu een strokejoin eigenschap. Deze eigenschap kan round, bevel of miter zijn. Standaard staat deze eigenschap op miter. De volgende documentatie is toegevoegd aan de vector fonts informatie in de Tingly Builder. font.setstrokejoin(join) Sets the stroke join of the stroke. The default value is "miter". Allowed values are "round", "bevel" and "miter". When no argument is passed the stroke width will be set to "miter". font.getstrokejoin() Returns the current stroke join Snelheidstest Nu er verschillende waarde kunnen worden ingesteld voor linejoin is het interessant om de kijken of deze verschillende waarde ook verschillende tekensnelheden hebben. Er is een test uitgevoerd naar de tekensnelheden van de verschillende linejoin typen. 94

95 IE Firefox Chrome miter 1,250ms 0,974ms 0,060ms round 1,345ms 1,124ms 0,058ms bevel 1,236ms 1,054ms 0,057ms Uit deze test blijkt dat het gebruik van round of bevel ongeveer tien procent extra tijd kost dan het gebruik van het standaard jointype miter. De verschillen tussen de jointypen zijn daarentegen wel erg klein. Toch valt op dat het standaard jointype miter in IE en Firefox ondanks het minieme verschil het snelste is. Dit is de reden dat ook in de vector font library het jointype standaard op miter staat ingesteld. 95

96 Bijlage R: Niet-westerse karakters De aanleiding van dit onderzoek was dat Tingly Games graag ziet dat de engine waarmee de games ontwikkeld worden het gebruik van niet-westerse karakters kan ondersteunen. Naar aanleiding van deze wens zijn de tbvectorfont API en tbwordart API gemaakt. Om niet-westerse karakters te ondersteunen moeten alle stappen in het ontwikkelingsproces overweg kunnen en ondersteuning bieden aan niet-westerse karakters. Hieronder staan alle stappen beschreven. Lokalisatie tool De lokalisatie tool wordt gebruikt om de teksten in verschillende talen in te kunnen voeren voor het gebruik in de spellen. In deze tool kunnen de verschillende talen worden beheert, aangepast en samengesteld voor games. Onderdelen in de tool: Tekst invoer: De tekst invoer ondersteund het invoeren van niet-westerse karakters. Samenstellen: Wanneer voor een game een lokalisatie file wordt samengesteld zijn niet-westerse karakters toegestaan. Tingly Builder De Tingly Builder wordt gebruikt om de spellen to produceren. In deze tool moeten de nietwesterse karakters kunnen worden ingeladen, opgeslagen en worden samengevoegd bij het bouwen van een game. Onderdelen in de builder: Inladen: Bij het inladen van de karakters worden niet-westerse karakters ondersteund. Opslaan: Bij het opslaan van bestanden die niet-westerse karakters bevatten gaan nietwesterse karakters verloren. Deze karakters worden via een RichTextBox opgeslagen op de harde schijf. Deze opslag methode maakt gebruik van een ASCII encoding. In deze encoding gaan de niet-westerse tekens verloren. Door een kleine aanpassing in de code worden de teksten opgeslagen met een UTF-8 encoding waardoor de niet-westerse tekens behouden blijven. Bouwen: Wanneer een game wordt gebouwd en de JavaScript file wordt samengesteld zijn nietwesterse karakters toegestaan. Browsers De browsers moeten de games uiteindelijk aan de eindgebruiker laten zien. De browsers moeten het tekenen van de niet-westerse karakters ondersteunen. Onderdelen in de browser: Tekenen: Alle browsers ondersteunen het gebruik van niet-westerse karakters. 96

8 Word Art Teksten. De documentatie van deze API is te lezen in Bijlage P: WordArt Documentatie.

8 Word Art Teksten. De documentatie van deze API is te lezen in Bijlage P: WordArt Documentatie. 8 Word Art Teksten De tbvectorfont library maakt gebruik van alle standaard functionaliteit die de browsers bieden. Naast deze standaard functionaliteit ziet Tingly Games graag ook uitgebreidere tekst

Nadere informatie

Les W-01: HTML. Een website bouwen in HTML. 2006, David Lans

Les W-01: HTML. Een website bouwen in HTML. 2006, David Lans Les W-01: HTML 1.0 HTML Websites zijn opgebouwd uit afzonderlijke webpagina s. Deze webpagina s zijn geschreven in een aparte taal, HTML. De afkorting HTML staat voor Hyper Text Markup Language. Vrij vertaald

Nadere informatie

Grafisch ontwerp. Referenties. https://developers.google.com/webmasters/mobile-sites/ http://www.bluetrainmobile.com/mobile-showcase

Grafisch ontwerp. Referenties. https://developers.google.com/webmasters/mobile-sites/ http://www.bluetrainmobile.com/mobile-showcase Mobiel Datanose Op dit moment is mobiel datanose niet goed gedaan; je krijgt gewoon de site te zien zoals je het te zien krijgt op pc's of laptops. Maar vaak heb je het probleem dat je op je mobiel moet

Nadere informatie

HTML Graphics. Hans Roeyen V 3.0

HTML Graphics. Hans Roeyen V 3.0 HTML Graphics Hans Roeyen V 3.0 19 maart 2015 Inhoud 1. HTML5 Canvas... 3 1.1. Het Canvas element... 3 2. SVG Element... 9 2.1. SVG vergeleken met Canvas... 9 2.2. Een cirkel tekenen met SVG... 10 2.2.1.

Nadere informatie

Extra: Hoe u uw website met HTML kunt verbeteren

Extra: Hoe u uw website met HTML kunt verbeteren Extra: Hoe u uw website met HTML kunt verbeteren HTML is een afkorting van Hyper Text Markup Language. Zoals de term al zegt is het een "opmaak taal", dat wil zeggen het vertelt de browser door middel

Nadere informatie

WordPress sneller maken!

WordPress sneller maken! WordPress sneller maken! In een paar eenvoudige stappen wordt je site een stuk sneller. Verlies geen bezoekers door onnodig lange laadtijden. Copyright 2004-2013 Antagonist B.V. 1 Inhoudsopgave Optimalisatie

Nadere informatie

Voorgeslacht rapport generator

Voorgeslacht rapport generator Beschrijving Voorgeslacht rapport generator versie 3.5 (16 mei 2006) auteur:berend Meijer De voorgeslacht rapport generator is een sjabloon voor gebruik met het genealogie-programma Aldfaer (www.aldfaer.nl).

Nadere informatie

HANDLEIDING INFOGRAPHIC SOFTWARE Versie 2.3 / jan 2014

HANDLEIDING INFOGRAPHIC SOFTWARE Versie 2.3 / jan 2014 HANDLEIDING INFOGRAPHIC SOFTWARE Versie 2.3 / jan 2014 Inhoudsopgave 1. Inleiding... 3 2. Systeemvereisten... 3 3. Installeren van de software... 4 4. Programma instellingen... 5 5. Importeren van een

Nadere informatie

Reflectie Verslag. 25 januari. Game Developement Informatica Hogeschool v. Amsterdam

Reflectie Verslag. 25 januari. Game Developement Informatica Hogeschool v. Amsterdam Reflectie Verslag 25 januari 2013 Het reflectie verslag met nabeschouwing en beoordelingen over de stage van Simon Karman bij het bedrijf Sticky Studios. Game Developement Informatica Hogeschool v. Amsterdam

Nadere informatie

Handleiding OpenOrg.nl

Handleiding OpenOrg.nl Handleiding OpenOrg.nl 1. Inleiding OpenOrg.nl is een wiki, een webtoepassing waarmee webdocumenten gezamenlijk kunnen worden bewerkt. Meerdere personen kunnen elkaars documenten en bijdragen aanvullen

Nadere informatie

Frontend ontwikkeling

Frontend ontwikkeling Frontend ontwikkeling Mark Jansen Edwin Vlieg PHPFreakz ledendag 10 november 2007 Frontend ontwikkeling De interface is je product richting de eindgebruiker Goede PHP code met een slechte interface geeft

Nadere informatie

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Afronding vak JQuery, mail(formulieren) en social media Testen Website-design 5-1-2015 2 AFRONDING VAK

Nadere informatie

Onderzoeksvaardigheden 2

Onderzoeksvaardigheden 2 Performance van Phonegap Naam: Datum: april 2012 Studentnummer: 0235938 Opleiding: CMD Docenten: Pauline Krebbers Modulecode: MEDMO101DT Modulenaam: Onderzoeksvaardigheden 2 / Media & Onderzoek Inhoudsopgave

Nadere informatie

Het ideale font voor programmeurs

Het ideale font voor programmeurs Het ideale font voor programmeurs Onderzoeksverslag Hogeschool Utrecht Communicatie & Media Design Auteur: Benjamin van Bienen (1576750) Docent: Dick Swart Specialisatie: Visual design seminar 2014-B Samenvatting

Nadere informatie

Opdrachtformulering (pagina 3 van 7)

Opdrachtformulering (pagina 3 van 7) Afstudeerovereenkomst van Tim Wils Bijlage 1 Opdrachtformulering (pagina 3 van 7) Dit project betreft een eigen framework (soort API) waarmee relatief gemakkelijk en in korte tijd eindproducten opgezet

Nadere informatie

HTML5 VIDEO. Een stand van zaken Jeroen Wijering, LongTail Video

HTML5 VIDEO. Een stand van zaken Jeroen Wijering, LongTail Video HTML5 VIDEO Een stand van zaken Jeroen Wijering, LongTail Video WHOIS JW? Auteur van de JW Player (2005) Open-source Flash video speler voor embedden in websites. Gebruikt door YouTube in 1e jaar Helaas,

Nadere informatie

ailexpert Tips & Tricks Email design

ailexpert Tips & Tricks Email design ailexpert Tips & Tricks Email design 1 Inleiding E-mail marketing is een vorm van direct marketing waarmee een bedrijf in contact kan komen te staan met haar klanten. De markt van E-mail marketing is de

Nadere informatie

Scrum. Een introductie

Scrum. Een introductie Organisatie SYSQA B.V. Pagina 1 van 10 Scrum Een introductie Almere 1999 Proud of it Pagina 1 van 10 Organisatie SYSQA B.V. Pagina 2 van 10 Inhoudsopgave 1 Inleiding... 3 2 Scrum... 4 3 Scrum rollen...

Nadere informatie

Handleiding. Maak gemakkelijk een fotoboek

Handleiding. Maak gemakkelijk een fotoboek Handleiding Maak gemakkelijk een fotoboek In deze handleiding voor de software van FotoboekShop.nl worden alle stukjes met behulp van afbeeldingen overzichtelijk uitgelegd, zodat je stap voor stap je fotoproduct

Nadere informatie

Web Presence Builder. Inhoud

Web Presence Builder. Inhoud Web Presence Builder Inhoud Inhoud... 1 Wat is Web Presence Builder?... 2 Het categoriescherm... 2 De eerste stappen naar een eigen website... 3 Onderwerp selecteren en website naam aanpassen... 3 Vooraf

Nadere informatie

Voorbeeld: In een tekstverwerker staat: Dit is scheve tekst Om in HTML hetzelfde effect te krijgen moet er staan: dit is scheve tekst

Voorbeeld: In een tekstverwerker staat: Dit is scheve tekst Om in HTML hetzelfde effect te krijgen moet er staan: <i>dit is scheve tekst</i> Wat is HTML? HTML staat voor HyperText Markup Language. Een HTML tekst bestaat uit zogenaamde platte tekst (ook wel de eerste 128 tekens van ASCII genoemd). In tegenstelling tot bijvoorbeeld tekstverwerker

Nadere informatie

Handleiding Joomla 3.x

Handleiding Joomla 3.x Handleiding Joomla 3.x Hoe maak ik een call to action button? Geschreven: Sandra van der Heijden (2015) AdviesMies Introductie Het wordt regelmatig geroepen. Je hebt call to action buttons nodig op je

Nadere informatie

Titel: flashvars.html

Titel: flashvars.html Data uitwisselen met Flash: the easiest way Kris Merckx www.ardeco.be Macromedia Flash-bestanden kunnen opgenomen worden in HTML. Een Flashfilm (*.swf) kan tekst, afbeeldingen, film, geluid en vectorbeelden

Nadere informatie

Augustus& Handleiding - Publisher Tool 3

Augustus& Handleiding - Publisher Tool 3 Augustus& 15 16 Handleiding - Publisher Tool 3 Inhoudsopgave 1. Welkom... 3 1.1 Inloggen... 3 1.2 Dashboard... 4 2. Boeken... 5 2.1 Boeken aanmaken... 5 2.2 Het bewerken van boekinformatie.... 7 3. Verrijkingen...

Nadere informatie

Plan van Aanpak Afstuderen

Plan van Aanpak Afstuderen Plan van Aanpak Afstuderen Michiel Graat 27-09-2005 Inhoudsopgave 1 Inleiding 3 1.1 Terminologie............................. 3 1.2 Opdracht............................... 4 1.3 JavaCard...............................

Nadere informatie

Documentatie WD32. Christine van Woensel M32

Documentatie WD32. Christine van Woensel M32 Documentatie WD32 Christine van Woensel M32 Ontwerpkeuzes per device resolutie Desktop (1025 1600px & 769 1024px): Tablet (481 768px): Smartphone (321 480px & tot 320px): Algemeen: Alle ontwerpen voor

Nadere informatie

Werken met afbeeldingen in webpagina's

Werken met afbeeldingen in webpagina's Werken met afbeeldingen in webpagina's In webpagina's komen heel vaak afbeeldingen voor. Toch gaan webpagina's helemaal anders om met afbeeldingen dan bijvoorbeeld een PowerPoint-presentatie of een Word-document.

Nadere informatie

Een pagina toevoegen en/of bewerken.

Een pagina toevoegen en/of bewerken. Een pagina toevoegen en/of bewerken. Na het inloggen in het CMS zie u het volgende: 2 3. Een klik op dit menu geeft een overzicht van alle pagina s waar de website op dat moment uit bestaat: 2. Een klik

Nadere informatie

NVU work shop. Kees Moerman http://www.keesmoerman.nl November 2006. 1. Overzicht van een web site. Wat is een web site HTML files

NVU work shop. Kees Moerman http://www.keesmoerman.nl November 2006. 1. Overzicht van een web site. Wat is een web site HTML files NVU work shop Moerman http://www.keesmoerman.nl November 2006 1 1 Overzicht 1. Overzicht van een web site Wat is een web site HTML files 2. NVU: Een HTML editor Overzicht Een eerste pagina Configuratie

Nadere informatie

HANDLEIDING VORMGEVING E-MAIL TEMPLATES

HANDLEIDING VORMGEVING E-MAIL TEMPLATES HANDLEIDING VORMGEVING E-MAIL TEMPLATES copyright 2012 Blinker BV Inhoudsopgave H1 H2 H3 Voorwoord... 2 Een e-mail nieuwsbrief ontwerpen... 3 2.1 Wat we verwachten... 3 2.2 De breedte van je ontwerp...

Nadere informatie

Handleiding. Certificaat installeren

Handleiding. Certificaat installeren Handleiding Certificaat installeren Inhoudsopgave 1. Installatie op PC s met Windows 2 2. Voor niet-windows PC s en andere apparatuur 3 1.1. Microsoft Internet Explorer / Google Chrome 3 1.2. Mozilla Firefox

Nadere informatie

Hand-out Web Technologies, werkcollege 4 Alex Reuneker (a.reuneker@hhs.nl), 2012

Hand-out Web Technologies, werkcollege 4 Alex Reuneker (a.reuneker@hhs.nl), 2012 Hand-out Web Technologies, werkcollege 4 Alex Reuneker (a.reuneker@hhs.nl), 2012 1. Id s en klassen (id- en class-attributen) id-attribuut: Elk HTML-element kan gespecificeerd worden door middel van een

Nadere informatie

Publishing & Printing Company B.V.

Publishing & Printing Company B.V. STAPPENPLAN WEBSITE Versie 1.3 Publishing & Printing Company B.V. Weth. Sangersstraat 38 (0)46-437 73 11 KVK 140.41959 6191 NA Beek web@pp-company.nl BTW NL 0085.52.861.B01 Algemene voorwaarden www.pp-company.nl

Nadere informatie

Workshop XIMPEL TV Winoe Bhikharie Vrije Universiteit Amsterdam www.ximpel.net / info@ximpel.net

Workshop XIMPEL TV Winoe Bhikharie Vrije Universiteit Amsterdam www.ximpel.net / info@ximpel.net Workshop XIMPEL TV Winoe Bhikharie Vrije Universiteit Amsterdam www.ximpel.net / info@ximpel.net In deze workshop maak je kennis met XIMPEL TV en interactieve video. Bij interactieve video kun je de video

Nadere informatie

IMG IS EVERYTHING FRONTEND DEVELOPMENT LES 6

IMG IS EVERYTHING FRONTEND DEVELOPMENT LES 6 IMG IS EVERYTHING FRONTEND DEVELOPMENT LES 6 VORIGE WEEK De principes van het web Multiscreen Responsive webdesign Mediaqueries Mobile first Even heel kort samenvatten waar we het ook al weer over hebben

Nadere informatie

Dyslexie font digitale handleiding PARTICULIER

Dyslexie font digitale handleiding PARTICULIER Dyslexie font digitale handleiding PARTICULIER Inleiding Het Dyslexie Font en het tekstbehandelplan zijn ontwikkeld om mensen met dyslexie met minder moeite te laten lezen. De letters zijn zodanig ontworpen

Nadere informatie

Handleiding Certificaat installeren

Handleiding Certificaat installeren Handleiding Certificaat installeren Inhoudsopgave 1. Installatie op PC s met Windows 2 2. Voor niet-windows PC s en andere apparatuur 4 1.1. Microsoft Internet Explorer / Google Chrome 5 1.2. Mozilla Firefox

Nadere informatie

Globale kennismaking

Globale kennismaking Globale kennismaking Kennismaking Tesla CMS 1. Dashboard 2. pagina beheer - pagina aanmaken - pagina aanpassen - pagina verwijderen - pagina seo opties - zichtbaarheid pagina 3. subpagina beheer - subpagina

Nadere informatie

Het opzetten van deze applicatie

Het opzetten van deze applicatie Installatie Codeigniter 2.1.3 Om met Codeigniter te kunnen werken, heb je een werkende Codeigniter 2.1.3. omgeving nodig. Die gaan we hier maken. We zullen eerst deze omgeving gaan opzetten en inrichten.

Nadere informatie

Handleiding Content Management Systeem

Handleiding Content Management Systeem Handleiding Content Management Systeem Inhoudsopgave Inhoudsopgave... 2 1. Inloggen... 3 2. Paginavolgorde... 3 3. Pagina en menutitel... 3 4. Pagina s bewerken... 4 5. De tekstverwerker... 4 6. Interne

Nadere informatie

ProjectHeatmap. Onderzoeksrapport v0.5 11-03-11 Dennis Wagenaar

ProjectHeatmap. Onderzoeksrapport v0.5 11-03-11 Dennis Wagenaar ProjectHeatmap Onderzoeksrapport v0.5 11-03-11 Dennis Wagenaar 1 Inhoudsopgave Inleiding...3 Gheat...4 Info...4 Voordelen...4 Nadelen...4 Google Fusion Tables...5 Info...5 Voordelen...5 Nadelen...5 OLHeatmap...6

Nadere informatie

Dia, een programma voor het maken van diagrammen

Dia, een programma voor het maken van diagrammen LinuxFocus article number 344 http://linuxfocus.org Dia, een programma voor het maken van diagrammen door Katja Socher Over de auteur: Katja is de Duitse redacteur van LinuxFocus.

Nadere informatie

Zelf een eenvoudige website opzetten. Jorrit Groenevelt & Arjan Kraak Juni 2013

Zelf een eenvoudige website opzetten. Jorrit Groenevelt & Arjan Kraak Juni 2013 Zelf een eenvoudige website opzetten Jorrit Groenevelt & Arjan Kraak Juni 2013 1 Inleiding/Doel Een onmisbaar onderdeel van het starten van een bedrijf is het opzetten van een website. Een onderneming

Nadere informatie

Verslaglegging. P. Broekhuizen F. Sijsling G. Zandvliet Docenten Nederlands

Verslaglegging. P. Broekhuizen F. Sijsling G. Zandvliet Docenten Nederlands Verslaglegging P. Broekhuizen F. Sijsling G. Zandvliet Docenten Nederlands Leeuwarden, 13 september 2011 Verslaglegging Door : P. Broekhuizen, F. Sijsling en G. Zandvliet Docenten Nederlands Klas : LBLV.2

Nadere informatie

Het definitieve prototype van Foliostory zal op basis van een usability test getest worden.

Het definitieve prototype van Foliostory zal op basis van een usability test getest worden. Testplan prototype Het definitieve prototype van Foliostory zal op basis van een usability test getest worden. Hierbij wordt een happy flow scenario aan de respondenten voorgelegd met daarin taken die

Nadere informatie

VERENIGINGSWIJZER.NL FINAL DOCUMENT

VERENIGINGSWIJZER.NL FINAL DOCUMENT Vrije Universiteit Amsterdam Faculteit der Exacte Wetenschappen Project Multimedia Peter van Ulden Studentnr. 1494759 VERENIGINGSWIJZER.NL FINAL DOCUMENT INHOUDSOPGAVE 1 Inleiding...3 2 Aanpak & Techniek...4

Nadere informatie

Opdrachtgever: Avpec1910 Auteur: Avalon Systems Versie: 1.0 Datum: 12/01/2011. Handleiding WYSIWYG HTML editor: CKEditor

Opdrachtgever: Avpec1910 Auteur: Avalon Systems Versie: 1.0 Datum: 12/01/2011. Handleiding WYSIWYG HTML editor: CKEditor Opdrachtgever: Avpec1910 Auteur: Avalon Systems Versie: 1.0 Datum: 12/01/2011 Handleiding WYSIWYG HTML editor: CKEditor Inhoud 1 Inleiding... 3 2 WYSIWYG editor... 4 2.1 Iconen toegelicht... 5 2.2 Maximaliseren...

Nadere informatie

Nederlands WMS - SLD Profiel. Versie 1.0

Nederlands WMS - SLD Profiel. Versie 1.0 Nederlands WMS - SLD Profiel Versie 1.0 Ravi: een profiel Ravi, netwerk voor geo-informatie Stichting Ravi is een netwerkorganisatie in het publieke domein en richt zich op de ruimtelijke ontwikkeling

Nadere informatie

Achtergrond en lettertype Opmaak Achtergrond Opmaak Achtergrond Afbeelding in achtergrond

Achtergrond en lettertype Opmaak Achtergrond Opmaak Achtergrond Afbeelding in achtergrond Frontpage Express is het meest eenvoudige programma voor het maken van je homepage. Is het programma niet geïnstalleerd op je PC, dan is het te downloaden en daarna te installeren. We zullen nu een aantal

Nadere informatie

VKblog-importer : De gebruiksaanwijzing.

VKblog-importer : De gebruiksaanwijzing. VKblog-importer : De gebruiksaanwijzing. deze gebruiksaanwijzing beschrijft versie 0.1.2 VKblog-importer is een plugin voor WordPress die bedoeld is om blogs van VKblog te importeren in WordPress. Posts

Nadere informatie

Handleiding. Beheeromgeving

Handleiding. Beheeromgeving Handleiding Beheeromgeving Kant en Klare Site Veluwelaan 80 8443 AH Heerenveen www.kantenklaresite.nl - info@kantenklaresite.nl - fax: 084-8368243 KvK 01134248 Inhoud Inloggen op de beheeromgeving...3

Nadere informatie

Inhoudsopgave: Whisper380-computerhulp

Inhoudsopgave: Whisper380-computerhulp Versie: 1.0 Gemaakt door: Whisper380 Eigenaar: whisper380-computerhulp Datum: 22-9-2010 Inhoudsopgave: Inhoudsopgave:... 2 Virtual PC Downloaden:... 3 Welke moet u kiezen?... 3 Hoe weet u welke versie

Nadere informatie

Cursus Onderwijs en ICT. bloggen met Wordpress

Cursus Onderwijs en ICT. bloggen met Wordpress Cursus Onderwijs en ICT Deel 21 (versie 1.0 NL 27-04-2011) bloggen met Wordpress door Serge de Beer Inleiding Zelf ben ik niet zo n blogger. Niet dat ik het niet heb geprobeerd trouwens. Al regelmatig

Nadere informatie

11. Website controleren

11. Website controleren 11. Website controleren 11.1 Website controleren op verschillende browsers Het blijkt nog altijd nodig te zijn een website te controleren. De website zoals deze er in Kompozer uit ziet, ziet er op internet

Nadere informatie

Introductie 2. Inloggen 3. Dashboard 4. Pagina aanmaken / bewerken 5. Bericht toevoegen / bewerken 6. Afbeelding toevoegen 7. De tekstbewerker 11

Introductie 2. Inloggen 3. Dashboard 4. Pagina aanmaken / bewerken 5. Bericht toevoegen / bewerken 6. Afbeelding toevoegen 7. De tekstbewerker 11 I n h o u d s o p g ave Introductie 2 Inloggen 3 Dashboard 4 Pagina aanmaken / bewerken 5 Bericht toevoegen / bewerken 6 Afbeelding toevoegen 7 De tekstbewerker 11 Menu toevoegen / aanpassen 12 I n t ro

Nadere informatie

Release notes Argo 7. Interactieve LMS interface. Nieuwe interface voor lesmodules

Release notes Argo 7. Interactieve LMS interface. Nieuwe interface voor lesmodules Release notes Argo 7 Argo 7 heeft een interactief web design. Het is optimaal afgestemd op de grote diversiteit aan computerbeeldschermen, van grootbeeld desktops en notebooks tot tablets en smart phones.

Nadere informatie

Factuur Lay-out / Factuur Template

Factuur Lay-out / Factuur Template Factuur Lay-out / Factuur Template In i-reserve is het mogelijk facturen te verzenden. De facturen worden als pdf bijlage per e-mail naar de klant verzonden. In deze tutorial wordt beschreven hoe u een

Nadere informatie

Nieuw in MatrixKozijn Hout 3.2

Nieuw in MatrixKozijn Hout 3.2 Nieuw in MatrixKozijn Hout 3.2 In de nieuwe versie van MatrixKozijn zijn er een aantal onderdelen toegevoegd, maar ook zijn er een aantal zaken gewijzigd en/of verbeterd: BIM Dit is een nieuwe uitbreidingsmodule

Nadere informatie

VMBO-ICT-Route examen 2009 Naam: Marc Schattorie Datum: 06-03-09

VMBO-ICT-Route examen 2009 Naam: Marc Schattorie Datum: 06-03-09 VERSLAG BICS INSTRUCTIIEFIILMPJES VMBO-ICT-Route examen 2009 Naam: Marc Schattorie Datum: 06-03-09 Inhoudsopgave Gebruik BICS..blz. 3 Onderzoek naar korte instructiefilms...blz. 3 Onderzoek naar screenrecorders.blz.

Nadere informatie

Illustration 1. Handleiding Uploaden van foto's in Phoca Gallery

Illustration 1. Handleiding Uploaden van foto's in Phoca Gallery Handleiding Uploaden van foto's in Phoca Gallery Voordat je begint Je hebt een mapje met foto's, niet al te groot, want dan duurt het uploaden zo lang. Ik resize ze altijd naar 1024x768. Daar gebruik ik

Nadere informatie

Individuele opdracht - PENCIL - Kenny Goorts 26 mei, 2012

Individuele opdracht - PENCIL - Kenny Goorts 26 mei, 2012 Individuele opdracht - PENCIL - Kenny Goorts 26 mei, 2012 1 Contents 2 1 wat is het Pencil is animatie/teken software voor Mac, Windows en Linux. Je kan er de traditionele handgetekende animatie mee tekenen

Nadere informatie

Handleiding: Whitelabel Customersite

Handleiding: Whitelabel Customersite ARGEWEB B.V. Handleiding: Whitelabel Customersite Controlportal.nl Argeweb Support 8-1-2009 Handleiding voor het gebruik maken van de Whitelabel Customersite op controlportal.nl, door Resellers van Argeweb.

Nadere informatie

Web building basis: HTML. Karel Nijs 2008/09

Web building basis: HTML. Karel Nijs 2008/09 Web building basis: HTML Karel Nijs 2008/09 Web building basis eerste les HTML intro Browsers HTML elementen HTML basis tags HTML attributen HTML kleuren HTML formattering Extra: HTML entities Web building

Nadere informatie

Project Initiation Document Afstudeerstage Wouter Janssen

Project Initiation Document Afstudeerstage Wouter Janssen Project Initiation Document Afstudeerstage Wouter Janssen 2/11 Project Initiation Document Afstudeerstage Wouter Janssen Opdrachtnemer: Websdesign Internet Communicatie, Wouter Janssen Opdrachtgever: Websdesign

Nadere informatie

AdmInbox. Installatie Scan Plug-in

AdmInbox. Installatie Scan Plug-in AdmInbox Installatie Scan Plug-in Doel van deze handleiding De modules van Asperion kunnen op velerlei manieren ingesteld worden om daarmee optimaal aan te sluiten bij de specifieke bedrijfsomstandigheden

Nadere informatie

HTML richtlijnen e-mail marketing. part of the valley

HTML richtlijnen e-mail marketing. part of the valley e-mail marketing pagina 2/9 geschreven door Maarten van Benthem, front-end developer datum 1 oktober 2009 versie 1.0 Copyright Alle rechten voorbehouden. De inhoud van dit document blijft eigendom van

Nadere informatie

Toelichting op enkele knoppen: (als u de muis bij een knop houdt, verschijnt een tekst met een korte aanwijzing (tooltip) bij deze knop).

Toelichting op enkele knoppen: (als u de muis bij een knop houdt, verschijnt een tekst met een korte aanwijzing (tooltip) bij deze knop). FAQ Leerlingdossier & handelingsplannen Welke mogelijkheden biedt de online tekstverwerker in ESIS? De online tekstverwerker beschikt over veel mogelijkheden voor het bewerken van tekst. U vindt de online

Nadere informatie

Jeroen Bessems Rubriks. Jeroen Bessems. Rubriks

Jeroen Bessems Rubriks. Jeroen Bessems. Rubriks Jeroen Bessems INHOUDSOPGAVE Inhoudsopgave Samenwerken Specialist Ondernemend Generalist Methodisch & gestructureerd Originaliteit & creativiteit Informatievaardig Onderbouwing & verantwoording Kritische

Nadere informatie

Interactief lesgeven / presenteren met Shakespeak

Interactief lesgeven / presenteren met Shakespeak Interactief lesgeven / presenteren met Shakespeak Disclaimer: Ik ben niet verbonden aan Shakespeak of het bedrijf dat Shakespeak produceert. Deze handleiding is geschreven op basis van mijn eigen ervaringen

Nadere informatie

Handleiding installatie Rental Dynamics

Handleiding installatie Rental Dynamics Handleiding installatie Rental Dynamics Versie: 1.1 Datum: 9 januari 2015 1. Inleiding Deze handleiding beschrijft de procedure voor de installatie van Rental Dynamics en de benodigde software. In hoofdstuk

Nadere informatie

Demo applicatie. Functionele Beschrijving SPITS

Demo applicatie. Functionele Beschrijving SPITS Demo applicatie Aantonen functioneren LogiFlor systematiek Functionele Beschrijving SPITS Standaardisatie Project Informatievoorziening Transport Sierteelt onderwerp: Functionele beschrijving Demo applicatie

Nadere informatie

Vakgroep CW KAHO Sint-Lieven

Vakgroep CW KAHO Sint-Lieven Vakgroep CW KAHO Sint-Lieven Objecten Programmeren voor de Sport: Een inleiding tot JAVA objecten Wetenschapsweek 20 November 2012 Tony Wauters en Tim Vermeulen tony.wauters@kahosl.be en tim.vermeulen@kahosl.be

Nadere informatie

Handleiding Mijneigenweb.nl

Handleiding Mijneigenweb.nl Handleiding Mijneigenweb.nl Inhoud 1 Inloggen 2 Kleurenschema en lettertype 2.1 Kies een standaard kleurenschema 2.2 Kleurenschema en lettertypes aanpassen/ zelf samenstellen 3 Logo 4 Visual 4.1 Eigen

Nadere informatie

Voor deze tutorial heb je een aantal afbeeldingen nodig. Deze afbeeldingen kan je downloaden via de site maureensphotoshoptutorials.wordpress.

Voor deze tutorial heb je een aantal afbeeldingen nodig. Deze afbeeldingen kan je downloaden via de site maureensphotoshoptutorials.wordpress. Voor deze tutorial heb je een aantal afbeeldingen nodig. Deze afbeeldingen kan je downloaden via de site maureensphotoshoptutorials.wordpress.com Zodra de bestanden gedownload zijn kan je beginnen. Veel

Nadere informatie

Specificaties Front End voor de ONBETWIST Database

Specificaties Front End voor de ONBETWIST Database Specificaties Front End voor de ONBETWIST Database Deliverable 2.2 Hans Cuypers en Jan Willem Knopper Inleiding Binnen ONBETWIST zal een organisatie opgezet worden die zorg draagt voor de standaardisatie

Nadere informatie

WEBANALYSE. WEBPAGINA: http://www.joy-ce.com/ April 2013. Vervaardigd door:

WEBANALYSE. WEBPAGINA: http://www.joy-ce.com/ April 2013. Vervaardigd door: WEBANALYSE WEBPAGINA: http://www.joy-ce.com/ April 2013 Vervaardigd door: Inhoudsopgave Inhoud.2 Introductie 3 Social Media 4 Mobiel 5 SEO..6 Basis. Inhoud. Links.. Keywords. Autoriteit. Linkuitwisseling...

Nadere informatie

Optimaliseer de performance van uw dienst

Optimaliseer de performance van uw dienst Whitepaper Optimaliseer de performance van uw dienst Succes van uw online applicatie hangt mede af van de performance. Wat kunt u doen om de beste performance te behalen? INHOUD» Offline sites versus trage

Nadere informatie

Augmented Reality in Aurasma

Augmented Reality in Aurasma Handleiding Augmented Reality in Aurasma Fontys Educatief Centrum - Beroepsonderwijs & Bedrijfsleven Versie 2.0 Oktober 2015 Colofon Fontys Educatief Centrum Postbus 347, 5600 AH Eindhoven Telefoon 08850

Nadere informatie

Whitepaper. E-mail design best practices

Whitepaper. E-mail design best practices Whitepaper E-mail design best practices 14 tips voor het design van je e-mail Versterk de boodschap van je uiting Best practices voor je e-mail design Het design speelt een grote rol in de eerste indruk

Nadere informatie

Handleiding voor Zotero versie 2.0

Handleiding voor Zotero versie 2.0 Handleiding voor Zotero versie 2.0 Michiel Wolda De handleiding voor Zetero is geschreven voor de lezers van het boek Deskresearch: Informatie selecteren, beoordelen en verwerken: tweede editie (Van Veen

Nadere informatie

Websitecursus deel 2 CSS

Websitecursus deel 2 CSS Websitecursus deel 2 CSS A Eskwadraat WebCie www@a-eskwadraat.nl 5 oktober 2015 Introductie Vorige week HTML Deze week CSS Volgende week Javascript CSS CSS (Cascading Style Sheets) bepalen hoe een website

Nadere informatie

Zicht - Content Management Systeem een algemene beschrijving

Zicht - Content Management Systeem een algemene beschrijving Zicht - Content Management Systeem een algemene beschrijving Versie april/2008 Zicht nieuwe media ontwerpers 2008 1 Inleiding Een Content Management Systeem (CMS) is een webapplicatie waarmee je zonder

Nadere informatie

Een website omzetten naar WordPress

Een website omzetten naar WordPress 1 Een website omzetten naar WordPress Er zijn talloze programma s beschikbaar om websites te maken. In de titels Basisgids Websites maken met WordPress en Websites maken met WordPress voor senioren wordt

Nadere informatie

Intramed OnLine instellen en gebruiken. Voor Android tablet of telefoon

Intramed OnLine instellen en gebruiken. Voor Android tablet of telefoon Intramed OnLine instellen en gebruiken Voor Android tablet of telefoon Inhoudsopgave Hoofdstuk 1 Algemeen...1 1.1 Toegang tot inlogportalen...1 Hoofdstuk 2 Basic account...3 2.1 Microsoft Remote Desktop

Nadere informatie

OPDRACHTKAART. Thema: Multimedia. Het internet 3. Het World Wide Web MM-05-03-01. Voorkennis: Geen.

OPDRACHTKAART. Thema: Multimedia. Het internet 3. Het World Wide Web MM-05-03-01. Voorkennis: Geen. OPDRACHTKAART MM-05-03-01 Het World Wide Web Voorkennis: Geen. Intro: Deze opdracht gaat over de belangrijkste mogelijkheid van het internet: het surfen op het World Wide Web. Deze opdracht beschrijft

Nadere informatie

Leerlingdossier & handelingsplannen. Welke mogelijkheden biedt de online tekstverwerker in ESIS? FAQ

Leerlingdossier & handelingsplannen. Welke mogelijkheden biedt de online tekstverwerker in ESIS? FAQ FAQ Leerlingdossier & handelingsplannen Welke mogelijkheden biedt de online tekstverwerker in ESIS? De online tekstverwerker beschikt over veel mogelijkheden voor het bewerken van tekst. U vindt de online

Nadere informatie

INFORMATIE VOOR COMMUNICATIEMANAGERS EN WEBMASTERS

INFORMATIE VOOR COMMUNICATIEMANAGERS EN WEBMASTERS INFORMATIE VOOR COMMUNICATIEMANAGERS EN WEBMASTERS BrowseAloud Plus: dé voorleestool op websites! 1 INHOUD Informatie voor communicatiemanagers en webmasters... 1 BrowseAloud Plus: dé voorleestool op websites!

Nadere informatie

GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps

GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps Google Maps INHOUDSOPGAVE Inleiding.. 3 Een Google Map maken.. 4 Een eigen adres opgeven 7 Inzoomen op je eigenkaart. 8 Satellietbeeld op je eigenkaart. 10 Markers plaatsen. 13 Tekstballon plaatsen.. 15

Nadere informatie

Uitgebreid voorstel Masterproef Informatica

Uitgebreid voorstel Masterproef Informatica HoGent Uitgebreid voorstel Masterproef Informatica Titel van het project: Optimalisatie & ontwikkeling van een gegevenstransfertool voor Business Intelligence-gebruikers Datum : 01/11/2012 Naam student

Nadere informatie

iprova Suite Systeemeisen iprova 5 Hosting

iprova Suite Systeemeisen iprova 5 Hosting iprova Suite Systeemeisen iprova 5 Hosting Let op Dit document bevat de systeemeisen voor versie 5.0 van de iprova Suite. Door nieuwe ontwikkelingen kunnen de systeemeisen voor iprova wijzigen. Controleer

Nadere informatie

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com Welkom bij mijn website tutorial (Deel 6) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.

Nadere informatie

Handleiding inkoopmodule. DSW Zorgverzekeraar Stad Holland Zorgverzekeraar

Handleiding inkoopmodule. DSW Zorgverzekeraar Stad Holland Zorgverzekeraar Handleiding inkoopmodule DSW Zorgverzekeraar Stad Holland Zorgverzekeraar 1 1.Inleiding Deze handleiding beschrijft hoe u via de digitale inkoopmodule van DSW Zorgverzekeraar/Stad Holland Zorgverzekeraar

Nadere informatie

Technisch Ontwerp W e b s i t e W O S I

Technisch Ontwerp W e b s i t e W O S I Technisch Ontwerp W e b s i t e W O S I WOSI Ruud Jungbacker en Michael de Vries - Technisch ontwerp Website Document historie Versie(s) Versie Datum Status Omschrijving / wijzigingen 0.1 20 nov 2008 Concept

Nadere informatie

HANDLEIDING INLOGGEN OP HDN.NL VERSIE 1.4

HANDLEIDING INLOGGEN OP HDN.NL VERSIE 1.4 HANDLEIDING INLOGGEN OP HDN.NL VERSIE 1.4 1 INLEIDING Om toegang tot de beveiligde persoonlijke omgeving van de HDN website te krijgen (www.hdn.nl), moet uw Internet browser voorzien zijn van een HDN certificaat.

Nadere informatie

Documentatie. Remote Access Voorziening Etam (RAVE)

Documentatie. Remote Access Voorziening Etam (RAVE) Documentatie Remote Access Voorziening Etam (RAVE) Versie 1.5 Datum: 16 april 2009 1. INLEIDING 3 2. ÉÉNMALIGE INSTALLATIE CITRIX WEB CLIENT 4 3. VERBINDING MAKEN MET HOOFDKANTOOR 9 3.1 Starten RAVE 10

Nadere informatie

Leerlingdossier & handelingsplannen

Leerlingdossier & handelingsplannen FAQ Leerlingdossier & handelingsplannen Welke mogelijkheden biedt de online tekstverwerker in ESIS? De online tekstverwerker beschikt over veel mogelijkheden voor het bewerken van tekst. U vindt de online

Nadere informatie

Min-height en min-width

Min-height en min-width Oefening 15.5 Min-height en min-width Maak op van uw een webpagina s een div die u voorziet van een geschikte waarde voor min-height en min-width. Laat zien wat er gebeurt als u het lettertype verkleint

Nadere informatie

Data quality tracking tool

Data quality tracking tool Data quality tracking tool Stageproject Over data cleansing werk Eén van de onderdelen van werk rond datakwaliteit uitgevoerd door Kapernikov is het systematisch oplossen van gedetecteerde datafouten in

Nadere informatie