Matter js 연습...

app.js

import React, { Component, PureComponent  } from 'react';

import { AppRegistry, StyleSheet, Dimensions, View ,Image, Text ,Animated} from "react-native";
import { GameEngine, GameLoop } from "react-native-game-engine";
import {Finger} from './src/Finger'
import FastImage from 'react-native-fast-image'


import Matter from 'matter-js'

import Avalanche from './src/Avalanche'
import Wall from './src/Wall'
import Physics from './src/Physics'


import Jug from './src/Jug'
import Water from './src/Water'

const { width: WIDTH, height: HEIGHT } = Dimensions.get("window");
const RADIUS = 25;

class App extends Component  {
  constructor() {
    super();
    this.state = {
      x: WIDTH / 2 - RADIUS,
      y: HEIGHT / 2 - RADIUS,
      dg : '0deg',
      box_x:0,
      box_y:0,

      temp_is_water_show : false
    };

    // this.gameEngine = null;
    // this.entities = this.setup_world();
    this.entities = this.setup_test_world();
  }



  MoveFinger = (entities, { touches , time }) => {

    let engine = entities.MyEngine.engine;
    let count = 0;

    let jug_obj = entities.jug 
    touches.filter(t => t.type === "move").forEach(t => {
      // 주전자 위치 이동 


      jug_obj.body.position.x = jug_obj.body.position.x + t.delta.pageX
      jug_obj.body.position.y = jug_obj.body.position.y + t.delta.pageY


      if(HEIGHT/3 < jug_obj.body.position.y){
        jug_obj.deg = '270deg'
      }else{
        jug_obj.deg = '0deg'
      }
    
      // 주전자를 따라다님 물방울 새끼가
      // let water_obj  = entities.water
      // water_obj.body.position.x = water_obj.body.position.x + t.delta.pageX
      // water_obj.body.position.y = water_obj.body.position.y + t.delta.pageY
    })
    // let water_obj  = entities.water.body.bodies
    // console.log(" water_obj : ", water_obj[0])
    // for ( let i = 0 ; i< water_obj.length ; i ++){
    //   Matter.Body.translate(entities.water.body,{x: 0, y:time.delta})
    // }
    //console.log("entities.water1.body.position.y : ",entities.water1.body.position.y)
    
    // 무한 돌리기 
    let randomv = Math.random() * (25 - 10) + 10;
    let randomv2 = Math.random() * (18 - 12) + 12;


    if (entities.water1.body.position.y >= HEIGHT) {
      if (jug_obj.deg != '0deg') {
        Matter.Body.setPosition(entities.water1.body, {
          x: jug_obj.body.position.x - randomv,
          y: jug_obj.body.position.y + randomv
        })
      }
    }
    else {
      Matter.Body.translate(entities.water1.body, { x: 0, y: randomv2 + 1 })
    }

    if (entities.water2.body.position.y >= HEIGHT) {
      if (jug_obj.deg != '0deg') {
        Matter.Body.setPosition(entities.water2.body, {
          x: jug_obj.body.position.x - randomv,
          y: jug_obj.body.position.y + randomv
        })
      }
    }
    else {
      Matter.Body.translate(entities.water2.body, { x: 0, y: randomv2 + 4 })
    }


    if (entities.water3.body.position.y >= HEIGHT) {
      if (jug_obj.deg != '0deg') {
        Matter.Body.setPosition(entities.water3.body, {
          x: jug_obj.body.position.x - randomv,
          y: jug_obj.body.position.y + randomv
        })
      }
    }
    else {
      Matter.Body.translate(entities.water3.body, { x: 0, y: randomv2 + 3 })
    }


    if (entities.water4.body.position.y >= HEIGHT) {
      if (jug_obj.deg != '0deg') {
        Matter.Body.setPosition(entities.water4.body, {
          x: jug_obj.body.position.x - randomv,
          y: jug_obj.body.position.y + randomv
        })
      }
    }
    else {
      Matter.Body.translate(entities.water4.body, { x: 0, y: randomv2 + 2 })
    }


    if (entities.water5.body.position.y >= HEIGHT) {
      if (jug_obj.deg != '0deg') {
        Matter.Body.setPosition(entities.water5.body, {
          x: jug_obj.body.position.x - randomv,
          y: jug_obj.body.position.y + randomv
        })
      }
    }
    else {
      Matter.Body.translate(entities.water5.body, { x: 0, y: randomv2 })
    }


    return entities;
  };

