Pixi.js: لا توجد طريقة لتقديم الأشكال بدون رسومات

بالتأكيد شيء يمكن أن ننظر إليه :)

حسنًا ، يمكنك استخدام أسلوب "Graphics._renderSpriteRect". تستخدم الرسومات renderTexture و sprites لمستطيلات sipmle ، يمكنك فعل الشيء نفسه: إنشاء renderTexture ، ثم استخدام النقوش المتحركة.

var rect = this.graphicsData[0].shape;
    if(!this._spriteRect)
    {
        if(!Graphics._SPRITE_TEXTURE)
        {
            Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10);

            var currentRenderTarget = renderer._activeRenderTarget;
            renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE);
            renderer.clear([1,1,1,1]);
            renderer.bindRenderTarget(currentRenderTarget);
        }

        this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE);
    }
    if (this.tint === 0xffffff) {
        this._spriteRect.tint = this.graphicsData[0].fillColor;
    } else {
        var t1 = tempColor1;
        var t2 = tempColor2;
        utils.hex2rgb(this.graphicsData[0].fillColor, t1);
        utils.hex2rgb(this.tint, t2);
        t1[0] *= t2[0];
        t1[1] *= t2[1];
        t1[2] *= t2[2];
        this._spriteRect.tint = utils.rgb2hex(t1);
    }
    this._spriteRect.alpha = this.graphicsData[0].fillAlpha;
    this._spriteRect.worldAlpha = this.worldAlpha * this._spriteRect.alpha;

    Graphics._SPRITE_TEXTURE._frame.width = rect.width;
    Graphics._SPRITE_TEXTURE._frame.height = rect.height;

    this._spriteRect.transform.worldTransform = this.transform.worldTransform;

    this._spriteRect.anchor.set(-rect.x / rect.width, -rect.y / rect.height);
    this._spriteRect.onAnchorUpdate();

    this._spriteRect._renderWebGL(renderer);

نقوم بتصيير المستطيلات والمثلثات والدوائر باستخدام تظليل مخصص فقط. إنه أسرع بكثير من استخدام كائنات Pixi Graphics وجميع الحواف مصقولة تمامًا بسبب استخدام حساب حقل المسافة في التظليل.

تعد إضافة حدود خارجية وتوهجات وظلال وتأثيرات أخرى إلى هذه الأشكال أمرًا بسيطًا. نحن ببساطة نضبط اللون ، و StrWidth ، و strokeColor ، والتأثيرات المتنوعة الموحدة للتظليل.

أود أن أقترح النظر في عرض الشكل / الأساسيات القائمة على التظليل لإصدار مستقبلي من Pixi ، حيث إنه متفوق بشكل لا نهائي على النهج الحالي.

نعم ، لكن الشيء هو أن القوام العرضي أكثر ثقلاً في وحدة المعالجة المركزية من العناصر الأولية البسيطة (المستطيل عبارة عن رباعي بدون نسيج مع تظليل) يجب أن يكون ، وإذا اضطررت إلى تغيير حجم هذا الشكل كثيرًا (وهو ما أفعله عادةً) خذ ضربة أو سيتطلب الكثير من التعليمات البرمجية.

هذا يبدو مثيرًا للاهتمام حقًا GordoRank ! أحب أن أرى التنفيذ الخاص بك!

Dadibom - تم تحسين مستطيلات الرسومات بشكل كبير في البكسي في الوقت الحالي حيث يتم تجميعها في نظام الرموز المتحركة. كل هذا يتم وراء الكواليس :)

أعتقد أن ما تطلبه هو طريقة مختصرة لإنشاء مستطيل؟

نعم ولكن لا يزال يتعين علي مسح نسيج وإعادة رسمه في كل إطار ، بدلاً من مجرد تحريك المستطيلات الفردية

كيف تحتاج إلى مسح كل إطار لهم؟

Dadibom استخدام رسومات متعددة ، وتغيير الموقف في كل مرة.

