Insert image into library<\/div>
Description:This will add an image to the library and make it available to your code. Tip:Use this in the preload section<\/div>
Example:game.load.image(\"char1\",\"images\/ball.png\");<\/div>
game.load.image(library_key,path_to_image);<\/textarea><\/div>  <button class=\"btn\" data-clipboard-action=\"copy\" data-clipboard-target=\"#bar1\">Copy<\/button><div class='snipbreak'><hr><\/div><div class='snipTitle'>add image to the stage<\/div><div class='snipDesc'>Description:Adds a sprite from the library to the stage and returns that<\/div><div class='snipExample'>Example:this.char1=game.add.sprite(0,0,\"char1\");<\/div><div class='codeSnip'><textarea id='bar2' class='codeBox'>this.char1=game.add.sprite(x,y,library_key);<\/textarea><\/div>  <button class=\"btn\" data-clipboard-action=\"copy\" data-clipboard-target=\"#bar2\">Copy<\/button><div class='snipbreak'><hr><\/div><div class='snipTitle'>preload sprite sheet<\/div><div class='snipDesc'>Description:preloads a sprite sheet to the library<\/div><div class='snipExample'>Example: game.load.spritesheet('knight', 'images\/knight.png', 40, 80, 6);<\/div><div class='codeSnip'><textarea id='bar3' class='codeBox'>game.load.spritesheet('ref_name', 'pathto.png', sprite_width, sprite_height, number_of_cells);<\/textarea><\/div>  <button class=\"btn\" data-clipboard-action=\"copy\" data-clipboard-target=\"#bar3\">Copy<\/button><div class='snipbreak'><hr><\/div><div class='snipTitle'>set sprite top position<\/div><div class='snipDesc'>Description:set the distance of a sprite from the top<\/div><div class='snipExample'>Example:this.char1.y=400;<\/div><div class='codeSnip'><textarea id='bar4' class='codeBox'>this.char1.y=top_postion;<\/textarea><\/div>  <button class=\"btn\" data-clipboard-action=\"copy\" data-clipboard-target=\"#bar4\">Copy<\/button><div class='snipbreak'><hr><\/div><div class='snipTitle'>set the left position of a sprite<\/div><div class='snipDesc'>Description:sets the left position of a sprite<\/div><div class='snipExample'>Example:this.char1.x=200;<\/div><div class='codeSnip'><textarea id='bar5' class='codeBox'>this.char1.x=left_position;<\/textarea><\/div>  <button class=\"btn\" data-clipboard-action=\"copy\" data-clipboard-target=\"#bar5\">Copy<\/button><div class='snipbreak'><hr><\/div><div class='snipTitle'>set the registration point for a sprite<\/div><div class='snipDesc'>Description:Sets the registration point for a sprite.\r\n\r\nFor example setting the anchor to 0,0 means the positioning will apply to the top left corner of the sprite\r\n\r\nsetting the anchor to 0.5,0.5 will apply positioning to the middle of the sprite<\/div><div class='snipExample'>Example:this.char1.anchor.setTo(0,0);\r\nthis.char1.anchor.setTo(0.5,0.5);<\/div><div class='codeSnip'><textarea id='bar6' class='codeBox'>this.char1.anchor.setTo(left,top);<\/textarea><\/div>  <button class=\"btn\" data-clipboard-action=\"copy\" data-clipboard-target=\"#bar6\">Copy<\/button><div class='snipbreak'><hr><\/div><div class='snipTitle'>add an animation to a sprite<\/div><div class='snipDesc'>Description:defines an animation for a sprite<\/div><div class='snipExample'>Example:var walk=char1.animations.add('knight', [0, 1, 2, 3], 12,true);<\/div><div class='codeSnip'><textarea id='bar7' class='codeBox'>mysprite.animations.add('walk', frame_array, frames_sec,loopBoolean);<\/textarea><\/div>  <button class=\"btn\" data-clipboard-action=\"copy\" data-clipboard-target=\"#bar7\">Copy<\/button><div class='snipbreak'><hr><\/div><div class='snipTitle'>play an animation<\/div><div class='snipDesc'>Description:plays an animation in a sprite that has been defined by .animations.add<\/div><div class='snipExample'>Example:char1.animations.play('walk');<\/div><div class='codeSnip'><textarea id='bar8' class='codeBox'>mysprite.animations.play('animation name');<\/textarea><\/div>  <button class=\"btn\" data-clipboard-action=\"copy\" data-clipboard-target=\"#bar8\">Copy<\/button><div class='snipbreak'><hr><\/div><div class='snipTitle'>add a mask to a sprite<\/div><div class='snipDesc'>Description:adds a mask that will partly obscure a graphic<\/div><div class='snipExample'>Example:\/\/\tA mask is a Graphics object\r\n    mask = game.add.graphics(0, 0);\r\n\r\n    \/\/\tShapes drawn to the Graphics object must be filled.\r\n    mask.beginFill(0xffffff);\r\n\r\n    \/\/\tHere we'll draw a circle\r\n    mask.drawCircle(100, 100, 100);\r\n\r\n    \/\/\tAnd apply it to the Sprite\r\n    sprite.mask = mask;<\/div><div class='codeSnip'><textarea id='bar9' class='codeBox'>\/\/\tA mask is a Graphics object\r\n    mask = game.add.graphics(0, 0);\r\n\r\n    \/\/\tShapes drawn to the Graphics object must be filled.\r\n    mask.beginFill(fill_color);\r\n\r\n    \/\/\tHere we'll draw a circle\r\n    mask.drawCircle(left, top, radius);\r\n\r\n    \/\/\tAnd apply it to the Sprite\r\n    sprite.mask = mask;<\/textarea><\/div>  <button class=\"btn\" data-clipboard-action=\"copy\" data-clipboard-target=\"#bar9\">Copy<\/button><div class='snipbreak'><hr><\/div><div class='snipTitle'>set sprite frame<\/div><div class='snipDesc'>Description:if you add a sprite to the stage that uses a sprite sheet instead of a simple image, you can select which frame is showing<\/div><div class='snipExample'>Example:sprite.frame=2;<\/div><div class='codeSnip'><textarea id='bar11' class='codeBox'>sprite.frame=frame_number;<\/textarea><\/div>  <button class=\"btn\" data-clipboard-action=\"copy\" data-clipboard-target=\"#bar11\">Copy<\/button><div class='snipbreak'><hr><\/div><div class='snipTitle'>add a group<\/div><div class='snipDesc'>Description:adds a group to the stage, and sprites may be added to the group<\/div><div class='snipExample'>Example:game.add.group();<\/div><div class='codeSnip'><textarea id='bar25' class='codeBox'>game.add.group();<\/textarea><\/div>  <button class=\"btn\" data-clipboard-action=\"copy\" data-clipboard-target=\"#bar25\">Copy<\/button><div class='snipbreak'><hr><\/div><div class='snipTitle'>add sprite to group<\/div><div class='snipDesc'>Description:<\/div><div class='snipExample'>Example:var myGroup=game.add.group();\r\nmyGroup.add(sprite);<\/div><div class='codeSnip'><textarea id='bar26' class='codeBox'>var myGroup=game.add.group();\r\nmyGroup.add(sprite);<\/textarea><\/div>  <button class=\"btn\" data-clipboard-action=\"copy\" data-clipboard-target=\"#bar26\">Copy<\/button><div class='snipbreak'><hr><\/div><div class='snipTitle'>Add a Tilesprite<\/div><div class='snipDesc'>Description:add a sprite multiplied and stitched together. Used for scrolling backgrounds.<\/div><div class='snipExample'>Example: this.tileSprite = game.add.tileSprite(0, 0, 480, 640, 'back');<\/div><div class='codeSnip'><textarea id='bar36' class='codeBox'> this.tileSprite = game.add.tileSprite(x, y, width, height, 'key');<\/textarea><\/div>  <button class=\"btn\" data-clipboard-action=\"copy\" data-clipboard-target=\"#bar36\">Copy<\/button><div class='snipbreak'><hr><\/div><div class='snipTitle'>prototype template<\/div><div class='snipDesc'>Description:use this to make a prefab\/class for sprites<\/div><div class='snipExample'>Example:<\/div><div class='codeSnip'><textarea id='bar49' class='codeBox'>var Monster = function(x=0, y=0, frame=0) {  \r\n  Phaser.Sprite.call(this, game, x, y, 'monster', frame);\r\n\r\n  \/\/ initialize your prefab here\r\n\r\n};\r\n\r\nMonster.prototype = Object.create(Phaser.Sprite.prototype);  \r\nMonster.prototype.constructor = Monster;\r\n\r\nMonster.prototype.update = function() {\r\n\r\n  \/\/ write your prefab\u2019s specific update code here\r\n  \r\n};\r\n\r\n<\/textarea><\/div>  <button class=\"btn\" data-clipboard-action=\"copy\" data-clipboard-target=\"#bar49\">Copy<\/button><div class='snipbreak'><hr><\/div><div class='snipTitle'>create sprite in group<\/div><div class='snipDesc'>Description:<\/div><div class='snipExample'>Example:group.create(x, y,'key');<\/div><div class='codeSnip'><textarea id='bar51' class='codeBox'>group.create(x, y,'key');<\/textarea><\/div>  <button class=\"btn\" data-clipboard-action=\"copy\" data-clipboard-target=\"#bar51\">Copy<\/button><div class='snipbreak'><hr><\/div><div class='snipTitle'>loop through group<\/div><div class='snipDesc'>Description:<\/div><div class='snipExample'>Example:myGroup.forEach(function(item) {\r\n        \titem.x++;\r\n        }.bind(this));<\/div><div class='codeSnip'><textarea id='bar52' class='codeBox'>myGroup.forEach(function(item) {\r\n        \t\r\n        }.bind(this));<\/textarea><\/div>  <button class=\"btn\" data-clipboard-action=\"copy\" data-clipboard-target=\"#bar52\">Copy<\/button><div class='snipbreak'><hr><\/div><div class='snipTitle'>create multiple<\/div><div class='snipDesc'>Description:<\/div><div class='snipExample'>Example:myGroup.createMultiple(20, 'key', frame, alive);<\/div><div class='codeSnip'><textarea id='bar53' class='codeBox'>myGroup.createMultiple(20, 'myKey', 0, false);<\/textarea><\/div>  <button class=\"btn\" data-clipboard-action=\"copy\" data-clipboard-target=\"#bar53\">Copy<\/button><div class='snipbreak'><hr><\/div><div class='snipTitle'>detect the end of an animation<\/div><div class='snipDesc'>Description:calls a function when the animation is complete<\/div><div class='snipExample'>Example:myAnimation.onComplete.add(this.animationDone, this);<\/div><div class='codeSnip'><textarea id='bar64' class='codeBox'>myAnimation.onComplete.add(function, scope);<\/textarea><\/div>  <button class=\"btn\" data-clipboard-action=\"copy\" data-clipboard-target=\"#bar64\">Copy<\/button><div class='snipbreak'><hr><\/div><div class='snipTitle'>load a sprite sheet with json<\/div><div class='snipDesc'>Description:loads a sprite sheet with JSON data<\/div><div class='snipExample'>Example:game.load.atlasJSONHash('key',\"imagePath\",\"jsonPath);<\/div><div class='codeSnip'><textarea id='bar72' class='codeBox'>game.load.atlasJSONHash('letters',\"images\/main\/letters.png\",\"images\/main\/letters.json\");<\/textarea><\/div>  <button class=\"btn\" data-clipboard-action=\"copy\" data-clipboard-target=\"#bar72\">Copy<\/button><div class='snipbreak'><hr><\/div>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p><!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":130,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-142","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.8.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Phaser Sprite Snippets - Phaser Games<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/phasergames.com\/phaser-snippets\/phaser-sprite-snippets\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Phaser Sprite Snippets - Phaser Games\" \/>\n<meta property=\"og:url\" content=\"https:\/\/phasergames.com\/phaser-snippets\/phaser-sprite-snippets\/\" \/>\n<meta property=\"og:site_name\" content=\"Phaser Games\" \/>\n<meta property=\"article:modified_time\" content=\"2017-05-18T04:03:24+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/phasergames.com\/phaser-snippets\/phaser-sprite-snippets\/\",\"url\":\"https:\/\/phasergames.com\/phaser-snippets\/phaser-sprite-snippets\/\",\"name\":\"Phaser Sprite Snippets - Phaser Games\",\"isPartOf\":{\"@id\":\"https:\/\/phasergames.com\/#website\"},\"datePublished\":\"2017-05-18T03:58:14+00:00\",\"dateModified\":\"2017-05-18T04:03:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/phasergames.com\/phaser-snippets\/phaser-sprite-snippets\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/phasergames.com\/phaser-snippets\/phaser-sprite-snippets\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/phasergames.com\/phaser-snippets\/phaser-sprite-snippets\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/phasergames.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Phaser CE Snippets\",\"item\":\"https:\/\/phasergames.com\/phaser-snippets\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Phaser Sprite Snippets\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/phasergames.com\/#website\",\"url\":\"https:\/\/phasergames.com\/\",\"name\":\"Phaser Games\",\"description\":\"Tutorials Code and Resources\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/phasergames.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Phaser Sprite Snippets - Phaser Games","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/phasergames.com\/phaser-snippets\/phaser-sprite-snippets\/","og_locale":"en_US","og_type":"article","og_title":"Phaser Sprite Snippets - Phaser Games","og_url":"https:\/\/phasergames.com\/phaser-snippets\/phaser-sprite-snippets\/","og_site_name":"Phaser Games","article_modified_time":"2017-05-18T04:03:24+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/phasergames.com\/phaser-snippets\/phaser-sprite-snippets\/","url":"https:\/\/phasergames.com\/phaser-snippets\/phaser-sprite-snippets\/","name":"Phaser Sprite Snippets - Phaser Games","isPartOf":{"@id":"https:\/\/phasergames.com\/#website"},"datePublished":"2017-05-18T03:58:14+00:00","dateModified":"2017-05-18T04:03:24+00:00","breadcrumb":{"@id":"https:\/\/phasergames.com\/phaser-snippets\/phaser-sprite-snippets\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/phasergames.com\/phaser-snippets\/phaser-sprite-snippets\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/phasergames.com\/phaser-snippets\/phaser-sprite-snippets\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/phasergames.com\/"},{"@type":"ListItem","position":2,"name":"Phaser CE Snippets","item":"https:\/\/phasergames.com\/phaser-snippets\/"},{"@type":"ListItem","position":3,"name":"Phaser Sprite Snippets"}]},{"@type":"WebSite","@id":"https:\/\/phasergames.com\/#website","url":"https:\/\/phasergames.com\/","name":"Phaser Games","description":"Tutorials Code and Resources","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/phasergames.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en"}]}},"featured_image_src":null,"featured_image_src_square":null,"_links":{"self":[{"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/pages\/142"}],"collection":[{"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/comments?post=142"}],"version-history":[{"count":1,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/pages\/142\/revisions"}],"predecessor-version":[{"id":143,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/pages\/142\/revisions\/143"}],"up":[{"embeddable":true,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/pages\/130"}],"wp:attachment":[{"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/media?parent=142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}