Phaser.io is a cool free\/open source Javascript platform for making HTML5\/Canvas games, animations and WebGL awesomeness!\u00a0 I thought I would play around a bit and make an example of a camera panning a peaceful meadow in such a way that will lull you to sleep or cause motion sickness!<\/p>\n\n\n\n
The config<\/p>\n\n\n\n
var config = {\n type: Phaser.WEBGL,\n parent: 'phaser-example',\n width: 800,\n height: 600,\n backgroundColor: '#ffffff',\n scene: {\n preload: preload,\n create: create,\n update: update\n }\n};<\/code><\/pre>\n\n\n\nSet up<\/p>\n\n\n\n
var camera;\nvar grass = [];\nvar track;\nvar acceleration = { z: 18 };\nvar startZ = 2000;\nvar grassFrames = [ 7, 8, 1, 2, 20, 7, 8, 1, 2, 20, 7, 8, 1, 2, 20, 6, 3, 1, 2, 20, 6, 3, 4, 8, 7, 14, 16, 11, 13, 12, 9, 25, 27, 5, 10, 15, 17, 18, 19, 21, 22, 23, 24, 26, 28, 29, 30 ];\n\nvar game = new Phaser.Game(config);\n<\/code><\/pre>\n\n\n\n\u201cGame\u201d functions<\/p>\n\n\n\n
function preload ()\n{\n this.load.scenePlugin('Camera3DPlugin', '..\/plugins\/camera3d.min.js', 'Camera3DPlugin', 'cameras3d');\n\n this.load.image('sky', '..\/assets\/tests\/meadow\/summer.jpg');\n this.load.image('strip', '..\/assets\/tests\/meadow\/grass-strip.png');\n this.load.atlas('grass', '..\/assets\/tests\/meadow\/grass.png', '..\/assets\/tests\/meadow\/grass.json');\n}\n\nfunction create ()\n{\n var sky = this.add.image(300, -100, 'sky').setOrigin(0.5, 0).setDepth(-1000);\n\n camera = this.cameras3d.add(40).setPosition(200, -190, 1500).setPixelScale(384);\n\n var width = 20;\n var depth = 60;\n var left = -(80 * (width \/ 2));\n\n \/\/ Grass strips\n\n track = camera.createRect({ x: 1, y: 1, z: 32 }, 120, 'strip');\n\n for (var z = 0; z < depth; z++)\n {\n for (var x = 0; x < width; x++)\n {\n var diff = Phaser.Math.Between(-60, 60)\n\n var bx = left + (x * 80) + diff;\n var bz = (z * 96) + diff;\n\n var sprite3D = camera.create(bx, 0, bz, 'grass', 'grass-spring-' + Phaser.Math.RND.weightedPick(grassFrames));\n\n sprite3D.gameObject.setOrigin(0.5, 1);\n\n grass.push(sprite3D);\n }\n }\n\n this.cameras.main.rotation = -0.2;<\/code><\/pre>\n\n\n\nTweeeens<\/p>\n\n\n\n
\/\/ Tweens\n\n this.tweens.add({\n targets: this.cameras.main,\n rotation: 0.2,\n duration: 6000,\n delay: 5000,\n yoyo: true,\n repeat: -1,\n repeatDelay: 4000,\n hold: 3000,\n ease: 'Sine.easeInOut'\n });\n\n this.tweens.add({\n targets: acceleration,\n z: 10,\n delay: 12000,\n duration: 3000,\n yoyo: true,\n repeat: -1,\n repeatDelay: 8000,\n hold: 3000,\n ease: 'Sine.easeInOut'\n });\n\n this.tweens.add({\n targets: camera,\n y: -130,\n delay: 12000,\n duration: 3000,\n yoyo: true,\n repeat: -1,\n repeatDelay: 8000,\n hold: 3000,\n ease: 'Sine.easeInOut'\n });\n\n this.tweens.add({\n targets: camera,\n x: -200,\n delay: 20000,\n duration: 3000,\n yoyo: true,\n repeat: -1,\n repeatDelay: 8000,\n hold: 5000,\n ease: 'Sine.easeInOut'\n });\n\n this.tweens.add({\n targets: sky,\n x: 400,\n delay: 20000,\n duration: 3000,\n yoyo: true,\n repeat: -1,\n repeatDelay: 8000,\n hold: 5000,\n ease: 'Sine.easeInOut'\n });\n\n this.cameras.main.flash(5000);\n}<\/code><\/pre>\n\n\n\nAnd Update<\/p>\n\n\n\n
function update ()\n{\n \/\/ Move it\n for (var i = 0; i < track.length; i++)\n {\n var segment = track[i];\n\n segment.z += acceleration.z;\n\n if (segment.z > (camera.z + 128))\n {\n segment.z -= startZ;\n }\n }\n\n for (var i = 0; i < grass.length; i++)\n {\n var segment = grass[i];\n\n segment.z += acceleration.z;\n\n if (segment.z > (camera.z + 128))\n {\n segment.gameObject.setFrame('grass-spring-' + Phaser.Math.RND.weightedPick(grassFrames));\n segment.size.set(segment.gameObject.width, segment.gameObject.height);\n segment.gameObject.setOrigin(0.5, 1);\n segment.z -= startZ;\n }\n }\n\n camera.update();\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Phaser.io is a cool free\/open source Javascript platform for making HTML5\/Canvas games, animations and WebGL awesomeness!\u00a0 I thought I would play around a bit and make an example of a camera panning a peaceful meadow in such a way that will lull you to sleep or cause motion sickness! The config Set up \u201cGame\u201d functions […]<\/p>\n","protected":false},"author":2,"featured_media":5346,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[17,19],"tags":[],"class_list":["post-3426","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","category-tutorials","clearfix","post-index"],"acf":[],"jetpack_featured_media_url":"https:\/\/corbinrose.com\/blog\/wp-content\/uploads\/2023\/01\/phasetr-1.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/posts\/3426","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/comments?post=3426"}],"version-history":[{"count":0,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/posts\/3426\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/media\/5346"}],"wp:attachment":[{"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/media?parent=3426"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/categories?post=3426"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/tags?post=3426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}