أما بالنسبة للأولويات ، إذا كان لديك شيء مخصص ، فيرجى جعله مكونًا إضافيًا. خاصة إذا كانت أغراضك مرتبطة بالمؤامرات. https://github.com/pixijs/pixi-plugin-example . سوف يساعد الاخرين ايضا

لا يعمل إذا كنت أرغب في تغيير الحجم :(

بالتأكيد ، يمكنني استخدام الميزان. لكنه رمز أكثر بكثير مما يجب أن يكون

لدينا أساسًا تطبيق النشر المكتبي الكامل المدعوم من PIXI (عرض / تنسيق نص SDF المستند إلى shader ، تحرير الصور ، تخطيط الصفحة ، الرسم ، منحنيات Bezier وما إلى ذلك) لقد قمنا ببساطة بتوسيع PIXI كثيرًا لتلبية احتياجاتنا.

هذا إصدار PIXI 3.0 قديم من تظليل دائري / بيضاوي يتيح لك ضبط العرض والارتفاع والتعتيم وعرض الحد وعرض الملء واللون والحد.

إنه فوضوي بعض الشيء ويمكن تحسينه ولكنه يعمل بشكل مثالي بالنسبة لنا. لدينا تظليل مماثل للمستطيلات والمثلثات والنجوم المدببة.

يتم تطبيق هذه التظليل على عارض Pixi مخصص يقوم ببساطة بتطبيق التظليل على رباعي بلا نسيج.

PIXI.filters.CircleShader = function(shaderManager) {


    PIXI.Shader.call(this,
        shaderManager,
        // vertex shader
        [
            'precision lowp float;',
            'attribute vec2 aVertexPosition;',
            'attribute vec2 aTextureCoord;',
            'attribute vec4 aColor;',

            'uniform mat3 projectionMatrix;',

            'varying vec2 vTextureCoord;',
            'varying vec4 vColor;',

            'void main(void){',
            '   gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);',
            '   vTextureCoord = aTextureCoord;',
            '   vColor = vec4(aColor.rgb * aColor.a, aColor.a);',
            '}'
        ].join('\n'),
        // fragment shader
        [
            '#extension GL_OES_standard_derivatives : enable',
            'precision mediump float;',

            'varying vec2 vTextureCoord;',

            'uniform float width;',
            'uniform float height;',
            'uniform float opacity;',
            'uniform vec4 fillColor;', 
            'uniform vec4 strokeColor;', 
            'uniform float strokeWidth;',

            'float texelSizeX = 1.0 / width;',
            'float texelSizeY = 1.0 / height;',

            'vec2 px = vec2(texelSizeX, texelSizeY);',
            'vec2 ab = vec2(width, height) / 2.0;',
            'vec2 center = vec2(0.5, 0.5);',


            'void main(void){',

            'vec2 pos = (vTextureCoord - center) / px;',
            'pos *= pos;',

            'float outerDist = dot(pos, 1.0 / (ab * ab));',

            'ab -= strokeWidth;',
            'float innerDist = dot(pos, 1.0 / (ab * ab));',

            'float outerDelta = length(vec2(dFdx(outerDist), dFdy(outerDist))) * 0.70710678118654757;',

            'float innerDelta = length(vec2(dFdx(innerDist), dFdy(innerDist))) * 0.70710678118654757;',

            'float innerAlpha = smoothstep(1.0 - innerDelta, 1.0 + innerDelta, innerDist);',
            'float outerAlpha = smoothstep(1.0 - outerDelta, 1.0 + outerDelta, outerDist);',


            'vec4 stroke = mix(strokeColor, vec4(0, 0, 0, 0), outerAlpha);',
            'vec4 fill = mix(fillColor, vec4(0, 0, 0, 0), innerAlpha);',

            'gl_FragColor = mix(vec4(0.0, 0.0, 0.0, 0.0), mix(fill, stroke, innerAlpha), opacity);',

            '}'
        ].join('\n'),
        // custom uniforms
        {
            dimensions: {
                type: '4fv',
                value: new Float32Array([0, 0, 0, 0])
            },
            projectionMatrix: { type: 'mat3', value: new Float32Array(9) },
            strokeWidth: {
                type: '1f',
                value: 0.0
            },
            strokeColor : { type: '4fv', value: new Float32Array([0, 0, 0, 0]) },
            fillColor : { type: '4fv', value: new Float32Array([0, 0, 0, 0]) },
            width : { type : '1f', value: 1.0},
            height : { type : '1f', value: 1.0},
            opacity : { type : '1f', value: 1.0}
        },
        // custom attributes
        {
            aTextureCoord:0,
            aVertexPosition:0,
            aColor:0
        }

    );


    this.strokeWidth = 0.0;
    this.strokeColor = new Float32Array([0, 0, 0, 0]);
    this.fillColor = new Float32Array([0, 0, 0, 0]);
    this.opacity = 1.0;


};

PIXI.filters.CircleShader.prototype = Object.create(PIXI.Shader.prototype);
PIXI.filters.CircleShader.prototype.constructor = PIXI.filters.CircleShader;

PIXI.ShaderManager.registerPlugin('circleShader', PIXI.filters.CircleShader);

لقد جردت من تعريفات الملكية لإبقاء هذا التعليق موجزًا.

GoodBoyDigital لأنني بحاجة للتخلص من المستطيل القديم

تضمين التغريدة أنت في منتصف الطريق ليكون هناك مكون إضافي رسمي لبيكسي.

بالنسبة إلى الإصدار 4 ، يمكنك إزالة المعلمة "args" من التظليل ، وسيتم استخراج الوسائط تلقائيًا. أيضًا ، لا يمكنك تعيين أي شيء على الزي الرسمي ما لم يكن الظل ملتزمًا. عندما يعيّن العارض قيمة للزي الرسمي ، يجب أن يكون شيء من هذا القبيل:

myShader.bind();
myShader.uniforms.strokeWidth = ...;

انظر إلى مثال العارض.

أيضًا ، يمكن فصل كود shader إلى ملفات "frag" و "vert" ، باستخدام glsify ، على سبيل المثال.

GordoRank هذه أشياء مثيرة حقًا! هل تفكر في مشاركة ما لديك - أعتقد أن الكثير من مستخدمي pixi سيجدون ما أنشأته يا رفاق رائعًا حقًا :)

