Added Texture component

README.md

@@ -98,7 +98,10 @@ useRelativeScale(params: {
 
 #### Get source texture image
 ```ts
-useTexture(key: string): HTMLImageElement
+useTexture(params: {
+  key: string, 
+  frame?: string | number
+}): HTMLImageElement
 ```
 
 .
@@ -119,6 +122,11 @@ useTexture(key: string): HTMLImageElement
 </RelativeScale>
 ```
 
+#### Render texture image
+```ts
+<Texture key={string} frame={string? | number?} />
+```
+
 .
 
 ## Utils

dist/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './relative-scale';
 export * from './relative-position';
+export * from './texture';

dist/components/texture.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TextureProps } from '../types/texture';
+type Props = TextureProps;
+export declare const Texture: React.FC<Props>;
+export {};

dist/hooks/use-texture.d.ts

@@ -1 +1,2 @@
-export declare function useTexture(key: string): HTMLImageElement;
+import { TextureProps } from '../types/texture';
+export declare function useTexture({ key, frame }: TextureProps): HTMLImageElement;

dist/types/texture.d.ts

@@ -0,0 +1,4 @@
+export type TextureProps = {
+    key: string;
+    frame?: string | number;
+};

package.json

@@ -1,7 +1,7 @@
 {
   "name": "phaser-react-ui",
   "description": "React interface render for Phaser engine",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "keywords": [
     "phaser",
     "interface",

src/components/index.ts

@@ -1,2 +1,3 @@
 export * from './relative-scale';
 export * from './relative-position';
+export * from './texture';

src/components/relative-position.tsx

@@ -1,23 +1,17 @@
-import React, { useEffect } from 'react';
+import React, { useLayoutEffect } from 'react';
 import { useRelativePosition } from '../hooks';
 import { RelativePositionProps } from '../types/relative-position';
 
 type Props = RelativePositionProps & {
   children: React.ReactNode
 };
 
-export const RelativePosition: React.FC<Props> = ({
-  x, y, children,
-}) => {
-  const ref = useRelativePosition<HTMLDivElement>({ x, y });
+export const RelativePosition: React.FC<Props> = ({ children, ...props }) => {
+  const ref = useRelativePosition<HTMLDivElement>(props);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     ref.current.style.position = 'absolute';
   }, []);
 
-  return (
-    <div ref={ref}>
-      {children}
-    </div>
-  );
+  return <div ref={ref}>{children}</div>;
 };

src/components/relative-scale.tsx

@@ -1,25 +1,17 @@
-import React, { useEffect } from 'react';
+import React, { useLayoutEffect } from 'react';
 import { useRelativeScale } from '../hooks';
 import { RelativeScaleProps } from '../types/relative-scale';
 
 type Props = RelativeScaleProps & {
   children: React.ReactNode
 };
 
-export const RelativeScale: React.FC<Props> = ({
-  target, min, max, round, children,
-}) => {
-  const ref = useRelativeScale<HTMLDivElement>({
-    target, min, max, round,
-  });
+export const RelativeScale: React.FC<Props> = ({ children, ...props }) => {
+  const ref = useRelativeScale<HTMLDivElement>(props);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     ref.current.style.position = 'absolute';
   }, []);
 
-  return (
-    <div ref={ref}>
-      {children}
-    </div>
-  );
+  return <div ref={ref}>{children}</div>;
 };

src/components/texture.tsx

@@ -0,0 +1,17 @@
+import React, { useRef, useLayoutEffect } from 'react';
+import { useTexture } from '../hooks';
+import { TextureProps } from '../types/texture';
+
+type Props = TextureProps;
+
+export const Texture: React.FC<Props> = (props) => {
+  const image = useTexture(props);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    ref.current.appendChild(image);
+  }, []);
+
+  return <div ref={ref} data-texture-container />;
+};

src/hooks/use-texture.ts

@@ -1,11 +1,18 @@
 import { useMemo } from 'react';
 import { useGame } from './use-game';
+import { TextureProps } from '../types/texture';
 
-export function useTexture(key: string) {
+export function useTexture({ key, frame }: TextureProps) {
   const game = useGame();
 
-  return useMemo(
-    () => game.textures.get(key).getSourceImage() as HTMLImageElement,
-    [key],
-  );
+  return useMemo(() => {
+    const texture = game.textures.get(key);
+
+    if (frame === undefined) {
+      return texture.getSourceImage() as HTMLImageElement;
+    }
+
+    // @ts-ignore
+    return texture.frames[frame].source.image as HTMLImageElement;
+  }, [key, frame]);
 }

src/types/texture.ts

@@ -0,0 +1,4 @@
+export type TextureProps = {
+  key: string
+  frame?: string | number
+};