{"id":3439,"date":"2016-01-01T00:29:56","date_gmt":"2015-12-31T23:29:56","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=3439"},"modified":"2017-10-01T21:36:16","modified_gmt":"2017-10-01T20:36:16","slug":"p5-play","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=3439","title":{"rendered":"\/ p5.js \/ 23 \/ p5.play \/ Partie 1"},"content":{"rendered":"

<\/p>\n

Ces 3 articles sur p5.play<\/em><\/strong> sont une traduction\/adaptation de l’article\u00a0Making Games with p5.play<\/strong> d’Allison Parrish<\/a>
\n<\/a>Ils utilisent la librairies\u00a0p5.play<\/strong><\/em> de Paolo Pedercini,\u00a0\u00a0http:\/\/p5play.molleindustria.org<\/a><\/p>\n

Sprites<\/h3>\n

Un\u00a0sprite<\/span><\/b><\/i>, est dans un jeu vid\u00e9o\u00a0un \u00e9l\u00e9ment graphique qui peut se d\u00e9placer sur l’\u00e9cran.\u00a0Le fond de l’\u00e9cran constitue g\u00e9n\u00e9ralement le\u00a0d\u00e9cor\u00a0et les\u00a0sprites<\/i>\u00a0sont les personnages et les objets qui se superposent au fond d’\u00e9cran et qui se d\u00e9placent.<\/p>\n

Un seul sprite<\/h3>\n

Cr\u00e9er un sprite<\/strong><\/em> dans p5.play<\/em><\/strong> s’effectue \u00e0 l’aide de la fonction createSprite ()<\/em><\/strong>. Cette fonction renvoie un objet sprite<\/strong><\/em>, qui lui-m\u00eame poss\u00e8de un certain nombre d’attributs et de m\u00e9thodes qui permettent de rechercher et de modifier les propri\u00e9t\u00e9s du sprite<\/strong><\/em>.<\/p>\n

Voici un exemple simple qui cr\u00e9e un seul sprite<\/strong><\/em>:<\/p>\n

var sprite;\r\nfunction setup() {\r\n createCanvas(400, 400);\r\n sprite = createSprite(width\/2, height\/2, 40, 40);\r\n sprite.shapeColor = color(236,36,94);\r\n sprite.velocity.y = 0.5;\r\n}\r\n\r\nfunction draw() {\r\n background(200);\r\n drawSprites();\r\n}\r\n\r\nfunction mousePressed() {\r\n sprite.position.x = mouseX;\r\n sprite.position.y = mouseY;\r\n}<\/pre>\n
La fonction createSprite ()<\/em><\/strong> prend 4 param\u00e8tres : la position du sprite<\/strong><\/em>, sa largeur et sa hauteur. L’attribut .shapeColor<\/em><\/strong> d\u00e9finit la couleur du rectangle qui repr\u00e9sente le sprite<\/em><\/strong>. Pour que p5.play<\/strong><\/em> affiche le sprite<\/strong><\/em>, il faut ajouter la fonction drawSprites()<\/strong><\/em> \u00e0 la fin de draw()<\/strong><\/em>.<\/p>\n
Chaque sprite<\/strong><\/em> a un attribut de position et un attribut de vitesse. Ces 2 attributs ont des attributs x<\/em><\/strong> et y<\/em><\/strong>, \u00e0 d\u00e9finir pour contr\u00f4ler la position du sprite<\/em><\/strong> et sa vitesse (dans les deux dimensions). La librairie p5.play<\/em><\/strong> s’occupe de mettre \u00e0 jour la position en fonction de la vitesse \u2014 inutile de faire les calculs.
\nDans l’exemple ci-dessus, le sprite<\/em><\/strong> se d\u00e9place constamment vers le bas, au clic de souris, le sprite<\/em><\/strong> est instantan\u00e9ment d\u00e9plac\u00e9 \u00e0 la position de la souris.<\/p>\n
Sprites en mouvement<\/h3>\n
Comme mentionn\u00e9 ci-dessus, il est possible de\u00a0 r\u00e9gler la vitesse du sprite<\/em><\/strong> directement avec\u00a0.velocity.x<\/strong><\/em> et\u00a0.velocity.y<\/strong>.<\/em>\u00a0L’attribut setSpeed()<\/em><\/strong> du sprite<\/strong><\/em> peut \u00eatre appel\u00e9 pour indiquer au sprite<\/em><\/strong> de se d\u00e9placer dans une direction particuli\u00e8re \u00e0 une vitesse donn\u00e9e. Dans cet exemple, les fl\u00e8ches du clavier contr\u00f4lent le sprite<\/strong><\/em>:<\/p>\n
var sprite;\r\n\r\nfunction setup() {\r\n createCanvas(400, 400);\r\n sprite = createSprite(width\/2, height\/3, 40, 40);\r\n sprite.shapeColor = color(236,36,94);\r\n}\r\n\r\nfunction draw() {\r\n background(200);\r\n fill(255);\r\n noStroke();\r\n textAlign(CENTER, CENTER);\r\n text(\"utiliser les fl\u00e8ches pour d\u00e9placer, ou ESPACE pour stopper\",width\/2, 20);\r\n drawSprites();\r\n}\r\n\r\nfunction keyPressed() {\r\n if (keyCode == RIGHT_ARROW) {\r\n sprite.setSpeed(1.5, 0);\r\n }\r\n else if (keyCode == DOWN_ARROW) {\r\n sprite.setSpeed(1.5, 90);\r\n }\r\n else if (keyCode == LEFT_ARROW) {\r\n sprite.setSpeed(1.5, 180);\r\n }\r\n else if (keyCode == UP_ARROW) {\r\n sprite.setSpeed(1.5, 270);\r\n }\r\n else if (key == ' ') {\r\n sprite.setSpeed(0, 0);\r\n }\r\n return false;\r\n}<\/pre>\n
Pour ajouter de la gravit\u00e9 utiliser la m\u00e9thode .addSpeed()<\/strong><\/em>.
\nVoici un exemple qui fait qu’un sprite<\/em><\/strong> est attir\u00e9 vers le bas et rebondit quand il atteint le “fond”:<\/p>\n
var sprite;\r\n\r\nfunction setup() {\r\n createCanvas(400, 400);\r\n sprite = createSprite(width\/2, height\/2, 40, 40);\r\n sprite.shapeColor = color(236,36,94);\r\n sprite.velocity.y = 0;\r\n}\r\n\r\nfunction draw() {\r\n background(200);\r\n if (sprite.position.y >= height) {\r\n sprite.velocity.y *= -1;\r\n sprite.position.y = height;\r\n }\r\n sprite.addSpeed(0.25, 90);\r\n drawSprites();\r\n}\r\n\r\nfunction mousePressed() {\r\n sprite.position.y = mouseY;\r\n}<\/pre>\n
Suivre la souris<\/h3>\n
Il y a plusieurs fa\u00e7ons de faire suivre un sprite<\/strong><\/em> \u00e0 la souris. La premi\u00e8re est de r\u00e9gler la position directement:<\/p>\n
var sprite;\r\n\r\nfunction setup() {\r\n createCanvas(400, 400);\r\n sprite = createSprite(width\/2, height\/2, 40, 40);\r\n sprite.shapeColor = color(236,36,94);\r\n}\r\n\r\nfunction draw() {\r\n background(200);\r\n sprite.position.x = mouseX;\r\n sprite.position.y = mouseY;\r\n drawSprites();\r\n}<\/pre>\n
Il est \u00e9galement possible d’ajouter un peu de latence au mouvement du sprite<\/strong><\/em> en r\u00e9glant les vitesses X et Y \u00e0 la diff\u00e9rence entre la position du sprite<\/em><\/strong> et la position de la souris.<\/p>\n
var sprite;\r\n\r\nfunction setup() {\r\n createCanvas(400, 400);\r\n sprite = createSprite(\r\n width\/2, height\/2, 40, 40);\r\n sprite.shapeColor = color(236,36,94);\r\n noCursor();\r\n}\r\n\r\nfunction draw() {\r\n background(200);\r\n sprite.velocity.x = (mouseX - sprite.position.x) * 0.2;\r\n sprite.velocity.y = (mouseY - sprite.position.y) * 0.2;\r\n drawSprites();\r\n}<\/pre>\n
Enfin, la m\u00e9thode .attractionPoint ()<\/em><\/strong>\u00a0permet de d\u00e9finir une force qui pousse le sprite<\/em><\/strong> dans la direction de la position de la souris.<\/p>\n
Dans cet exemple l’attribut .maxSpeed<\/em><\/strong> de l’objet est d\u00e9fini (Il contr\u00f4le la vitesse \u00e0 laquelle un sprite<\/strong><\/em> peut se d\u00e9placer, quelles que soient les forces qui s’exercent sur lui), son attribut .friction<\/em><\/strong> (qui est un multiplicateur qui r\u00e9duit lentement la vitesse de l’objet), et l’attribut .rotateToDirection<\/em><\/strong> (qui, lorsqu’il est r\u00e9gl\u00e9 sur true<\/em><\/strong>, fait tourner l’objet dans la direction o\u00f9 il se d\u00e9place).<\/p>\n
var sprite;\r\n\r\nfunction setup() {\r\n createCanvas(400, 400);\r\n sprite = createSprite(width\/2, height\/2, 40, 40);\r\n sprite.shapeColor = color(236,36,94);\r\n sprite.rotateToDirection = true;\r\n sprite.maxSpeed = 2;\r\n sprite.friction = .01;\r\n}\r\nfunction draw() {\r\n background(200);\r\n if (mouseIsPressed) {\r\n sprite.attractionPoint(0.5, mouseX, mouseY);\r\n }\r\n drawSprites();\r\n}<\/pre>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/3439"}],"collection":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3439"}],"version-history":[{"count":18,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/3439\/revisions"}],"predecessor-version":[{"id":3504,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/3439\/revisions\/3504"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3439"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3439"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}