تضمين التغريدة الفريق مقيد حاليًا ببناء شبكة اجتماعية وبنية أساسية للمراسلة في الوقت الفعلي للجانب التعاوني / المجتمعي / الاجتماعي لتطبيقنا ، وبالتالي لن نخرج من الإصدار التجريبي حتى ديسمبر على أقرب تقدير ، لذلك لا يمكنني السماح بذلك حقًا أي شخص لديه مسرحية الآن. ولكن بمجرد أن نكون قد بدأنا ، سنقوم بإنشاء مدونة للمطورين تصف رحلتنا والتحديات والتقنيات وما إلى ذلك. وبمجرد الانتهاء من ذلك ، سوف أشارككم معكم.

وبمجرد انتقالنا إلى الإصدار 4 من PIXI ، سنبدأ في النظر إلى ما يمكن أن نعيده إلى PIXI فيما يتعلق بالمكونات الإضافية وما إلى ذلك. أعتقد أن تخطيط النص وعرض خط SDF سيكونان بمثابة نعمة كبيرة لكم يا رفاق بالنسبة للمبتدئين.

مدهش! أنا (وأنا متأكد من بقية مجتمع pixi) أتطلع إلى ديسمبر :)
حظا سعيدا مع الإصدار التجريبي الخاص بك!

تم وضع علامة على هذه المشكلة تلقائيًا على أنها قديمة نظرًا لعدم وجود نشاط حديث لها. سيتم إغلاقه إذا لم يحدث أي نشاط آخر. شكرا لمساهماتكم.

نقل الحياة إلى هذا الخيط القديم لأنني مهتم بجانبي GordoRank يذكرهما .

1. تظليل تقديم النص SDF
2. تظليل على أساس تقديم الأشكال

هل سبق لك أن نشرت أيًا من أعمالك للجمهور؟