JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.0/pixi.min.js"></script>
JavaScript
/*
example created by GERENTE for Pixi.js Forum to RENDER only objects INSCREEN
http://www.html5gamedevs.com/topic/34168-rendering-only-in-screen-objects/
USE W,A,S,D to move
*/
var screenW = 600;
var screenH = 600;
var renderer = PIXI.autoDetectRenderer(screenW, screenH, {
backgroundColor: 0xAA7F39,
antialias: true,
transparent: false,
resolution: 1
});
document.body.appendChild(renderer.view);
//LAYER
renderer.stage = new PIXI.Container()
renderer.stage.position.set(screenW/2,screenH/2)
var layerPlayer = new PIXI.Container()
var layerEnemies = new PIXI.Container()
renderer.stage.addChild(layerEnemies)
renderer.stage.addChild(layerPlayer)
//CREATE CIRCLE GRAPHIC
var createGraphic = function(x,y,color){
var graphic = new PIXI.DisplayObjectContainer();
graphic.position.set(x,y)
//BODY
var body = new PIXI.Graphics();
body.name = 'body'
body.lineStyle(2, 0x000000, 1);
body.beginFill(color?color:0xff0000);
body.drawCircle(0, 0, 15);
graphic.addChild(body)
//FACE
var face = new PIXI.Graphics();
face.name = 'face'
face.lineStyle(2, 0x000000, 1);
face.beginFill(0x000000);
face.drawCircle(15, 0, 5);
graphic.addChild(face)
return graphic
}
var random = function(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
var clamp = function(number, min, max) {
return Math.min(Math.max(min, number), max)
}
//ADDING PLAYER
var player =createGraphic(0,0,0x0000FF)
player.xPos = player.yPos = 0
layerPlayer.addChild(player)
//ADDING ENEMIES
for(var i=0;i<3001;i++){
var pos = {x:random(0,10000) ,y:random(0,10000) }
var enemy = createGraphic(pos.x , pos.y)
enemy.xPos = pos.x
enemy.yPos = pos.y
layerEnemies.addChild(enemy)
}
//INPUT LISTENERS
document.addEventListener("keydown", function(event) {
setKeyPressed(event.keyCode, true);
})
document.addEventListener("keyup", function(event) {
setKeyPressed(event.keyCode, false); ...