2c:null 2d:["$","title",null,{"children":"Web 3.0 Explorable # 3: NFTs -- Game Items With Real World Value | Paul Gadi | Observable"}] 32:T1837,class ExampleGame extends Phaser.Scene { constructor() { super({type:"ExampleGame"}) this.score = 0; this.scoreDisplay; this.captureText; this.bricks; this.paddle; this.ball; this.emojiPrize; this.emojiMetadata = [ { id: 0, name: "smile37", icon: "🤖", }, { id: 1, name: "smile32", icon: "🤡" }, { id: 2, name: "smile33", icon: "💩" }, { id: 3, name: "smile34", icon: "👻" }, { id: 4, name: "smile38", icon: "🎃" }, { id: 5, name: "smile36", icon: "👽" } ] this.currentEmojiIndex = 0; } preload() { this.load.baseURL = 'https://labs.phaser.io/'; this.load.crossOrigin = 'anonymous'; this.load.atlas('assets', 'assets/games/breakout/breakout.png', 'assets/games/breakout/breakout.json'); this.load.atlas('emojis', 'assets/games/emoji-match/emojis.png', 'assets/games/emoji-match/emojis.json'); this.load.image('starfield', 'https://examples.phaser.io/assets/misc/starfield.jpg'); } create() { this.physics.world.setBoundsCollision(true, true, true, false); this.add.tileSprite(0, 0, 1600, 1600, 'starfield'); this.scoreDisplay = this.add.text(10, 10, 'Score: ' + mutable score, { font: '16px Courier', fill: '#ffffff' }); this.captureText = this.add.text(220, 30, "EMOJI CAPTURED!", {font: `40px Courier`, fill: `#ffff00`}); this.captureText.setVisible(false); // Create the bricks in a 10x6 grid this.bricks = this.physics.add.staticGroup({ key: 'assets', frame: [ 'blue1', 'red1', 'green1', 'yellow1', 'silver1', 'purple1', 'blue1', 'red1' ], frameQuantity: 3, gridAlign: { width: 12, height: 6, cellWidth: 64, cellHeight: 32, x: 48, y: 200 } }); // create the emoji prize this.emojiPrize = this.physics.add.image(400, 100, 'emojis', this.emojiMetadata[0].name).setImmovable(); this.ball = this.physics.add.image(400, 500, 'assets', 'ball1').setCollideWorldBounds(true).setBounce(1); this.ball.setData('onPaddle', true); this.paddle = this.physics.add.image(400, 550, 'assets', 'paddle2').setImmovable(); // Our colliders this.physics.add.collider(this.ball, this.bricks, this.hitBrick, null, this); this.physics.add.collider(this.ball, this.paddle, this.hitPaddle, null, this); this.physics.add.collider(this.ball, this.emojiPrize, this.hitEmoji, null, this); // Input events this.input.on('pointermove', function (pointer) { // Keep the paddle within the game this.paddle.x = Phaser.Math.Clamp(pointer.x, 52, 748); if (this.ball.getData('onPaddle')) { this.ball.x = this.paddle.x; } }, this); this.input.on('pointerup', function (pointer) { if (this.ball.getData('onPaddle')) { this.ball.setVelocity(-75, -500); this.ball.setData('onPaddle', false); } }, this); } hitBrick(ball, brick) { brick.disableBody(true, true); mutable score += 1; this.scoreDisplay.setText('Score: ' + mutable score); if (this.bricks.countActive() === 0) { this.resetLevel(); } } hitEmoji(ball, item) { mutable emojis_captured += this.emojiMetadata[this.currentEmojiIndex].icon this.captureText.setVisible(true); this.tweens.add({ targets: [this.emojiPrize], angle: '-=360', scale: 0, ease: 'cos.inout', duration: 350, completeDelay: 200, onComplete: () => { this.currentEmojiIndex = Phaser.Math.Between(0, this.emojiMetadata.length - 1); this.emojiPrize.setFrame(this.emojiMetadata[this.currentEmojiIndex].name); this.tweens.add({ targets: [this.emojiPrize], scale: 1, duration: 200 }); } }); this.tweens.add({ targets: [ this.captureText], scale: 1.4, x: 200, y: 20, yoyo: true, ease: 'sine.inout', duration: 200, completeDelay: 200, onComplete: () => { this.tweens.add({ targets: [ this.captureText], alpha: 0, yoyo: false, ease: 'sine.inout', duration: 200, completeDelay: 200, onComplete: () => { this.captureText.alpha = 1; this.captureText.setVisible(false); } }) } }); this.resetLevel(); } resetBall() { this.ball.setVelocity(0); this.ball.setPosition(this.paddle.x, 500); this.ball.setData('onPaddle', true); } resetLevel() { this.resetBall(); this.bricks.children.each(function (brick) { brick.enableBody(false, 0, 0, true, true); }); } hitPaddle(ball, paddle) { var diff = 0; if (ball.x < paddle.x) { // Ball is on the left-hand side of the paddle diff = paddle.x - ball.x; ball.setVelocityX(-10 * diff); } else if (ball.x > paddle.x) { // Ball is on the right-hand side of the paddle diff = ball.x -paddle.x; ball.setVelocityX(10 * diff); } else { // Ball is perfectly in the middle // Add a little random X to stop it bouncing straight up! ball.setVelocityX(2 + Math.random() * 8); } } update() { if (this.ball.y > 600) { this.resetBall(); } } }33:[{"id":"bd82f0eb4ee3b5f75686ea1d84665408bddd83e2ffe584aa2e5759de82c3f0fb9ec16667e7dd37189f03c1edaf82d27cd34bd891e59c67b23052e762c0ea7360","href":"https://static.observableusercontent.com/files/bd82f0eb4ee3b5f75686ea1d84665408bddd83e2ffe584aa2e5759de82c3f0fb9ec16667e7dd37189f03c1edaf82d27cd34bd891e59c67b23052e762c0ea7360","name":"image@1.png","type":"image/png","lastModified":1605597621757.335,"size":375949},{"id":"fb4effc0b252294513039e57af2e7e20b5f766ac69d38b565b58a468a7e3001ad33bb43d70740901c4fd5bd6969ea4084151eb9702b27b2175be527a176aac53","href":"https://static.observableusercontent.com/files/fb4effc0b252294513039e57af2e7e20b5f766ac69d38b565b58a468a7e3001ad33bb43d70740901c4fd5bd6969ea4084151eb9702b27b2175be527a176aac53","name":"image.png","type":"image/png","lastModified":1605498016374.473,"size":50603}] 30:{"id":"95795e77f6d3351d","slug":"web-3-0-explorable-3-nfts-game-items-with-real-world-value","title":"Web 3.0 Explorable # 3: NFTs -- Game Items With Real World Value","thumbnail":"8f9fc9ef2a0db38707cb4bb5c45e5d1787734d33d19103530eae9e7d2c0e405f","access_level":"public","create_time":"$D2020-11-14T11:33:23.980Z","update_time":"$D2020-11-17T12:05:29.371Z","view_time":null,"first_public_time":"$D2020-11-17T12:06:15.437Z","fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"7bb89c023e182f40","login":"polats","name":"Paul Gadi","avatar_url":"https://avatars-next.observableusercontent.com/8191924f4e5881ae3942c26a6f4e4e26daf1253dda2bedff2fd185f56c559397","tier":"starter_2024"},"version":1244,"publish_version":1244,"role":null,"authored":false,"authors":[{"type":"individual","id":"23e2d36ccff51073","login":"polats","name":"Paul Gadi","avatar_url":"https://avatars-next.observableusercontent.com/8191924f4e5881ae3942c26a6f4e4e26daf1253dda2bedff2fd185f56c559397","tier":null}],"members":[{"type":"individual","id":"23e2d36ccff51073","login":"polats","name":"Paul Gadi","avatar_url":"https://avatars-next.observableusercontent.com/8191924f4e5881ae3942c26a6f4e4e26daf1253dda2bedff2fd185f56c559397","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"bd38bf8846cbb1f2","slug":"web-3-0-explorables","title":"Web 3.0 Explorables","owner":{"id":"7bb89c023e182f40","login":"polats","name":"Paul Gadi"}},"type":"notebook","body":{"title":"Web 3.0 Explorable # 3: NFTs -- Game Items With Real World Value","cells":[{"id":0,"value":"md`# Web 3.0 Explorable # 3: NFTs -- Game Items With Real World Value`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`\nBy using Web 3.0, game developers can create virtual items in games that have actual monetary value. Players will be able to trade the items they earn in-game for **actual currency** that they can use in their day-to-day lives.\n\nWe'll use the game below as an example. In the game, players can capture the emojis behind the blocks.\n\n*Try it out*: just tap or click on the window below to start playing. Use the mouse or slide your finger over the game to move the paddle. Try to hit the emoji with the ball.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"{\n return phase(ExampleGame, gameConfig)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"md`\n## Emojis Captured: ${emojis_captured}\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"md`\nNow we need to find a way for our players to trade these emojis for an actual currency, such as US Dollars (or USD). There isn't an easy way to do this *as of now*, but by using Web 3.0 we'll be half-way there! \n\nWe can allow players to trade the emojis for cryptocurrencies such as Ethereum (or ETH). ETH can then be traded for real cash on cryptocurrency exchanges such as Coinbase. \n\nWe can also use APIs such as Etherscan to easily get the current exchange rate:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"md`\nAs of **${apiQueryTime}**, **1 ETH** is equivalent to **US$${EtherscanApiEthPriceQuery.result.ethusd}**\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"md`\nIf our players can sell their emojis for some ETH, we'll be able to provide them real world value. \n\nWith Web 3.0, any game developer can do this now-- simply by converting their virtual items into NFTs.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"md`\n## How Do We Create our NFTs?\n\n**NFT** stands for *Non-Fungible Token*, but I find the term confuses more than it explains. ^{[[1](#footnote1)]} \n\nFor now, we can just think of an NFT as an evolving Web 3.0 standard for defining and creating virtual items so that they'll have real world value.\n\nTo be able to acheive this standard, we'll need 3 things:\n\n 1. A secure account where players will store their items\n 2. A system to be able to transfer items from one player to the other\n 3. A way to transfer the item from the game to wallets and vice versa\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"md`### 1) A secure account where players will store their items\n\nIn traditional games, a player's items are tied to their game accounts. These accounts are identified via a username or e-mail address, and are accessible via an authentication mechanism such as a password or a Facebook Login.\n\nIn Web 3.0, we use wallets instead. These wallets are identified via a public key (like 0xc783df8a850f42e7F7e57013759C285caa701eB6), and are accessible via a private key or a mnemonic^{[[2](#footnote2)]}. We then give our players the option to use whichever wallet client they want to use with their keys.\n\nAn example client is Metamask, which is the most used client for most Web 3.0 games.\n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"md`\nSince Web 3.0 wallets use public and private keys instead of username/passwords, players can use any client that they want to store their items. \n\nDevelopers can even build their own. There are open-source libraries such as ethers.js that can easily allow us to create these accounts. Below we use ethers.js to create a random wallet. You can try clicking the Play button on exampleWallet (or pressing Shift+Enter while editing the field) to see the exampleWalletAddress update.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"exampleWallet = ethers.Wallet.createRandom()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"exampleWalletAddress = exampleWallet.address","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"md`\n### 2) A system to be able to transfer items from one player to the other\n\nWith our players now having a Web 3.0 wallet, transferring items between them is now super easy-- these wallets were designed to do exactly this, transferring cryptocurrency from one wallet to another.\n\nGame items add a bit more complexity though. Instead of just a numerical value, we will need to know what an item is. We will probably need to create a unique id for each item and a definition for them somewhere, perhaps via a callable API.\n\nThe good news is that a lot of prior work has already been done on this, and Opensea, an NFT marketplace, has already created item definition standards^{[[3](#footnote3)]} and a frontend UI we can use as a starting point.\n\n#### Create an Item Definition API\n\nI've created an item definition API for our emojis via a [github gist here.](https://gist.github.com/polats/9f6d10a4ce373c6b7bbd9395a47024f4) Anyone can easily pull the item definition by using github's raw gist API:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":870,"value":"itemDefinitionUrl = \"https://gist.github.com/raw/9f6d10a4ce373c6b7bbd9395a47024f4\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"fetch(proxy + itemDefinitionUrl, {\n headers: {\n Accept: '*/*',\n 'Accept-Language': 'en-US,en;q=0.5',\n Referer: 'https://observablehq.com/@polats/web-3-0-explorable-3-nfts-game-items-with-real-world-value',\n },\n //credentials: 'include',\n cache: 'no-store',\n mode: 'cors',\n redirect: 'follow',\n}).then(response => {\n if (!response.ok) throw new Error(response.status);\n return response.json();\n}).catch(error => {return error;})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"md`And we can pull information for each item by appending the token id to the end of the url:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"fetch(proxy + itemDefinitionUrl + \"/0\", {\n headers: {\n Accept: '*/*',\n 'Accept-Language': 'en-US,en;q=0.5',\n Referer: 'https://observablehq.com/@polats/web-3-0-explorable-3-nfts-game-items-with-real-world-value',\n },\n //credentials: 'include',\n cache: 'no-store',\n mode: 'cors',\n redirect: 'follow',\n}).then(response => {\n if (!response.ok) throw new Error(response.status);\n return response.json();\n}).catch(error => {return error;})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"md` #### Adding our items to Opensea\nWe then need to be able to add our items to Opensea, so that our players will be able to use it to easily transfer and sell their items to each other. \n\nGame developers will need to do a few new things here such as deploying a smart contract. I've added a few links to the footnotes^{[[4](#footnote4)]} for anyone who want to do this for themselves, but for now I've gone ahead and added our items here [https://rinkeby.opensea.io/assets/example-nfts-for-web-3-0-explorables-v5](https://rinkeby.opensea.io/assets/example-nfts-for-web-3-0-explorables-v5)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"md`\n

^ ${text}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"// phase = function*(scenes, config) {\n// const canvas = DOM.canvas(gameConfig.width, gameConfig.height);\n\n// yield canvas;\n\n// new Phaser.Game(config);\n// }\n\nphase = function*(scenes, config = {}) {\n const canvas = DOM.canvas(config.width || 680, config.height || 400);\n\n yield canvas;\n\n new Phaser.Game({\n width: 680,\n height: 400,\n canvas,\n scene: scenes,\n ...config\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"import { text, checkbox, button, select } from \"@jashkenas/inputs\" ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1016,"value":"import { formValue } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1038,"value":"d3 = require(\"d3-fetch\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"fetchButton = function(onSubmit, options = {}) {\n let {\n title = \"Click Me\",\n style = {},\n initialValue = undefined,\n className = \"\",\n button = ``,\n fetchingValue = \"Working...\",\n alterWhileFetching = true\n } = options;\n\n const form = html``;\n form.value = initialValue;\n form.addEventListener(\"submit\", event => {\n if (alterWhileFetching) {\n form.value = fetchingValue;\n form.dispatchEvent(new CustomEvent(\"input\"));\n }\n form.value = onSubmit();\n form.dispatchEvent(new CustomEvent(\"input\"));\n event.preventDefault();\n });\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"md`#### API Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"EtherscanApiEthPriceQuery =\n (await fetch(\"https://api.etherscan.io/api?module=stats&action=ethprice\")).json()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"apiQueryTime = (new Date(EtherscanApiEthPriceQuery.result.ethbtc_timestamp * 1000)).toLocaleString()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"footnote2 = md`#### Ethers Playground\n\nWe can use the ethers library below to understand more about wallets, public keys, private keys and mnemonics. First we import the ethers library and create a provider to the rinkeby testnet below.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"ethers = require('https://cdn.ethers.io/lib/ethers-5.0.umd.min.js')\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"provider = ethers.getDefaultProvider('rinkeby')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"md`It's easy to create a random wallet via Ethers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"newRandomWallet = ethers.Wallet.createRandom();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"md`walletAddress or the public key, which identifies the account to other users.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"walletAdrress = newRandomWallet.address;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"md`mnemonicPhrase and privateKey are used to access the account, think of them as your passwords. In Metamask, the mnemonic phrase is used to create more than one privateKey.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"mnemonicPhrase = newRandomWallet.mnemonic.phrase;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"privateKey = newRandomWallet.privateKey;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"footnote5=md`#### System Wallet\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"md`\nIf the system wallet runs out of ETH, the emoji minting won't work. Fund it by requesting some ETH from the [Rinkeby Faucet](https://faucet.rinkeby.io/).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"systemWallet=`0x79E153d86589186759Dcc004065dBb5d966f368A`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"systemWalletEthBalance = ethers.utils.formatEther(await provider.getBalance(systemWallet))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"md`#### Proxy for fetch\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"viewof proxy = select({\n title: 'proxy',\n description: 'select CORS proxy if fetch fails',\n options: [\n 'https://observable-cors.glitch.me/',\n 'https://cors-anywhere.herokuapp.com/', \n 'https://cors-proxy.htmldriven.com/?url=',\n ],\n value: ''\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"