  // 여러개 쓸수 있다길래 써봄 
  TEST_SYS = (entities, { touches , time }) => {
    let engine = entities.MyEngine.engine;
    touches.filter(t => t.type === "move").forEach(t => {
    })
    return entities;
  }


  setup_world = () =>{

    let engine = Matter.Engine.create({enableSleeping : false})
    let world = engine.world;

    let avalanche = Matter.Bodies.circle(WIDTH/4,HEIGHT/2,50,50)
    let floor = Matter.Bodies.rectangle(WIDTH/2, HEIGHT - 25 ,WIDTH,50,{isStatic : true})
    let ceiling = Matter.Bodies.rectangle(WIDTH/2, 25 ,HEIGHT,50,{isStatic : true})

    let [pip1H,pip2H] = generatePipes();
    let pipe1 = Matter.Bodies.rectangle(WIDTH - (100 / 2), pip1H /2 ,100,pip1H,{isStatic : true})
    let pipe2 = Matter.Bodies.rectangle(WIDTH- (100 / 2), HEIGHT -  (pip2H /2) ,100,pip2H,{isStatic : true})

    let [pip3H,pip4H] = generatePipes();
    let pipe3 = Matter.Bodies.rectangle(WIDTH*2 - (100 / 2), pip3H /2 ,100,pip3H,{isStatic : true})
    let pipe4 = Matter.Bodies.rectangle(WIDTH*2 - (100 / 2), HEIGHT -  (pip4H /2) ,100,pip4H,{isStatic : true})

    // 게임엔진 월드에 추가 및 구성요소 추가 
    Matter.World.add(world, [avalanche,floor,pipe1,pipe2,pipe3,pipe4]);

    return{
      physics: {engine : engine, world:world },
      avalanche :{ body:avalanche, size : [50,50] , color:'red', renderer :Avalanche},
      floor : { body:floor, size : [WIDTH,50] , color:'blue', renderer :Wall},
      ceiling : { body:ceiling, size : [WIDTH,50] , color:'blue', renderer :Wall},
      pipe1 : { body:pipe1, size : [100,pip1H] , color:'blue', renderer :Wall},
      pipe2 : { body:pipe2, size : [100,pip2H] , color:'blue', renderer :Wall},
      pipe3 : { body:pipe3, size : [100,pip3H] , color:'blue', renderer :Wall},
      pipe4 : { body:pipe4, size : [100,pip4H] , color:'blue', renderer :Wall}
    }
  }


