Share
In deze tutorial zullen we het CreateJS-pakket van bibliotheken onderzoeken. CreateJS is een verzameling JavaScript-bibliotheken en -hulpmiddelen voor het bouwen van rijke, interactieve ervaringen met HTML5. De CreateJS-suite is verdeeld in vier bibliotheken.
De eerste bibliotheek die we zullen bekijken is EaselJs. Laten we beginnen!
EaselJS is een bibliotheek voor het werken met het HTML5-canvas. Het bestaat uit een volledige, hiërarchische weergavelijst, een kerninteractiemodel en helperklassen om werken met Canvas veel gemakkelijker te maken. Aan de slag gaan met EaselJS kan niet eenvoudiger. U moet een canvaselement in uw HTML definiëren en ernaar verwijzen in uw JavaScript. EaselJS gebruikt de notie van een stage die de container op het hoogste niveau is voor de weergavelijst (de stage wordt uw canvaselement). Hieronder staat een HTML-fragment en het bijbehorende JavaScript dat nodig is om EaselJS in te stellen.
Als u naar het bovenstaande canvas wilt verwijzen, gebruikt u het volgende.
Accentsconagua
var canvas = document.getElementById ("testCanvas"); var stage = new createjs.Stage (canvas); EaselJS wordt geleverd met een grafische klasse die een eenvoudig te gebruiken API toont voor het genereren van vectortekeninstructies en deze naar een opgegeven context te tekenen. De commando's lijken erg op het normale HTML5 Canvas, terwijl EaselJs ook enkele van zijn eigen nieuwe commando's toevoegt. Als u niet bekend bent met HTML 5-canvas en de tekenopdrachten, wilt u misschien de cursus Canvas Essentials bekijken die onlangs is uitgebracht. U zult de klasse Graphics normaal gesproken niet alleen gebruiken, maar deze eerder benaderen door de klasse Shape. Hieronder is een JSFiddle die die Shape-klasse gebruikt om te tekenen.
Zoals je in de bovenstaande code kunt zien, zijn de commando's te koppelen ShapeObject.graphics.setStrokeStyle (1) .beginStroke ( "RGBA (0,0,0,1) enz ... Je hebt misschien ook een oproep gemerkt stage.addChild () binnen de functies. Elke keer dat je iets op het canvas wilt zetten, moet je bellen stage.addChild (). Binnen de drawShapes () functie, er is een oproep voor stage.update (). Om uw wijzigingen te kunnen zien, moet u bellen stage.update () na elke wijziging aan het canvas. Er is een manier om niet herhaaldelijk te hoeven bellen stage.update () en dat is door de Ticker Class te gebruiken. De Ticker biedt een gecentraliseerde tick of heartbeat uitgezonden met een ingesteld interval. Luisteraars kunnen zich abonneren op de tikgebeurtenis om te worden gewaarschuwd wanneer een ingesteld tijdsinterval is verstreken. Hieronder ziet u hoe u de klasse Ticker zou gebruiken om de fase automatisch bij te werken.
createjs.Ticker.addEventListener ("tick", handleTick); function handleTick (event) stage.update () De klasse Shape wordt geleverd met een hele reeks eigenschappen die u kunt aanpassen, zoals x, y standen, alpha, scaleX, scaleY en een flink aantal anderen. Hieronder is een demo met enkele van deze eigenschappen.
Binnen de drawTheShapes () we genereren 15 cirkels met een lijn er doorheen getrokken, in staat om de tekenopdrachten te ketenen maakt dit doodeenvoudig. Vervolgens randomiseren we de vormen positie, schaal, rotatie en alfa.
U kunt gebeurtenissen aan de vormen koppelen, zoals Klik, mousedown / over / out, enz., door de op() methode. In deze demo wanneer u op een van de shapes klikt, wordt een waarschuwing gegenereerd en tijdens het uitloggen logt een bericht in op de console. Om muisevenementen op het podium toe te staan mousedown / over / out enz., je moet bellen stage.enableMouseOver (frequentie) waar frequentie het aantal keren per seconde is dat de muisgebeurtenissen worden uitgezonden. Deze bewerking is duur, dus deze is standaard uitgeschakeld.
EaselJS wordt geleverd met een Text-klasse die het heel gemakkelijk maakt om tekst te maken en eigenschappen van die tekst te wijzigen. Je noemt de constructor in de tekst, een lettertype en een kleur, d.w.z.. nieuwe createjs.Text ("Hello World", "20px Arial", "# ff7700") Net als de klasse Shape, wordt deze geleverd met een verscheidenheid aan eigenschappen en methoden. Hieronder is een demo met de klasse Text.
Net als de vorige demo maken we 25 TextFields en passen we een aantal willekeurige waarden toe op hun eigenschappen.
De volgende demo is een galgje gemaakt met de vorm en tekstklasse die we tot nu toe in deze tutorial hebben besproken.
Om de beul te tekenen gebruiken we een combinatie op lineTo (), moveTo (), en voor het hoofd gebruiken we de boog() methode. Binnen de drawCanvas () functie, we noemen het duidelijk() methode op de hangmanShape.graphics die eerdere tekeningen die we in deze vorm hebben gedaan, opruimt. We veranderen de kleur van TextFields afhankelijk van of de speler zijn of haar spel heeft gewonnen of verloren.
U kunt afbeeldingen gebruiken door de klasse Bitmap te gebruiken. Een bitmap staat voor een afbeelding, canvas of video in de weergavelijst, deze kan worden geïnstantieerd met een bestaand HTML-element of een tekenreeks (Base64). Bijvoorbeeld nieuwe createjs.Bitmap ("imagePath.jpg").
<
Zeer vergelijkbaar met eerdere demo's maken we hier drie bitmaps en geven ze wat willekeurige eigenschappen.
We gebruiken de klasse Shadow om enkele schaduwen te maken. De schaduwklasse neemt als parameters de kleur, offsetX, offsetY en de grootte van het blureffect, enz. myImage.shadow = new createjs.Shadow ("# 000000", 5, 5, 10). U kunt schaduwen toepassen op elk weergaveobject, zodat dit ook voor tekst zou werken.
Een Sprite geeft een frame of reeks van frames weer (zoals een animatie) van een SpriteSheet-instantie. Een sprite-sheet is een reeks afbeeldingen (meestal animatieframes) gecombineerd tot één afbeelding. Een animatie die uit acht 100x100-afbeeldingen bestaat, kan bijvoorbeeld worden gecombineerd in een spritevel van 400x200 (vier frames op twee hoog). U kunt afzonderlijke kaders weergeven, kaders als een animatie afspelen en zelfs reeksanimaties samen. Om een Sprite-instantie te initialiseren die u bijvoorbeeld in een SpriteSheet en optioneel framenummer of animatie doorgeeft om te spelen, nieuw createjs.Sprite (spriteSheet, "run"). De gegevens die aan de SpriteSheet-constructor worden doorgegeven, definiëren drie belangrijke stukjes informatie:
Hieronder staat een voorbeeldcode die een sprite "character" initialiseert.
var data = new createjs.SpriteSheet ("images": ["path / to / image.png"], "frames": "regX": 0, "height": 96, "count": 10, "regY ": 0," width ": 75," animations ": " walk ": [0, 9]); character = new createjs.Sprite (data, "walk"); character.play (); Hier is een demo met de Sprite en SpriteSheet Class. U moet op het werkgebied klikken en vervolgens kunt u "A" gebruiken om naar links te gaan en "D" om naar rechts te gaan. Een ding om op te merken over deze demo is dat ik Base64 de afbeeldingen heb gecodeerd en deze worden opgenomen door de externe bron "imagestrings.js". Omdat we een SpriteSheet gebruiken en interactie hebben met de muis, raakt het canvas besmet met het cross domain images-beleid (CORS). Door Base64-reeksen te gebruiken, kunnen we dit overwinnen. Als dit op uw eigen domein zou worden gehost, zou u de Bitmap-klasse zoals gewoonlijk gebruiken door een element of pad door te geven.
Binnen de opstelling() functie we creëren de spritesheet. Voor de "afbeeldingen" -toets die ik passeer characterImage welke een Base64 gecodeerde reeks is. Voor de "frames" -toets zijn de karakterafbeeldingen 96 pixels hoog, 75 pixels breed en zijn er tien frames (afzonderlijke afbeeldingen). Hieronder staat de afbeelding die we gebruiken voor de spritesheet zodat je kunt visualiseren hoe het eruit ziet.
Voor de "animatie" -toets definiëren we een "run" -animatie van "frame" nul tot negen. Ten slotte maken we de karakter van de spritesheet.
Als je het personage naar links of rechts verplaatst, bellen we character.play (). en wanneer je stopt met het bewegen van het personage dat we noemencharacter.gotoAndStop (0). Omdat we maar één "animatie" hebben, kunnen we gewoon bellen spelen() en gotoAndStop () als je een aantal animaties had, zou je een combinatie van deze twee plus gebruiken gotoAndPlay ().
De containerklasse is een nestbare weergavelijst waarmee u kunt werken met samengestelde weergave-elementen. U kunt bijvoorbeeld bitmap-, been-, romp- en kopbitmapinstanties samen in een persoonscontainer groeperen en ze als een groep transformeren, terwijl u de individuele onderdelen toch ten opzichte van elkaar kunt verplaatsen. Kinderen van containers hebben hun transformatie- en alfa-eigenschappen samengevoegd met hun bovenliggende container. Hieronder vindt u een demo met de containerklasse. Klik op het podium om de container met 20 pixels te verplaatsen.
Hier maken we drie bitmaps en voegen deze toe aan de houder, we kunnen ze allemaal in één keer verplaatsen door de houder, en hoewel ze zich in een container bevinden, kunt u ze elk afzonderlijk verplaatsen.
De cache () -methode van het weergaveobject trekt het weergaveobject naar een nieuw canvas, dat vervolgens wordt gebruikt voor volgende trekkingen. Voor complexe inhoud die niet vaak wordt gewijzigd (bijvoorbeeld een container met veel onderliggende elementen die niet worden verplaatst of een complexe vectorvorm), kan dit zorgen voor een veel snellere weergave, omdat de inhoud niet opnieuw hoeft te worden gerenderd..
Het in de cache weergegeven weergaveobject kan vrij worden verplaatst, geroteerd, vervaagd, enzovoort. Als de inhoud echter verandert, moet u de cache handmatig bijwerken door te callen updateCache () of cache () nog een keer. U moet het cachegebied opgeven via de parameters x, y, w en h. Dit definieert de rechthoek die wordt weergegeven en gecached in de coördinaten van dit weergaveobject. Caching mag normaal niet worden gebruikt op de Bitmap klasse omdat dit de prestaties kan verminderen, maar als u een filter wilt gebruiken op a Bitmap dan moet het gecached worden.
Vanwege de afmetingen van de JSFiddle-insluitingen zal ik geen demo voor deze methode geven, maar zal ik u koppelen aan een demo op de CreateJs-website.
De filterklasse is de basisklasse waarvan alle filters moeten overerven. Filters moeten worden toegepast op objecten die in de cache zijn opgeslagen met behulp van de cachemethode. Als een object verandert, moet u het opnieuw in de cache plaatsen of gebruiken updateCache (). Merk op dat de filters moeten worden toegepast voor caching. EaselJS wordt geleverd met een aantal vooraf gebouwde filters. Merk op dat individuele filters niet zijn gecompileerd in de verkleinde versie van EaselJS. Om ze te gebruiken, moet u ze handmatig opnemen in de HTML.
In de onderstaande demo wordt het kleurenfilter gebruikt. Wanneer u op het werkvlak klikt, wordt het groene kanaal uit de afbeelding verwijderd. De Kleurenfilter heeft de volgende parameters.
ColorFilter ([redMultiplier = 1] [greenMultiplier = 1] [blueMultiplier = 1] [alphMultiplier = 1] [redOffset = 0] [greenOffset = 0] [blueOffset = 0] [alphaOffset = 0])
Van de rode, groene, blauwe en alfa-multipliers wordt verwacht dat ze een getal van nul tot één zijn en van de rode, groene, blauwe en alfa-offset wordt verwacht dat ze een getal tussen 255 en 255 zijn..
We maken een standaard bitmapobject, passen het filter toe en de cache de bitmap.
Ik heb een laatste demo gemaakt, waarop we verder zullen bouwen in het volgende deel van deze serie, door geluid toe te voegen, de elementen vooraf te laden en tweens te gebruiken.
In deze demo maken we de Bitmap, Tekst, en Vorm, klassen om een speltype Space Invaders te maken. Ik zal niet elke stap hier zetten sinds het doel, alleen maar om te laten zien hoe de concepten met elkaar te verbinden, maar als je vragen hebt over de code, kun je die stellen in de reacties. De botsingsdetectie wordt geleverd door osln via Github.
In deze tutorial hebben we EaselJS bekeken en een aantal demotoepassingen gemaakt. Ik hoop dat je dit artikel nuttig hebt gevonden en dat het je enthousiast maakt over het gebruik van EaselJS. Bedankt voor het lezen!
