How to wrap texture in a plugin w/ animations?

0 favourites
  • 3 posts
From the Asset Store
3 pixel charaters with over 8 animations each + animations with a gun
  • In the context of a plugin with an animation:

    Is it possible to enable wrapping of a texture, instead of edge clamp?

    With spritesheets, it represents a little more difficult (though it may be possible with an effect and manual wrapping of srcOriginStart to/from srcOriginEnd.)

    With CreateDynamicTexture() it seems possible with using opts of isTiled:true and tileType:repeat. The question I have is it possible to use an existing texture (imageInfo.GetTexture()) to UpdateTexture(data, texture, opts)? imageInfo.GetTexture does not seem to be directly one of the 'data' types for UpdateTexture(), is there another way to get a compatible data type from an existing animation frame / texture?

  • FYI animated third-party plugins aren't meant to be supported. You're in undocumented and unsupported territory here.

    Most images are placed on spritesheets, so texture wrapping is not applicable - it would wrap the entire spritesheet, not just the image you want.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Yes, I know about Spritesheets and their complications.

    I think my solution may be to use rcTex coordinates for the subset of the spritesheet texture, place the full texture on an offscreen canvas and use that canvas as the 'data' for UpdateTexture.

    Here's an example. I will do a couple of changes:

    - gl.readPixels needs to read from the rectangle subset based on rcTex subset of the spritesheet

    - UpdateTexture() can use a Canvas directly, so we don't need to create the img from it, can return the canvas instead.

    function createImageFromTexture(gl, texture, width, height) {
     // Create a framebuffer backed by the texture
     var framebuffer = gl.createFramebuffer();
     gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
    
     // Read the contents of the framebuffer
     var data = new Uint8Array(width * height * 4);
     gl.readPixels(<change based on rcTex and texture width to get lower x>, <change based on rcTex and texture height to get get lower y>, <change based on rcTex width and texel width>, <change based on rcTex height and texel height>, gl.RGBA, gl.UNSIGNED_BYTE, data);
    
     gl.deleteFramebuffer(framebuffer);
    
     // Create a 2D canvas to store the result 
     var canvas = document.createElement('canvas');
     canvas.width = width;
     canvas.height = height;
     var context = canvas.getContext('2d');
    
     // Copy the pixels to a 2D canvas
     var imageData = context.createImageData(width, height);
     imageData.data.set(data);
     context.putImageData(imageData, 0, 0);
    
     var img = new Image();
     img.src = canvas.toDataURL();
     return img;
    }
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)