  setup_test_world =()=> {

    let engine = Matter.Engine.create({ enableSleeping: false })
    let world = engine.world;
    let jug = Matter.Bodies.circle(WIDTH / 2, HEIGHT / 2, 50, 50) // x,y width,height
    let floor = Matter.Bodies.rectangle(WIDTH / 2, HEIGHT - 25, WIDTH, 50, { isStatic: true })
    let ceiling = Matter.Bodies.rectangle(WIDTH / 2, 25, HEIGHT, 50, { isStatic: true })

    // 소스백업 1
    let water1 =  Matter.Bodies.circle(WIDTH / 2 - 25, HEIGHT / 2 +25, 10)
    let water2 =  Matter.Bodies.circle(WIDTH / 2 - 20, HEIGHT / 2 +25, 10)
    let water3=  Matter.Bodies.circle(WIDTH / 2 - 15, HEIGHT / 2 +25, 10)
    let water4=  Matter.Bodies.circle(WIDTH / 2 - 10, HEIGHT / 2 +25, 10)
    let water5=  Matter.Bodies.circle(WIDTH / 2 - 5, HEIGHT / 2 +25, 10)
    
    // let water = Matter.Composites.stack(WIDTH / 2, HEIGHT / 2, 10, 10, 0, 0, function (x, y) {
    //   return Matter.Bodies.circle(WIDTH / 2 - 25, HEIGHT / 2 +25, Matter.Common.random(10, 20), 
    //     {
    //       friction: 0.00001,
    //       restitution: 0.5,
    //       density: 0.001
    //     });
    // })
    
    Matter.World.add(world, [
      jug,
      floor, 
      ceiling,
      water1,
      water2,
      water3,
      water4,
      water5,
    ]);

    return {
      MyEngine :  {engine: engine, world: world},
      jug : {body : jug, size :[50,50], color:'white', deg : '0deg', renderer:Jug},
      floor : { body:floor, size : [WIDTH,50] , color:'gray', renderer :Wall},
      ceiling : { body:ceiling, size : [WIDTH,50] , color:'gray', renderer :Wall},
      water1 : { body:water1, size : [10,10] , color:'blue', renderer :Water},
      water2 : { body:water2, size : [10,10] , color:'blue', renderer :Water},
      water3 : { body:water3, size : [10,10] , color:'blue', renderer :Water},
      water4 : { body:water4, size : [10,10] , color:'blue', renderer :Water},
      water5 : { body:water5, size : [10,10] , color:'blue', renderer :Water}
    }
  }
 

  render() {
    return (
      <View style={styles.container}  >

        <GameEngine
          style={styles.container}
          systems={[this.MoveFinger,this.TEST_SYS]} //-- We can add as many systems as needed
          entities={this.entities}>


        </GameEngine>


      </View>
    )
  }
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#FFF"
  },
  player: {
    position: "absolute",
    backgroundColor: "pink",
    width: RADIUS * 2,
    height: RADIUS * 2,
    borderRadius: RADIUS * 2
  },
  container2: {
    overflow: 'hidden',
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0
  }
});



AppRegistry.registerComponent("BestGameEver", () => App);
export default App;



  // //  물이 떨어지는 단순한 애니메니션
  // RainD(){

  //   let array = [];
  //   for (let i = 0; i <30; i++) {
  //     array.push(i);
  //   }


  //   return (
  //     array.map((i) => {
  //       return (
  //         <View style={{ position: "absolute", left: this.state.x + Math.floor(Math.random() * 10), top: this.state.y + 50, }}>
  //           <Animatable.View
  //             style={{ width: 10, height: 10, backgroundColor: 'blue' }}
  //             animation={{
  //               from: {
  //                 translateY: 0,
  //                 translateX: 0,
  //               },
  //               to: {
  //                 translateY: this.state.y + Math.floor(Math.random() * 50),
  //                 translateX: Math.floor(Math.random() * 50)
  //               },
  //             }}
  //             duration={500}
  //             delay={Math.floor(Math.random() * 50)}
  //             easing={t => Math.pow(t, 1.7)}
  //             iterationCount="infinite"
  //           >
  //           </Animatable.View>
  //         </View>
  //       )
  //     }
  //     )
  //   )
  // }


// <View style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
// {/* <View style={[styles.player, { left: this.state.x, top: this.state.y }]} /> */}

// <View style={[styles.player, { left: this.state.x, top: this.state.y, transform: [{ rotate: this.state.dg }] }]} >
//   <Image
//     style={{ height: 80, width: 60 }}
//     source={require('./image/jug.png')}
//     resizeMode={'contain'}
//   />
// </View>
// {temp_is_water_show ?
// //  height: 100, width: 20, backgroundColor: 'transparent' 
//     this.RainD()
//   :
//   <View>
//   </View>}

// <View style={{ height: 400, width: 400, backgroundColor: 'transparent', justifyContent: 'flex-end', alignItems: 'center' }}
//   onLayout={event => {
//     const layout = event.nativeEvent.layout;
//     this.setState({ box_y: layout.y, box_x: layout.x })
//   }}
// >
//   <View style={{ height: 200, width: 200, backgroundColor: 'red' }}>
//     <Text style={{ fontSize: 50, alignSelf: 'center' }}>화분</Text>
//   </View>
// </View>
// </View>

import React, {Component} from 'react'
import {View,Image,Dimensions} from 'react-native'


const { width: WIDTH, height: HEIGHT } = Dimensions.get("window");
 
export default class Jug extends Component{

    render(){
        const width  = this.props.size[0];
        const height  = this.props.size[1];
        const x = this.props.body.position.x - width/2;
        const y = this.props.body.position.y - height/2;

        // 화면의 1/3 지점이 넘어가면 이미지 회전
        // let dg = '0deg'
        // if(HEIGHT/3 < this.props.body.position.y){
        //     dg = '270deg'
        // }else{
        //     dg = '0deg'
        // }

        return(
            <Image
                style= {{
                    position : 'absolute',
                    top:y,
                    left:x,
                    width:width,
                    height : height,
                    backgroundColor : this.props.color,
                    transform: [{ rotate: this.props.deg }] 
                }}
                resizeMode= 'contain'
                source = {require('../image/jug.png')}
            />
        )
    }
}

import React, {Component} from 'react'
import {View,Dimensions} from 'react-native'

const { width: WIDTH, height: HEIGHT } = Dimensions.get("window");
import FastImage from 'react-native-fast-image'

export default class Water extends Component{

    render(){
        // 소스백업 1
        const width  = this.props.size[0];
        const height  = this.props.size[1];
        const x = this.props.body.position.x - width/2;
        const y = this.props.body.position.y - height/2;
       



        // console.log(this.props.body.bodies,"\n\n")
        // const x = this.props.body.bodies.position.x
        // const y = this.props.body.bodies.position.y
        
     
        let tamp_arr = []
        tamp_arr = this.props.body.bodies

        //console.log("this.props.body.bodies: ",this.props.body.bodies)

        return (
          /*   <View
                style={{
                    position: 'absolute',
                    top: y,
                    left: x,
                    width: 10,
                    height: 10,
                    backgroundColor: this.props.color,
                }}
            >

            </View> */
            <FastImage
            style= {{
                position: 'absolute',
                top: y,
                left: x,
                width: 20,
                height: 20,
            }}
                source={require('../image/drop.png')}
            />
        )

        // console.log("Avalanche 랜더") 계속 랜더링 하고 있는거다
        // return(
        //     {

            
               
        //     }
        //     // <View
        //     //     style= {{
        //     //         position : 'absolute',
        //     //         // top:y,
        //     //         // left:x,
        //     //         width:10,
        //     //         height :10,
        //     //         backgroundColor : this.props.color,
        //     //     }}
        //     //     // animation={{
        //     //     //     from: {
        //     //     //         translateY: 0,
        //     //     //         translateX: 0,
        //     //     //     },
        //     //     //     to: {
        //     //     //         translateY: y + Math.floor(Math.random() * 50),
        //     //     //         translateX: Math.floor(Math.random() * 50)
        //     //     //     },
        //     //     // }}
        //     // >
                
        //     // </View>
        // )
    }
}



  //           <Animatable.View
  //             style={{ width: 10, height: 10, backgroundColor: 'blue' }}
  //             animation={{
  //               from: {
  //                 translateY: 0,
  //                 translateX: 0,
  //               },
  //               to: {
  //                 translateY: this.state.y + Math.floor(Math.random() * 50),
  //                 translateX: Math.floor(Math.random() * 50)
  //               },
  //             }}
  //             duration={500}
  //             delay={Math.floor(Math.random() * 50)}
  //             easing={t => Math.pow(t, 1.7)}
  //             iterationCount="infinite"
  //           >
  //           </Animatable.View>